JP

CSS・大きさとボックス

ブロックとインライン

縦に積まれる部品と、文中に流れる部品。この"性格"の違いがdisplay。ここがわかると、レイアウトの霧が晴れる。

「width を指定したのに、なぜか効かない部品がある」——CSSを触っていると、そんな不思議に出会います。じつはHTMLの部品には2つの性格があり、それによってふるまいが変わるのです。その性格をあらわすのが display です。

ブロック：縦に積み重なる

<div> <p> <h1> などはブロックという性格。横幅いっぱいに広がり、上から下へ縦に積まれます。width や height も、素直に効きます。段落が1つずつ改行されて並ぶのは、この性格のおかげです。

インライン：文中に流れる

いっぽう <a> <span> <strong> などはインライン。文章の中を左から右へ流れ、横に並びます。文の途中でリンクだけ色が変わっても改行されないのは、この性格だからです。ただしインラインには、width や height が効きません。

なぜ効かないのでしょう？インラインは文字と同じ仲間として扱われるからです。「あ」という1文字の幅を300pxに広げられないのと同じで、インラインの大きさは中身が決めます。

どっちの性格か見分けるコツ

タグの役割を思い出すと、だいたい見分けられます。「箱」を作るタグはブロック、「文の一部を飾る」タグはインラインです。

性格代表的なタグイメージ
ブロック<div> <p> <h1> <ul> <li> <section>ページを区切る「箱」
インライン<a> <span> <strong> <em>文の途中に置ける「飾り」

新しいタグに出会って迷ったら、「これは箱？それとも文の飾り？」と考えてみましょう。

displayで性格を変える

この性格は display で切り替えられます。

span {
  display: block;
}

インラインの <span> をブロックに変えると、縦に積まれ、width も効くようになります。逆に display: none; にすると、その部品はまるごと消えて見えなくなります（あとでJavaScriptで出したり消したりするときに活躍します）。

3つの性格の違いは、同じ width: 200px; を指定してみると一目でわかります。

3つとも width: 200px と書いてあるのに、効くのは block と inline-block だけ。inline は文字と同じ仲間なので、幅の指定はまるごと無視され、中身の大きさのまま文中を流れます。

display には、flex にも「インラインでもある版」の inline-flex があります。ふつうのflexはブロックとして縦に積まれますが、inline-flexは文中に並びながら、中身は横一列に並べられる——アイコンと文字をセットにしたリンク部品などで重宝します。

「消す」にも2種類ある

display: none;と似た道具にvisibility: hidden;があります。ちがいは場所が残るかどうか。

.a { display: none; }       /* 場所ごと消える */
.b { visibility: hidden; }  /* 見えなくなるが、場所は残る */
上はBが消えてAとCがくっつき、下はBの場所が空いたままAとCが離れています。同じ「見えなくする」でも、場所が残るかどうかがちがいます。

display: none;は、その部品が最初から無かったかのようにあとの部品が詰めて並びます。visibility: hidden;は姿だけ消えて、そこにぽっかり空白が残ります。「消してもまわりのレイアウトを崩したくない」ならhidden、「完全にしまいたい」ならnone、と使い分けます。

このレッスンのまとめ

  1. 部品にはブロック（縦に積む）とインライン（文中に流れる）の性格がある
  2. インラインには width / height が効かない
  3. display で性格を変えられる（block / inline-block / none）
  4. inline-flex は「文中に並びつつ、中は横一列」といういいとこ取り

やってみよう：SNSリンクをボタンっぽく

れんらくのSNSリンクにclass="social"をつけて、アイコンと文字がセットになったボタンっぽい見た目にしましょう。

<a class="social" href="https://www.youtube.com/">▶ YouTube</a>
<a class="social" href="mailto:[email protected]">✉ メール</a>
.social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  font-weight: bold;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid #e9e3d9;
  background-color: #ffffff;
}

inline-flexにしたことで、YouTubeとメールの2つのリンクが横に並びながら、それぞれの中でアイコンと文字も横一列にそろいます。あわせてtext-decoration: none;とcolor: inherit;で、リンクらしい下線と青色も消しました。

ブラウザ表示。「れんらく」の下にYouTubeとメールのリンクが、白い背景の丸みのあるボタンのように横に並んでいる
下線も青色も消えて、ただのリンク文字だったものが、押せそうなボタンの見た目に変わりました。

よくある質問

widthを指定したのに効かないのはなぜ？
その部品がインライン要素だからです。aやspanなどのインラインには、widthやheightが効きません。display:blockかdisplay:inline-blockに変えると効くようになります。
display:noneとvisibility:hiddenはどう違うの？
display:noneは場所ごと消えて、あとの部品が詰まります。visibility:hiddenは見えなくなるだけで、場所は空いたまま残ります。
inline-blockはいつ使うの？
横に並んだまま、大きさや余白も指定したいときです。文中に置く小さなボタンやラベルのような部品に向いています。