display ― 並び方を変える

導入

要素には「縦に積まれる（ブロック）」ものと「横に並ぶ（インライン）」ものがあります。この性質は display プロパティで変えられます。

説明

• display: block … 縦に積む（<div> や <p> の既定）
• display: inline … 横に流す（<span> や <a> の既定）
• display: none … 表示しない（消える）

<span class="tag">A</span>
<span class="tag">B</span>

<style>
  .tag {
    display: block;
    background: #eee;
  }
</style>

本来は横に並ぶ <span> も、display: block にすると縦に積まれます。逆に <div> を display: inline にすれば横に流せます。

やってみよう

上の例を打ち込み、2つのタグが縦に並ぶことを確かめましょう。display: block を inline に変えると横並びに戻ります。

演習

class="hidden" の要素を非表示にする CSS を書いてください。