CATEGORY

OTHER

画面ダークモード切り替えはブラウザ・OSの設定に依存します。

2022.4.29

  • プログラミング
  • CSSで横並びを作る。複数のパターンをご紹介します

    目次

    HTML・CSSでコーディングする際に、高確率で出てくる要素の横並び。

    横並びはいくつかの方法があるので、有名な3パターンをご紹介します!

    float: left;

    多くのWEB・プログラミングスクールで最初の方に紹介されるfloat。

    floatは浮かすという意味で要素を浮かすことで、空いたスペースを詰める動きで横並びを作っています。

    See the Pen Untitled by ALcuesto (@ALcuesto) on CodePen.

    floatにはfloat:rightもあり、今回は2つともにいれましたが、どちらか1つだけ(横並びしたい要素)にだけfloatを入れることも可能。

    ただfloatは浮かすので、その下に他の要素を入れていくと、marginやpaddingで距離を調整しないと上手くいかなかったりとするので、あまり使用頻度は高くないと思います。

    display: inline-block;

    ヘッダー、フッターなどのメニューやリストの横並びで多く使用されているのが、display: inline-block;

    元々要素にはblock要素とinline要素があり、inline要素はディフォルトで横並びになる性質があります。

    ※ inline要素の主なものは、【aタグ】【imgタグ】【spanタグ】など

    ただ、inline要素だとwidthなどの指定ができなかなったり。。。

    それを解消するのがdisplay: inline-block;

    display: inline-block;はinline要素の性質を保ちながらblock要素にしてね!ということなので、横並びにもなるし幅などの指定も可能

    See the Pen Untitled by ALcuesto (@ALcuesto) on CodePen.

    display: flex;

    最もおススメなのがdisplay: flex; これはdisplay: flex;で指示された要素の中身を横並びにする指示です。

    ※display:inline-blockなどと指示する位置が違うので注意!

    See the Pen Untitled by ALcuesto (@ALcuesto) on CodePen.

    display: flex;で横並びにした要素を上下中央にする場合は、 align-items: center;を記載することでOKです。

    See the Pen align-items: center;の説明 by ALcuesto (@ALcuesto) on CodePen.

    いかがでしょうか。

    このように、横並びをするには複数のパターンがあるので、指示する位置や表現したいデザインに応じてCSSを選んでくださいね!

    ちなみに私は、ほぼdisplay: flex;で対応して、メニューだけdisplay: inline-blockでやっています!

    関連記事

    Visual-Studio-Code-サムネイル

    WEBコーティングにおススメコードエディタ Visual Studio Code

    2021.9.22

    canvasで点と点を線で繋ぐ

    canvasタグで点と点を繋ぐ線を描く

    2021.12.1

    xamppの使用でphpローカル環境構築

    XAMPPを使って、phpのローカル開発環境構築!

    2021.9.22

    Javascriptでオリジナルテーマに記事内目次を表示しよう!

    2022.4.29