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

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

いろいろ便利な CSS の display プロパティ。今回は

  • display: inline
  • display: block
  • display: inline-block

についておさらいしてみます。HTMLひよこちゃん向けの記事です！

displayプロパティで、ブロック・インライン・インラインブロックをおさらいしてみた

displayプロパティ

displayは、要素の「表示形式」を指定するプロパティ。 ブロックレベル要素をインライン形式で表示したり、インライン要素をブロックレベル形式で表示することができます。 構造的にはブロックレベル要素なんだけど、インラインとして表示させた方が便利…（もちろんその逆も）なんてときに使います。

「はてさて、ブロック？？？インライン？？？」

ではまずブロックレベル要素とインライン要素の表示の違いからカンタンに。知ってるよ、って人は飛ばしていいよ！

ブロックレベル要素

文書の骨組みとなる要素です。見出し要素（h1, h2, h3…h6）、p、ul、ol、li、div、table など。 要素の前後に改行が入り、カチッとしたブロックを積んでいくような表示になります。 こんなかんじ。

p要素です

p要素です

p要素です

特徴はこんなかんじ。

  • 縦に積まれていく
  • 幅 width と高さ height が指定できる
  • 上下左右に margin を指定できる
  • 上下左右に padding を指定できる
  • text-align は要素の中身に適応される。
  • vertical-align は指定できない。
インライン要素

ブロックレベル要素の中身として使われる要素です。a、span、strong など。 テキストの一部として扱われるので、要素の前後には改行は入らず、テキスト状に横に横にずーっと流れていくような表示になります。 こんなかんじ。

p要素ですpの中にいるa要素ですpの中にいるspan要素ですpの中にいるstrong要素です

特徴はこんなかんじ。

  • 横に並んでいく
  • 幅 width と高さ height は指定できない。幅や高さは文字列の長さや文字の大きさなど、内容物のサイズ。
  • 左右だけ margin を指定できる
  • 左右に padding を指定できる。（実は上下も指定できるけど、前後の行や要素にかぶってしまうので、あまり効果はわからない）
  • text-align を親ブロックに付けることで指定できる。
  • vertical-align を指定できる。
ブロックレベル要素を display: inline してみよう

代表的な使い方は、フッターナビゲーションのように、リストを横並びにして、かつ画面中央揃えにしたい場合。 例えばこんなかんじのリスト。

<ul> <li><a href="#">HOME</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">個人情報保護方針についてのお問合せ</a></li> </ul>

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

ul {text-align: center;} <!-- 中身をセンター揃えにして --> li {display: inline;} <!-- インラインで表示して -->

するとこんなかんじに。

  • HOME
  • 会社概要
  • 個人情報保護方針についてのお問合せ
インライン要素を display: block してみよう

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

  • HOME
  • 会社概要
  • 個人情報保護方針についてのお問合せ

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

a {display: block;} <!-- ブロックで表示して -->

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

  • HOME
  • 会社概要
  • 個人情報保護方針についてのお問合せ

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

display: inline-block の良いトコロ

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

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

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

<ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul>

こんなかんじで指定してみましょう。

ul {text-align: center;} <!-- ul の中身を中央揃えにして --> li {display: inline-block;} <!-- li をインラインブロックで表示して --> a {display: block; <!-- a をブロックで表示して --> width: 40px;} <!-- a に幅を指定 -->
  • 1
  • 2
  • 3
  • 4
  • 5

  せっかくなので、vertical-align も使ってみましょう。「3」だけ大きく表示して、かつ垂直方向下揃えにしてみましょう。

<ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li class="current"><a href="#">3</a></li> <!--「3」だけサイズを変えるために class を付けました --> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> ul {text-align: center;} <!-- ul の中身を中央揃えにして --> li {display: inline-block; <!-- li をインラインブロックで表示して --> vertical-align: bottom;} <!-- li を垂直方向下揃えにして --> li.current {line-height: 4em;} <!-- class を付けた li だけ高さを大きくして --> a {display: block; <!-- a をブロックで表示して --> width: 40px;} <!-- a に幅を指定 -->
  • 1
  • 2
  • 3
  • 4
  • 5

  応用として、こんなこともできます。高さが違うブロックレベル要素を、divで括らずに揃える。float も使ってません。

メロスは激怒した。

必ず、かの邪智暴虐の王を除かなければならぬと決意した。

メロスには政治がわからぬ。

メロスは、村の牧人である。

笛を吹き、羊と遊んで暮して来た。

けれども邪悪に対しては、人一倍に敏感であった。

きょう未明メロスは村を出発し、野を越え山越え、十里はなれた此このシラクスの市にやって来た。

メロスには父も、母も無い。

女房も無い。

十六の、内気な妹と二人暮しだ。

この妹は、村の或る律気な一牧人を、近々、花婿として迎える事になっていた。

結婚式も間近かなのである。

メロスは、それゆえ、花嫁の衣裳やら祝宴の御馳走やらを買いに、はるばる市にやって来たのだ。

先ず、その品々を買い集め、それから都の大路をぶらぶら歩いた。

メロスには竹馬の友があった。

セリヌンティウスである。

青空文庫『走れメロス』太宰治

display: inline-block の困ったトコロ

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

li{ display: inline-block; *display: inline; <!-- IE用のハックです --> zoom: 1; <!-- IE用の hasLayout を true にするための記述です --> }

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

📎📎📎📎📎📎📎📎📎📎