横並びの5つの手法をマスターしよう

CSSで見た目を整える際によく使用するのが、横並びのレイアウトです。
横並びのレイアウトの仕方はいくつかあるので、場合によって使い分けましょう。

この記事では以下の表示例のような横並びを作成を目標にします。

記述のCSSには横並びに必須なプロパティのみを記載しています。

要素に関しては以下のHTMLとCSSを使って作成しています。

<div>青</div>
<div>緑</div>
<div>赤</div>

div{
  width:100px;
  height:100px;
  background:blue;
  text-align:center!important;
  color:#fff;
  line-height:100px;
}
.wrap div + div{
  background:green;
}
.wrap div + div +div{
  background:red;
}

手法１. floatを使った横並び

まず一つ目はfloatというプロパティを使用した横並びを紹介します。

floatとは

floatとは指定した要素を浮かしたよう状態にして、ほかの要素を回り込ませるためのプロパティです。

div{
  float:left;
}

上記は左側に指定する記載例です。値には「left」を記載することで左側に要素を設置し、ほかの要素が右側に回り込むようになります。

以下の例をご確認ください。

このように青い四角の周りをテキストが回り込むように囲んでいるのがわかるかと思います。上記の例文のHTMLは以下の通りです。

<div class="left"></div>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

div要素はブロック要素なので本来であれば、改行され表示されますが、floatを使用しているので、上記の例のようになります。

値

floatの値としては以下のものが使用可能です。

floatを使った横並び例

使用するHTMLは以下の通りです。

<div>青</div>
<div>緑</div>
<div>赤</div>

これをfloatを用いて目標の見た目にするためには、floatを用いると以下のようになります。

div{
  float:left;
  margin-right: 5px;
}

margin-right: 5px; は横並びになったときに要素同士がくっついてしまうので使用しています。

補足：レイアウトが崩れた時はclear:both

仮に以下のような状況になったときを想定してください。

floatを使用するとすべての要素が回り込んでしまうため、見出しは回り込ませたくない状況でも回り込んでしまします。

そんな状況の時は、回り込ませたくない要素に対して、clearプロパティを使用します。

h1,h2,h3,h4,h5,h6{
  clear:both;
}

回り込ませたくない要素に対して、clearプロパティを使用すると上記の表示例のようになります。clearプロパティへの値は以下のものが、適用できます。

手法2. inline-blockによる横並び

二つ目にinline-blockを使用した横並びの方法を学びましょう。

inline-blockとは

inline-blockはdisplayプロパティの値です。ブロックレベル要素とインラインレベル要素のそれぞれの特性を併せ持つことを可能にします。

文字一つ一つがインライン要素と考えると、インラインの特性を持たせることで横並びにすることが可能と考えることができますよね。

記載の方法

インラインの特性を利用して横並びを指定してあげます。指定の方法は次の通りです。

div{
  display:inline-block;
  width:200px;//任意の値に
}

横並びにしたい要素に対して、displayプロパティでinline-block要素を指定してあげ、幅を指定することで横並びを可能にします。

inline-blockを用いた横並びの例

例を見てみましょう。使用するHTMLはfloatの時と同様以下を用います。

<div>青</div>
<div>緑</div>
<div>赤</div>

上記の3つをinline-blockを使用して横並びにしてみます。

.view.third div{
  display:inline-block;
}

inline-blockを使用したときに意図していない隙間ができることがあります。そちらについては以下の記事で解説していますのでご覧ください。

手法3. tableを使用した横並び

HTMLに表を作成するtableタグというものがあります。tableは強制的に表のように見せることが可能ですが、横に表を伸ばしていくと横並びのようなレイアウトになりますよね。

このtableの特性を利用して横並びを作成していきます。

CSSで要素にtableのセルの特性を持たせることができます。

<div class="wrap">
  <div>青</div>
  <div>緑</div>
  <div>赤</div>
</div>

.wrap{
  border-collapse: separate;
  border-spacing: 5px 0;
}
.wrap div{
  display:table-cell;
}

table-cellにはmarginが効かないので、隙間を開けるために親要素を用意し、border-collapseプロパティで隙間を指定します。

また、隙間のサイズを指定するためにborder-spacingプロパティを用います。

手法4. flexbox による横並び

4つ目の手法はflexboxという横並びの手法です。

flexbox とは

最新のバージョンであるCSS３から追加されたプロパティです。様々な機能を持っており、簡単に横並びが可能です。

高さを自動調整

flexboxを使用すると高さを自動的に調整してくれます。この高さ調整がflexboxの機能の一つです。

例えばfloatやinline-blockなどを使用すると次のようになります

しかしflexboxを使用すると以下のようになります。

<div class="wrap">
  <div>青：テキストテキスト</div>
  <div>緑：テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
  <div>赤：テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>

.wrap{
  display:-ms-flexbox;//IE 10に対応
  display:-webkit-box;//Safari 6.1-8,
                      //Android 2.1-4.3,
                      //iOS Safari 7-8.4,
                      //Chrome 21-28,Opera 15-16に対応
display:flex;
}
.wrap div{
  width:100px!important;
}

レイアウトの調整

justify-contentプロパティを使用することで要素の空白を調整することができます。上記の例に対し以下のCSSを反映させてみます。

.wrap{
  display:-ms-flexbox;//IE 10に対応
  display:-webkit-box;//Safari 6.1-8,
                      //Android 2.1-4.3,
                      //iOS Safari 7-8.4,
                      //Chrome 21-28,Opera 15-16に対応
  display:flex;
  -ms-flex-pack: justify;//IE 10に対応
  -webkit-box-pack: justify;//Safari 6.1-8,
                          //Android 2.1-4.3,
                          //iOS Safari 7-8.4,
                          //Chrome 21-28,Opera 15-16に対応
  justify-content:space-between;
}

justify-contentは値を変えることでレイアウトを組むことができます。

詳細は長くなるので別の記事で紹介します。ほかのさまざまな機能もそちらで紹介します。

対応ブラウザに注意

flexboxは非常に便利ですが、古いブラウザには対応していません。例に記述したベンダープレフィックス（-me-や-webkit-）が必要だったり 、IE 6-9 にはそもそも対応していなかったりするので注意しましょう。

flexboxを用いた横並びの例

いくつか例をお見せしましたが、最後に目標を作成する場合の記述例をご覧ください。

<div class="wrap">
  <div>青</div>
  <div>緑</div>
  <div>赤</div>
</div>

.wrap{
  display:-ms-flexbox;
  display:-webkit-box;
  display:flex;
  justify-content:flex-start;
}
.wrap div{
  margin-right:5px;
}

手法5. gridによる横並び

5つ目の手法はgridという横並びの手法です。

gridとは

gridはトラックと呼ばれる箱をあらかじめレイアウトに従って用意しておき、その箱の中で、コンテンツの位置を決めてあげる手法です。

例題のレイアウトを用意しようとすると以下のような記述になります。

.wrap {
  display: grid;
  grid-template-columns: 100px 100px 100px;
　grid-auto-rows: 100px;
  column-gap: 5px;
}

grid-template-columnsプロパティにより列のレイアウトをを、grid-auto-rows行にて行の高さを指定しています。

レイアウト間の隙間に関して行は「column-gapプロパティ」を、列は「row-gapプロパティ」を用いて指定しています。

機能が盛りだくさんのgrid。もっと知りたいという方は調べてみてください。

まとめ

横並びはWEBデザインをするうえで基本のレイアウトになります。どんなWEBサイトにも登場するほど、頻繁に使用するので、各手法の特徴をしっかりと理解して最適な手法を選択してください。