CSS display:inline-blockを活用する方法と注意点

Robert’s talk

Webページの制作で水平リストが必要な場合にはフローレイアウトを使って要素を配置していくということがある。しかし、水平フローにさらに可変の高さを持った要素が入っていたり、それを垂直方向に複数行展開するということになると、なかなか面倒なことになってくる。ブラウザの幅に対応したり、ブラウザごとにデザインを揃えるということになると、頭を抱えることになる。

Robert Nyman氏がそうした場合の代替方法のひとつにdisplay: inline-blockを使う方法があるとし、CSS display: inline-block: why it rocks, and why it sucks - Robert's talkにおいて簡潔な説明とサンプルコードおよびその欠点を紹介している。display: inline-blockは要素をブロックとして作成しつつ、インラインボックスのように振る舞わせるための指定。コメントにRobert Nyman氏が挙げたdisplay: inline-blockを使う場合の欠点を解消する設定が寄せられるなど、興味深い内容になっている。


CSS display: inline-blockを使ってul liを水平方向へ展開 - IE8	vertical-align: top;を指定して要素の上部で揃える - IE8


IE7でデモ2を閲覧するとこのように崩れる	IE7対策設定を追加した場合のレンダリング例

display: inline-blockはこのように便利に使える設定だが、作成されたブロックがインラインとして振る舞いというところに注意する必要がある。インラインとして振る舞うため、ホワイトスペースがレンダリング結果に影響する。ホワイトスペースがピクセルとして現れないようにするには<li>Item one</li><li>Item two</li><li>Item three</li>のようにホワイトスペースを入れずに1行で記述する必要がある。


ホワイトスペースが影響してレンダリングが想定外になった例 - IE8	対策を実施してレンダリングした場合 - IE8

display: inline-blockを使った場合のこの問題について、CSS display: inline-block: why it rocks, and why it sucks - Robert's talkのコメントには3つの解決方法が寄せられている。まずはコメントを挿入してホワイトスペースを削除するというテクニック。もっとも影響が少ないが、記述が煩雑になる。

<ul id="display-inline-block-example"><!--
--><li>Item one</li><!--
--><li>Item two</li><!--
--><li>Item three</li><!--
--></ul>

次にCSSで空白スペース分をずらすというアプローチ。ただしフォントやブラウザなどの環境によって値を調整する必要がある。

ul {
  letter-spacing:-.40em
}
li {
  letter-spacing:normal;
}

先ほどと同じ発想だが、指定する内容を変えたもの。スペースサイズ調整が不要になるかわりに、表示されるフォントが変わってしまうという面もある。

ul {
  font-size: 0;
}
li {
  font-size: 13px;
}

display: inline-blockがどのブラウザのどのバージョンで動作するかといった情報はSitePointのCSSリファレンスdisplayによくまとまっている。同ページにはdisplay、position、floatが指定された場合の関係がどうなるかの説明や、IE7で表示が想定どおりにならない問題なども説明されている。以下にCSS display: inline-block: why it rocks, and why it sucks - Robert's talkに掲載されているコードを簡単に試せるようにそれぞれまとめたものを掲載しておく。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>display: inline-blockデモ1</title>
<style type="text/css">
ul#display-inline-block-example,
ul#display-inline-block-example li {
  /* Setting a common base */
  margin: 0;
  padding: 0;
}
ul#display-inline-block-example li {
  display: inline-block;
  width: 100px;
  min-height: 100px;
  background: #ccc;
}
</style>
</head>
<body>
<ul id="display-inline-block-example">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>display: inline-blockデモ2</title>
<style type="text/css">
ul#display-inline-block-example,
ul#display-inline-block-example li {
  /* Setting a common base */
  margin: 0;
  padding: 0;
}
ul#display-inline-block-example li {
  display: inline-block;
  width: 100px;
  min-height: 100px;
  background: #ccc;
  vertical-align: top;
}
</style>
</head>
<body>
<ul id="display-inline-block-example">
  <li>Item one</li>
  <li>Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two</li>
  <li>Item three</li>
</ul>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>display: inline-blockデモ3</title>
<style type="text/css">
ul#display-inline-block-example,
ul#display-inline-block-example li {
  /* Setting a common base */
  margin: 0;
  padding: 0;
}
ul#display-inline-block-example li {
  display: inline-block;
  width: 100px;
  min-height: 100px;
  background: #ccc;
  vertical-align: top;
  /* For IE 7 */
  zoom: 1;
  *display: inline;
}
</style>
</head>
<body>
<ul id="display-inline-block-example">
  <li>Item one</li>
  <li>Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two Item two</li>
  <li>Item three</li>
</ul>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>display: inline-blockデモ4</title>
<style type="text/css">
ul#display-inline-block-example,
ul#display-inline-block-example li {
  /* Setting a common base */
  margin: 0;
  padding: 0;
}
ul#display-inline-block-example {
  width: 300px;
  border: 1px solid #000;
}
ul#display-inline-block-example li {
  display: inline-block;
  width: 100px;
  min-height: 100px;
  background: #ccc;
  vertical-align: top;
  /* For IE 7 */
  zoom: 1;
  *display: inline;
}
</style>
</head>
<body>
<ul id="display-inline-block-example">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>
</body>
</html>