HTML/CSS：表示形式（display）

実際の幅が200px、高さが50px

display: block; を指定しないと width と height が効かない。

<style>
  span {
    display: block;
    width: 200px;
    height: 50px;
    background-color: #ddd;
  }
</style>

<span>ブロック化した span</span>

display を変えるだけで幅と高さが効くようになる。span そのものの性質を変えている。

解答 == B

inline 要素は幅を指定できるか。

B

inline 要素には width が効かない。中身の文字の分だけの幅になる——「指定したのに変わらない」原因の代表例。

display が inline-block、幅が150px

box-sizing も指定すると幅の計算が楽になる。

<style>
  .btn {
    display: inline-block;
    box-sizing: border-box;
    width: 150px;
    padding: 12px;
    background-color: #0066cc;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
  }
</style>

<a href="#" class="btn">送信する</a>

リンクをボタンに見せる定番の手法。inline のままでは幅も上下の padding も効かないので、inline-block にする必要がある。

<style>
  .hidden {
    display: ____;
  }
</style>

<div class="hidden">隠れる</div>
<div>見える</div>

要素の高さが0

「何もない」を意味する4文字の値。

none

display: none は場所も取らずに消える。周りの要素が詰めて表示されるので、レイアウトが変わる点に注意。

解答 == B

レイアウトへの影響が違う。

B

none は詰めて表示され、hidden は空白として残る。「一時的に見せたくないが位置は保ちたい」なら hidden を使う。

li が inline-block、3個

li { display: inline-block; margin-right: 20px; } と書く。

<style>
  li {
    display: inline-block;
    margin-right: 20px;
  }
</style>

<ul>
  <li>ホーム</li>
  <li>サービス</li>
  <li>お問い合わせ</li>
</ul>

これがナビゲーションメニューの古典的な作り方。現在はFlexbox（HT13）を使うことが多いが、仕組みを知っておく価値はある。

<style>
  .btn {
    display: ____;
    width: 120px;
  }
</style>

<a href="#" class="btn">ボタン</a>

実際の幅が120px

inline と block の両方の性質を持つ値（ハイフン含む12文字）。

inline-block

inline-block は「横に並ぶブロック」。ボタンやカードを横に並べるときの基本になる。

解答 == B

inline 要素には上下のマージンが効かない。

B

inline は左右の margin しか効かない。上下に余白が欲しいなら inline-block か block に変える必要がある。

visibilityがhidden、高さは残る

display: none との違いを確認する。

<style>
  div {
    height: 50px;
    background-color: #ddd;
  }

  .invisible {
    visibility: hidden;
  }
</style>

<div class="invisible">見えない</div>
<div>見える</div>

場所が残るので、下の div は最初から50px下に表示される。display: none なら詰めて上に来る。

3つのdivが横並び、幅100px

div は既定で block なので、inline-block に変える。

<style>
  .box {
    display: inline-block;
    width: 100px;
    height: 80px;
    background-color: #0066cc;
  }
</style>

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

block を inline-block に変えると横に並ぶ。ただし要素間にわずかな隙間ができる（HTMLの改行が空白として扱われるため）。

liが横並び、aがinline-block

li と a の両方に display を指定する。

<style>
  nav ul {
    list-style: none;
    padding: 0;
  }

  nav li {
    display: inline-block;
  }

  nav a {
    display: inline-block;
    padding: 12px 20px;
    text-decoration: none;
    color: #0066cc;
  }
</style>

<nav>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

a にも inline-block を指定するのが要点。これで padding が上下にも効き、クリックできる範囲が広がって押しやすくなる。

blockのみ200px、inlineは文字幅

2つの span に別々のクラスを付ける。

<style>
  span {
    width: 200px;
    background-color: #ddd;
  }

  .block {
    display: block;
  }
</style>

<span class="block">block（200px）</span>
<span>inline（文字の幅）</span>

同じ width を指定しても結果が違う。inline のほうは中身の文字の幅のままで、指定が完全に無視されている。

3つのカードが幅180pxで横並び

box-sizing: border-box を忘れると幅が広がる。vertical-align: top で上端を揃える。

<style>
  .card {
    display: inline-block;
    box-sizing: border-box;
    width: 180px;
    padding: 16px;
    border: 1px solid #ddd;
    vertical-align: top;
  }
</style>

<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>

vertical-align: top を付けると上端が揃う。inline-block は既定でベースライン揃えになるため、高さが違うと下がずれて見える。

noneは高さ0、hiddenは40px

高さを測ると、場所を取っているかどうかが分かる。

<style>
  div {
    height: 40px;
    background-color: #ddd;
    margin-bottom: 8px;
  }

  .none {
    display: none;
  }

  .hidden {
    visibility: hidden;
  }
</style>

<div>1つ目（見える）</div>
<div class="none">2つ目（消える）</div>
<div class="hidden">3つ目（場所は残る）</div>

none は高さ0、hidden は40pxのまま。スマホでメニューを隠すときは none、一時的に内容を伏せるだけなら hidden——用途で選ぶ。

3つのspanがinline-block

span を inline-block にすれば上下の padding も効く。

<style>
  .tag {
    display: inline-block;
    padding: 4px 12px;
    background-color: #0066cc;
    color: #ffffff;
    border-radius: 12px;
    margin-right: 8px;
    font-size: 0.875rem;
  }
</style>

<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">JavaScript</span>

inline のままだと上下の padding が背景に反映されず、他の行と重なる。inline-block にすることで、きれいなラベルになる。

すべてのdisplayと寸法が正しい

li と a の両方に inline-block を指定する。card には vertical-align: top を付けて上端を揃える。sp-only は display: none なので高さが0になる。

<style>
  * {
    box-sizing: border-box;
  }

  nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  nav li {
    display: inline-block;
  }

  nav a {
    display: inline-block;
    padding: 12px 20px;
    text-decoration: none;
    color: #0066cc;
  }

  .card {
    display: inline-block;
    width: 200px;
    padding: 16px;
    border: 1px solid #ddd;
    vertical-align: top;
  }

  .tag {
    display: inline-block;
    padding: 4px 10px;
    background-color: #0066cc;
    color: #ffffff;
    border-radius: 10px;
  }

  .sp-only {
    display: none;
  }
</style>

<nav>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

<div class="card">
  <h3>ノートPC</h3>
  <span class="tag">人気</span>
</div>

<div class="card">
  <h3>マウス</h3>
  <span class="tag">新着</span>
</div>

<p class="sp-only">スマホ専用の案内</p>

このページには inline-block が5箇所も登場する。メニューの li、リンクの a、カード、タグ——「横に並べたい、でも幅や余白も指定したい」という要求はそれだけ多いということだ。

とくに nav a に inline-block を指定した点が実務的に重要になる。a は既定で inline なので、そのままでは上下の padding が効かない。指定しなければクリックできる範囲が文字の高さだけになり、スマホで押しづらいメニューになってしまう。

vertical-align: top も見逃せない。inline-block は既定で文字のベースラインで揃うため、カードの中身の量が違うと下端がガタつく。top を指定すれば上端で揃い、見た目が安定する。

.sp-only { display: none; } は、HT15のレスポンシブ対応への布石だ。画面幅に応じて none と block を切り替えれば、PCとスマホで表示内容を出し分けられる。

ただし、inline-block での横並びには弱点もある。要素間に謎の隙間ができる、縦方向の中央揃えが難しい、等間隔に配置しにくい——次章の Flexbox は、これらをすべて解決する。