Bootstrap4で遊んでみた。画像のレスポンシブ対応(img-fluid)が良い感じ

スポンサーリンク

専業ブロガーのかわんです。

我流でHTML /CSSをマスターしているので、1から手打ち出来ますが、あまりに効率が悪いのでBootstrap4で遊んでみた。

Bootstrap4は超有名ですよね。これを使えば1から手打ちしなくて良いから便利です。

なので、CSSもチョロっと書けばOKです。

あ、メディアクエリは多少必要でした。

スマホで表示させた場合、マージンが取れなかったので。

僕、PC持ってないんです・・・

Bootstrap4で遊ぶ時、PC持ってないので12.9インチiPad Proで遊びました。

コーディングアプリが必要ですが、僕はCoda iOSを使っています。

このCoda iOSなんですが、かなり高額です(笑)

でも、僕的にはCoda iOSを使うしかありません(笑)。

様々なコーディングアプリがありますが、トータルで考えるとCoda iOSがベストかなって感じです。

時々バグめいた現象が起きますが、まぁ、仕方がないですねー。。。

PCだと、Dreamwaverとかありますが、12.9インチiPad Proでは使えないので。

この先使えるようになったら、お金を払ってでも買います。Coda iOSは気に入っていない・・・

img-fluidが便利

これはもうおまじない的な事なんですが、画像には必ずimg-fluidを付けるようにしています。

<img src="images/test.jpg" class="img-fluid"></img>

imgタグに「class="img-fluid"」を付けるとレスポンシブ対応になります。

画面の大きさが変わっても、画像は最適化されます。

説明的にはこれで合ってるはず。

僕が制作するWebサイトで使う画像は全て「class="img-fluid"」を使用しています。

まとめ

実は、久々にBootstrap4を使ったのですが、あるWebサイトを3時間で制作しました。

多分、Bootstrap4を使っていなかったらもっとかかっていたと思います。

画像が9枚あって、正方形にする必要があったんです。

CSSで何とかなりそうですが、レスポンシブ対応を考えた時、CSSを書くのはやめておいた方が良いと結論。

なので、1枚ずつ正方形にトリミングしました(笑)。

もし、この作業が無かったら2時間程度で終わっていたかと。

ちなみに、ペライチのWebサイトです。

ひょっとして時間かかりすぎ?!

まぁ、遊びでやってるので時間は気にしない、気にしない(笑)