CSSの display: inline、display: block、display: inline-block をマスターしよう！

li はブロックレベル要素なので、そのままだと縦積みされてしまいます。 li を float させたところで、中央揃えにするには ul の幅を決めて margin: 0 auto にしなければいけませんが、中身がテキストなので幅が決めづらい…文字数や文字サイズが変わったら困っちゃうし… そこで、display: inline。インラインの特徴を思い出してみましょう。 li に display: inline を指定し、ul に text-aline: center を指定します。

ul li インライン要素を display: block してみよう

さっきと同じリストを、こんどはサイドナビのように、縦並びにしたい場合。 なんだそんなのカンタンじゃん！だって li はそのままで縦並びになるじゃん！ まあそうなんですけど、ちょっと問題が。↓のリストの右端の方にカーソルを持って行ってみましょう。

ね、縦並びにはなったけど、テキストのところしかクリックできないでしょ？ちょっと不便です。そこで、display: block。こんどは、インライン要素の a に display: block を指定します。（さっきの ul と li のスタイルは消しましょう。）

するとこんな感じに。右端の方にカーソルを持って行ってみましょう。こんどは端っこまでクリックできますよ。

margin や padding も、a の上下左右に指定することができます。ブロックレベルの特徴を思い出してみましょう。

display: inline-block の良いトコロ

さて、こんどは display: inline-block です。「インラインってテキストみたいな感じでしょ、ブロックってブロックみたいな感じでしょ…え、インラインブロックって何さ？？」インラインブロックってこんな感じです。インライン要素のように横に並んでブロック要素のように幅や高さ、margin や padding を指定できます。、この特徴、何かに似てますよね。そう、img 要素です。ちなみに img 要素は「置換インライン要素」といって、「テキスト（＝インライン）を画像（＝幅や高さがある）に置き換えたもの」という扱いです。特徴をまとめると、こんなかんじ。

横に並んでいく
幅 width と高さ height が指定できる
上下左右に margin を指定できる
上下左右に padding を指定できる
text-align を親ブロックに付けることで指定できる。
vertical-align が指定できる。

ページネーションのように、項目を横に並べて、かつボタンのように幅や高さをもたせて表示したい、なんて時に便利です。例えばこんなかんじのリスト。

ul li a width: 40px;> ul li vertical-align: bottom;> li.current a width: 40px;> display: inline-block の困ったトコロ

便利な display: inline-block ですが、ちょっと困ったことも。 display: inline-block は、IE7 以下のオールドブラウザでは、a や span など、インライン要素に対してのみ対応していますえ、じゃあ IE7 以下で、ブロックレベル要素に使うにはどうしたら？

li < display: inline-block; *display: inline; zoom: 1; >

ナンデコレデウマクイクノデスカ？これにはIEの「hasLayout」が関係しています。長くなりましたので、hasLayout については次回説明しましょう！

この記事を読んだ人はこんな記事も読んでいます

テーブルを横スクロールで表示する方法
サイトから学ぶ、hタグ（見出し）の使い方とデザイン #２
ホバーのときに画像を拡大する方法
chromeのおすすめ拡張機能10選
サイトから学ぶ、hタグ（見出し）の使い方とデザイン #１
メインビジュアル20選！スライドや動画になっているパターン♪
Powered by Where did they go from here?

876,241views CSSの display: inline、display: block、display: inline-block をマスターしよう！
699,825views CSSの【float】についてちょっと本気出して説明してみた。
353,664views 見ながら覚えよう！positionプロパティ「absolute」と「relative」についてのお話
245,968views 今さら聞けない、marginとpaddingの違い
231,123views CSSで中央寄せにする方法まとめ

📎📎📎📎📎📎📎📎📎📎