CSS 要素を横一列に並べる方法

一覧ページによく使われる、divliなどの要素を横一列に並べる方法を紹介します。

最もカンタン「flexbox」

サンプル

See the Pen
css layout horizontal – flexbox
by Aquarium (@aquarium)
on CodePen.

HTML


<div class="item-list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

CSS


.item-list{
  display: flex;
}
.item-list .item{
  box-sizing: border-box;
  padding: 40px 80px;  
}

特徴

  • 親要素に指定。子要素全てに適用

用途

  • 主にdivに使用
  • ul, liにも使用可。その場合はulに指定
  • 横幅いっぱいに要素を横並びにしたい時におすすめ

ボタンに使うなら「inline-block」

See the Pen
css layout horizontal – inline-block
by Aquarium (@aquarium)
on CodePen.

HTML


<div class="item">Button</div>
<div class="item">Button</div>
<div class="item">Button</div>

CSS


.item{
  display: inline-block;
  box-sizing: border-box;
  padding: 10px 40px;  
}

特徴

  • 指定要素のみに指定し、適用される
  • ソースコードの改行で要素の左右に隙間ができることがあります

用途

  • ボタンや画像など、文章内の要素を改行せずに横一列にしたい時におすすめ

おすすめ書籍

  • このエントリーをはてなブックマークに追加

デザイナーのUIメモ帳

レイアウト

Google Map

ヒーローエリア

画像

CSSデザインサンプル