HTML

【HTML5】float:leftはもう使わないよ? – 要素を横並びにするには

書き方のベストプラクティスは常に変わる!

こんにちは。ProgLearn;編集部です。

突然ですが、皆さんはHTMLで要素を横並びにしたい時、どのようにCSSを指定していますか?

どんぶラッコ
どんぶラッコ
んー、float:leftを使ってるかな…

2010年前半にHTMLを学習した方は、float:leftclear:bothなどで横並びを設定していた記憶もあるのではないでしょうか。

これ、実は今あまり使わないんです!

display:flexを使う!

いろんな方法があるのですが、最近よく使われるのは display:flex;を利用する方法です。

例えば

<ul class="menu">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>
という要素があり、li要素を横並びにしたいとします。

その場合、

.menu{
  display: flex;
}

と指定してするだけで横並びになってしまうんです!

2020年9月26日追記: display:flex に関する解説記事 & 動画をリリースしました!

flexの使い方についてはflexboxfroggyというサイトを使うとより理解が深まります。。

https://flexboxfroggy.com/

上のゲームを学習するとわかるのですが、下記のようなcssと組み合わせることで様々な要素を指定することができます!

  • flex-direction … 横方向に並ばせる?縦方向に並ばせる?
    • row … 横
    • row-reverse … 横、逆順
    • column … 縦
    • column-reverse … 縦、逆順
  • justify-content … 各コンテンツの並び方の指定
    • flex-start … 始点寄せ
    • flex-end … 終点寄せ
    • center … 中央寄せ
    • space-between …間を開けて
    • space-around … 間を開けて(周囲にスペース)
  • align-items
    • flex-start
    • flex-end
    • center
    • baseline
    • stretch
  • align-self … 個別に設定
  • align-content … 複数行の指定
    • flex-start
    • flex-end
    • center
    • space-between
    • space-around
    • stretch
  • order 順番を変える
  • flex-wrap
    • nowrap … 折り返さずに1行にまとめる
    • wrap … 折り返す
    • wrap-reverse
  • flex-flow … flex-direction + flex-wrap

floatみたいに、どこでclearをするか、とか余計な心配をしなくていいのがいいですね!

トレンドは常にチェック!

いかがだったでしょうか?今はdisplay:flexが主流ですが、1年後にはまた変わっているかもしれません。

実際、私がHTMLを初めて学んだ2011年にはdisplay:flexではなく、float:leftの方式が主流でした。たった8年で大幅に書き方が変わってしまっているのです。

エンジニアを志す以上、常に最新のトレンドを追うように心がけていきましょう!

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です