236
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

cssで要素を横並びにする方法まとめ

基本となるhtml

<div class="boxContainer">
  <div class="box">BOX1</div>
  <div class="box">BOX2</div>
  <div class="box">BOX3</div>
  <div class="box">BOX4</div>
  <div class="box">BOX5</div>
</div>

cssのみ方法を変えてそれぞれの方法にどのようなメリット・デメリットがあるか見ていく。

float

.box{
  float: left;
}

.boxContainer{
  overflow: hidden;
}

メリット

  • 子要素の左右の順番を変えたい場合にcssのみで調整できる(ただし、左右のみなので大々的な修正はしづらい)
  • 子要素の内容により高さが変わる場合は上揃えになる(この点では、子要素の高さの増減に対応しやすい)

デメリット

  • 子要素は文字通りfloat(浮いた)状態になり親要素の高さが0になってしまう
  • 子要素の内容は基本上揃えになる(vertical-alignが使用できない)
  • 親要素の幅を指定しないとレイアウトが崩れる場合がある

親要素の高さ0の解消方法

  • 親要素にoverflow:hiddenを設定する(ただし親要素からはみ出る要素が隠れる)
  • floatした後にくる子要素にclear:bothを設定する
  • 親要素自体をfloatさせる
  • 親要素に以下のようにclearfixを設定する
.clearfix:after {
  content:" ";
  display:block;
  clear:both;
}

IE7以下をサポートしなければかなりスッキリする。
簡単なのはoverflow:hiddenとclearfix。

inline-block

.box{
  display: inline-block;
  font-size: 16px;
}

.boxContainer{
  font-size: 0;
}

メリット

  • 子要素同士の高さが異なり、親要素の幅が狭まった場合でもレイアウトが崩れることがない

デメリット

  • 子要素の間に改行による隙間ができてしまう
  • 子要素同士の並びをcssのみで調整することはできない
  • 子要素の内容は基本上揃えになる(vertical-alignが使用できない)

改行による隙間の解消方法

  • 親要素のfont-sizeを0にして子要素でfont-sizeを指定する
  • 子要素の改行を取り払って以下のように一行で記述する
<div class="box">BOX1</div><div class="box">BOX2</div><div class="box">BOX3</div>
  • 改行を以下のようにコメントアウトする
<div class="box">BOX1</div><!-- 
--><div class="box">BOX2</div><!-- 
--><div class="box">BOX3</div>
  • 子要素の閉じタグを以下のように次の子要素の前に持ってくる
<div class="box">BOX1
</div><div class="box">BOX2
</div><div class="box">BOX3</div>

スマートなのは親要素のfont-sizeを0にする方法。

table-cell

.box{
  display: table-cell;
  vertical-align: middle;
}

.boxContainer{
  width: 100%;
  display: table;
  table-layout: fixed;
}

メリット

  • 子要素の幅を設定しなくても親要素の幅を指定するだけで自動的に子要素の幅が割り付けられる
  • 親要素にtable-layout:fixedを指定することで、子要素の幅が内容によって増減しても子要素の幅は均等に割り付けられる
  • 子要素の内容の高さを揃えるのにvertical-alignを設定できる

デメリット

  • marginによる子要素同士の調整ができない(paddingはできる)(border-spacingによる調整もできるが、子要素全てで均等にしかできない)
  • 親要素の幅を変更してのレイアウト調整に対応しづらい(レスポンシブ対応など)

flexbox

.boxContainer{
  display: flex;
}

横並びにするだけなら親要素にこれ一行だけでOK。
flex-directionの初期値がrowなため。

メリット

  • 親要素にjustify-contentを指定することで子要素全体の水平位置を設定できる
  • 親要素にalign-itemsを指定することで子要素全体の垂直位置を設定できる
  • 親要素にflex-directionを指定することで子要素全体の並びを設定できる
  • 子要素にflexを指定することで子要素の幅をリキッドに設定できる

デメリット

  • 対応ブラウザがまだ芳しくない

対応ブラウザ

IE9は未対応。IE10はdisplay:-ms-flexbox
また、IE11ではflex:1ではなくflex-grow:1としなければならない。
Safari8 未満はdisplay: -webkit-flex
iOS9 未満はdisplay: -webkit-flex
Android 4.3 未満はdisplay: -webkit-box

justify-content

説明
center 子要素全体を左右中央揃えに
flex-start 子要素全体を左揃えに
flex-end 子要素全体を右揃えに
space-between 子要素全体は利用可能な領域いっぱいに広がり、最初の子要素が左端に、最後の子要素が右端に移動し、その間の要素は等間隔に並べられる

align-items

説明
center 子要素全体を上下中央揃えに
flex-start 子要素全体を上揃えに
flex-end 子要素全体を下揃えに

flex

flex-grow、flex-shrink、flex-basisのショートハンド。
全ての子要素をflex:1にすれば、子要素の幅を利用可能な領域いっぱいかつ同じ幅にする。
その中の1子要素をflex:2にすれば、その子要素のみ他の子要素の2倍の幅になる。

flex-direction

説明
row 子要素全体の並びを横並びにする
column 子要素全体の並びを縦並びにする

まとめ

  • ブラウザ対応に問題がなければflexbox
  • レイアウト全体など子要素の内容が大きく増減しそうな場合はfloat
  • 子要素の左右の入れ替えが発生しそうな場合はfloat
  • ナビゲーションなど子要素の内容が小さく増減しなさそうな場合はinline-block
  • vertical-alignが必要になりそうな場合はtable-cell

参考URL

display:table-cell;を安易に使うべきでない理由いろいろ
これからのCSSレイアウトはFlexboxで決まり! | Webクリエイターボックス

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
236
Help us understand the problem. What are the problem?