Help us understand the problem. What is going on with this article?

よく使うCSSで要素を横並びにする方法と使い分け

More than 1 year has passed since last update.

要素を横並びにする方法は多種多様ありますが、その中でも個人的によく使うものと、その使い分けをまとめました。※display:flexについては説明する事項が多いため、今回は割愛します。flexでええやんというツッコミはお控えいただけると幸いです。

display:inlinedisplay:inline-block

以下のように、アイコンにテキストを周りこませるような際などに使用しています。

アイコンを形成する要素にfloat:leftを指定しても似たようなレイアウトにはできますが、テキストの縦中央揃えがややめんどうです。
display:inline-blockはブロック要素として形成されるため、widthheightmarginなどの指定もできます。加えて、インライン要素のような振る舞いをするので、後続に続くインライン要素は後ろに続くように回り込みます。

今回は、アイコンとテキストで説明しましたが、他にもパンくずリストなどのシンプルな横並びレイアウトの際に使用しています。

スクリーンショット 2016-01-26 17.29.34.png

HTML

<p class="text"><span class="text__icon">おすすめ></span><a class="text__link">テキストテキスト…</a></p>

CSS

/*装飾のスタイルは省いています。*/
.text__icon {
  display:inline-block;
  vertical-align: middle;
}
.text__link {
  display: inline;
  vertical-align: middle;
}

また改行によって生まれる隙間を消す必要はありますが、以下のように高さの異なるボックスを綺麗に並べることも可能です。

スクリーンショット 2016-02-01 12.15.24.png

ただ、各要素の高さそのものが伸びているわけではないので、背景色やボーダーなどが指定されていて、デザイン的に高さを揃える必要が場合はこの方法は使用できません。

display:tabledisplay:table-cell

display:tableを使用すると要素にtable要素のような振る舞いをさせることが可能になります。

tableのrow(行)のと同じような挙動になるので、要素が増えても段落ちせず、かつ自動で調整をいれたい場合に使用します。例えば、以下のようなナビゲーションなどに使えます。

スクリーンショット 2016-02-02 12.20.39.png

HTML

<ul class="nav">
    <li class="nav__item"><a href="#">WORKS</a></li>
    <li class="nav__item"><a href="#">NEWS</a></li>
    <li class="nav__item"><a href="#">RECRUIT</a></li>
    <li class="nav__item"><a href="#">ABOUT</a></li>
    <li class="nav__item"><a href="#">CONTACT</a></li>
</ul>

CSS

/* スタイル適当です */
.nav {
    display: table;
    width: 100%;
    background: #FFF;
}
.nav__item {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.nav__item + .nav__item {
    border-left: 1px solid #CCC;
}
.nav__item a {
    display: block;
    padding: 15px 0;
    color: #666;
    text-decoration: none;
    font-size: 14px;
}

要素が増減があっても自動で伸縮するので、よほどのことでない限り、レイアウトが保たれます。

また上の例では中の要素(テキスト)に応じて、それぞれ自動で幅が決まりますが、display:tableを指定している.navtable-layout:fixedを指定すると、固定レイアウトになり、.nav__itemに幅の指定がない場合、均等に幅が配置されます。

スクリーンショット 2016-02-02 12.27.45.png

float

他にも色々と用途はありますが、例をあげると、カラムレイアウトや、以下の画像とテキストが横並びになっているコンポーネントを作成するような際に使用しています。

スクリーンショット 2016-02-02 14.42.11.png

HTML

<div class="media">
    <div class="media__image">
        <img src="foo.png" alt="">
    </div>
    <div class="media__summary">
        <h2 class="media__heading">見出し見出し</h2>
        <p class="media__text">テキスト〜</p>
    </div>
</div>

CSS

.media {
    background: #FFF;
    padding: 10px;
    overflow: hidden;
}
.media__image {
    float: left;
    margin-right: 10px;
}
.media__summary {
    overflow: hidden;
}
.media__heading {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

float浮動化後続する内容の流し込みという特殊な2つの特性をもっています。

前述の例でいうと、.media__imagefloat:leftを指定することにより、.media__imageの要素が文字通り浮きます。

浮いてしまうことにより、親の要素(.media)が中身の高さを認識できなくなるため(今回はテキストの要素の方が大きいためどちらにせよ認識しますが)、.media要素にoverflow:hiddenを指定し.media__imageの高さも包括して計算するようにしてあげます。
※clearfixについては割愛します。

後続する要素に何も指定がない場合、以下の画像のように、画像の部分にテキストが回り込みますが、隣接する要素(.media__summary)にoverflow:hiddenを指定してあげると、テキストの回り込みを防ぎ、2カラムのレイアウトが作成されます。

スクリーンショット 2016-02-02 15.47.43.png

似たようなレイアウトはdisplay:tableを使用しても作成できますが、「やっぱりテキストを回り込むようにしたい!」などと言われた時に、全部指定し直すことになります。逆に「画像とテキストを縦位置中央揃えにしたい」と言われたりすると、floatだとうまくレイアウトを作れないので、display:tableを使用するのが好ましいです。何がベストの組み方かはそのときどきの状況で判断するしかありません。

今回はCSS3以降のプロパティについては省略しましたが、横並びにする方法は他にも多々あります。その場その場でどの方法が最善かを選ぶのは難しいかもしれませんが、強いていうなら、分かりやすさ(absoluteなどで強引に作らない)や汎用性の高さ(トルツメしてもレイアウトが保たれる)などを基準としてもいいかもしれません。

Why do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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