Kakera.link

CSS中級 Flexboxマスター編

Flexboxとは?

Webページをつくっていると2列や3列に並べた要素の配置がしたいことがよくあります。

例えば、ブログの記事が真ん中に大きめにあって、右の方にもう1列目次があるようなものや、

2E56F925-F315-4135-9A5C-CBD7CEA21BB7

写真を3列で上からならべるようなもの

42B8B259-E5AD-4222-A31D-F0B9689737C0

など。

こういう場合にとても便利なのが、今回のFlexboxという書き方です。
箱を並べていく感覚で直感的に書くことが出来、とても便利です。

最終更新: 2021/02/15 00:25

写真を並べてみる〜ファイルの作成と画像の追加〜

Flexboxの威力を発揮し、仕組みが分かりやすいのが、画像を並べる場合です。

今回は、3列の画像を左上から右に向かって並べていく形をつくっていきます。
下の手順に沿って、準備を進めてください。

最終更新: 2021/02/15 00:00

写真を並べてみる〜HTML編〜

<body>
</body>

の間のところに画像をいれていきます。

最終更新: 2021/02/15 09:59

写真を並べてみる〜CSS編〜

いよいよCSSを追加します。

Flexboxを使うと左から順に並べてくれます。
style.cssにこちらを追加してください。

.images-wrap {
    display: flex;
    flex-wrap: wrap;
}

これで左から順に並ぶようになっています。
上のdisplay が左から並べる役割で、下の flex-warp が右まで行ったら折り返すという役割を担っています。

しかし実は、このままで表示しても思ったように表示されません。

最終更新: 2021/02/15 10:38

Flexbox実戦課題

これまでの総集編として、Flexboxを使った実戦課題をやってみてください。

下のようなブログサイトをつくってみてください。
余裕のある方は「ブログタイトル」や「記事タイトル1」などの部分を自由に変えてみてください。

完成した方はコメント欄に画像を送って頂けるとうれしいです。

最終更新: 2021/02/15 10:14

Flexbox実戦課題 答えの例

Flexbox実戦課題を実際にやってみました。
手順や考え方なども話しているので参考にしてみてください:)

最終更新: 2021/02/15 11:55