CSS中級 Flexboxマスター編

Flexboxとは？

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

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

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

など。

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

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

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

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

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

今回のプロジェクト用の「my_photos」フォルダを作成
つくったフォルダの中に、 index.html と style.css を作成
つくったフォルダの中に、好きな画像を9枚追加
HTMLにテンプレートを追加

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    </body>
</html>

これで準備は完了です。
フォルダやファイルの名前などは自由に決めて問題ないので、好きな名前をつけてください。

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

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

<body>
</body>

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

<body>
    <div class="images-wrap">
    </div>
</body>

まずは画像を入れる箱を用意しました。ここに画像を9枚分追加します。
(画像ファイル名が img1.png、img2.png、...、img9.png の場合で書いているので、ファイル名に合わせて適宜変更してください）

<body>
    <div class="images-wrap">
        <img class="image" src="img1.png">
        <img class="image" src="img2.png">
        <img class="image" src="img3.png">
        <img class="image" src="img4.png">
        <img class="image" src="img5.png">
        <img class="image" src="img6.png">
        <img class="image" src="img7.png">
        <img class="image" src="img8.png">
        <img class="image" src="img9.png">
    </div>
</body>

これでHTMLの準備は完了です。
画像が正しく表示されているか確認してみてください。

この段階では、上から9つが縦に並んでいるだけの状態です。
ここからstyle.cssファイルを更新して、きれいに並べていきます。

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

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

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

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

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

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

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

なぜかというと、画像の幅が指定されていないので、画面いっぱいの幅の画像を左から並べている状態になっており、そのためただ上から下へと並んでいるだけになっているからです。

これを解消するには画像の幅を指定すれば大丈夫です。
先ほどのcssに .image についての部分を追加します。

.image {
    width: 33%;
}

33%は$\displaystyle \frac{1}{3}$ を表しています。
再度読み込むと、これできちんと3列に並んで表示されます。

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

Flexbox実戦課題

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

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

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

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

Flexbox実戦課題答えの例

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

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