widthで幅を指定しないと(a)のようになってしまうから、(b)のように文字数によって要素の幅が可変するものを作りたい
実際HTML/CSSを書いてみる
<h1>header title</h1>
- まずwidthにemで指定
h1 { background-color: gray; width: 12em; }
背景はみ出まくり。。。
前記事【1emの・・・幅? - Lv.1ノンプログラマの誰得メモ】の通り、文字数と幅指定はあまり関係ないみたい
- 次にwidthにautoで指定
h1 { background-color: gray; width: auto; }
widthをautoにしても意味が無いみたい?
そこで使うのが、displayプロパティ
h1 { background-color: gray; display:inline; }
じゃーん!!
displayプロパティの値をinlineにすることで、本来ブロック要素である<h1>をインライン要素として動作させます。することで、どんな文字数になってもご覧の通り!!
ただし、h1はインライン要素になってるので、前後にインライン要素をつけて
<h1>title</h1> <a href="index">これはリンクです</a>
としてしまうと
このようになってしまいます
なので、divのようなブロック要素で囲むことによって
<div><h1>title</h1></div> <a href="index">これはリンクです</a>