🐱

【CSS】なぜ position: absolute をつけると width が効くようになるの？

に公開
CSS
tech

「疑似要素にサイズを指定したのに反映されない…」 コーディング初学者なら一度は経験する悩みですよね。通常、::after などの疑似要素はデフォルトが display: inline; なので、 width や height を指定しても無視されてしまいます。

ところが、 position: absolute; を１行書き加えるだけで、なぜかサイズが効くようになります。 「あれ？ display: block; は書かなくていいの？」と思ったあなた。実はこれ、ブラウザが裏側でやってくれている 「自動変換」 のおかげなんです。

1. 「計算値（Computed Value）」の書き換え

CSSの仕様では、ある特定のプロパティを指定すると、別のプロパティの値が強制的に書き換えられるというルールがある。

position: absolute; または position: fixed; を指定すると、ブラウザはその要素を「絶対位置指定要素」として扱います。
このとき、要素の display プロパティは、自動的に以下の表のように変換されます。

指定した display の値 実際の計算値（ブラウザの解釈）
inline（デフォルト） block
inline-block block
inline-flex flex
inline-grid grid

つまり、私たちが何も書いていなくても、ブラウザが勝手に「これは浮いている（ absolute ）要素だから、サイズを持てる性質（ block ）に変えておかなきゃ！」と気を利かせてくれているのです。

2. デベロッパーツールで証拠を掴む

本当に書き換えられているのか、Google Chrome のデベロッパーツールで確認してみます。

  1. 該当の要素（ ::after ）を選択する。


    ここでは、 display は設定していません。
  2. 「計算済み（Computed）」 タブを開き、 display の項目をチェックする

スタイル（Styles）パネルには書いていなくても、計算済みタブではしっかり block になっていました。

まとめ

  • 疑似要素の初期値は inline ：そのままではサイズ指定が効かない。
  • position: absolute; を書くとブラウザが display を自動的に変換してくれる。
  • 結論： position: absolute; を使うときは、 display: block; をわざわざ書く必要はない！

Discussion