KJ DEV
How to

初心者のためのHTMLとCSSで横並びを実現する1番簡単な方法

HTMLとCSSで横並びを実現する方法はいくつかあります。

これまでは対応するブラウザや横並びのレイアウトによって方法を変えてきましたが、横並びを実現するための1つの方法として```display: flex;```が実用レベルになりました。

```dispaly: flex;```を使うのが横並びを手っ取り早く簡単に実現するのに一番おすすめな方法です。

この記事では```display: flex;```で横並びを実現する方法を紹介します。

目次
  1. HTMLとCSSで横並びを実現
  2. 横並びの水平位置を揃える
    1. 上揃え
    2. 中央揃え
    3. 下揃え
  3. 横並びの開始位置を揃える
    1. 左揃え
    2. 右揃え
    3. 中央揃え
    4. 均等揃え
  4. 横並びで折り返しする
  5. display: flexの対応ブラウザ
  6. 横並びにはdisplay: flexを使おう

HTMLとCSSで横並びを実現

さっそく```display: flex;```を使った横並びで、一番シンプルな例です。

@[codepen](https://codepen.io/koojy/pen/mKOPvx/)

横並びにしたい要素を囲った要素に```display: flex;```を指定します。

この場合は下記です。

  • 横並びにしたい要素:li
  • 囲った要素:ul

ulには「.items」というクラスがついており```display: flex;```が指定されています。

横並びの水平位置を揃える

横並びにした時それぞれ高さが違う場合は、上揃え・中央揃え・下揃えのように位置を調整したくなるかと思います。

```display: flex;```を使うと水平位置の調整も簡単にできます。

上揃え

上揃えにするには、先に紹介したコードで自然と上揃えになりますが、指定する場合は```align-items: flex-start;```を指定します。

@[codepen](https://codepen.io/koojy/pen/GGNZVG/)

中央揃え

中央揃えは横並びのレイアウトを実現するために他の方法では、苦労も多いですが```display: flex;```を使うと簡単に実現できます。

```align-items: center;```を指定することで、横並びにする要素の中で一番高いものに合わせてすべてが中央の位置になります。

@[codepen](https://codepen.io/koojy/pen/eKBzmJ/)

下揃え

下揃えは```align-items: flex-end;```を指定します。

@[codepen](https://codepen.io/koojy/pen/KeNMdK/)

横並びの開始位置を揃える

```display: flex;```は水平位置だけでなく、どこから横並びを開始するかも選択できます。

CSSを1行書き足すだけで簡単に実現できるので、順番にその方法を紹介します。

左揃え

左揃えは指定しなくても自然と実現されますが、指定を加える場合は```justify-content: flex-start;```を指定します。

@[codepen](https://codepen.io/koojy/pen/gKLMxq/)

右揃え

右揃えは```justify-content: flex-end;```を指定します。

@[codepen](https://codepen.io/koojy/pen/gKLMXE/)

中央揃え

中央揃えは```justify-content: center;```を指定します。

@[codepen](https://codepen.io/koojy/pen/NzbrXW/)

均等揃え

均等揃えは```justify-content: space-between;```を指定します。

@[codepen](https://codepen.io/koojy/pen/XYNKVR/)

ヘッダーのレイアウトを作る時に、左寄せでロゴ、右寄せでナビゲーションというようなよくあるレイアウトを実現する時に重宝します。

横並びで折り返しする

```display: flex;```で横並びを実現した場合、標準では折返しがされず、横並びの要素が縮小されてしまいます。

まず標準だとどうなるかは下記です。

@[codepen](https://codepen.io/koojy/pen/xzROEr/)

そこで合わせて```flex-wrap: wrap;```を指定するようにします。

@[codepen](https://codepen.io/koojy/pen/MXbebK/)

```flex-wrap: wrap;```を指定されたことで入り切らない横並びの要素が折り返されました。

display: flexの対応ブラウザ

冒頭でHTML・CSSの横並びにはいくつか方法があると書きました。

その理由は```display: flex;```の対応ブラウザでした。

現在は全ブラウザの最新版に対応しており、実用レベルとなりました。

```display: flex;```の対応ブラウザを詳しく確認したい場合は下記のリンクをご覧ください。

[Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/#feat=flexbox)

横並びにはdisplay: flexを使おう

紹介してきたように```display: flex;```は救世主とも言えるほど、横並びを簡単に実現できます。

これからHTMLとCSSで横並びをやりたい人は、```display: flex;```から覚えるのがよいですね。

```display: flex;```は他にもできることが多く慣れてきたら、少しずつ知識を増やしていくのがおすすめです。

開発で参考になった本

実際に読んでみて開発に役立った本を紹介しています。

これから本格的にデザインシステムを学んで作りたい時にとても参考になる一冊でした。デザインシステムついて幅広く触れられているけど、「tailwindを触ってデザインシステムに興味を持った」という人でも少しずつ取り入れやすいです。