Lv1プログラマの誰得メモ

総務女子の開発とか趣味とか自学に関係することのメモ

文字数と背景の長さをそろえる

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>


これでオッケー!