はじめに
本書は、CSS初学者が混乱しやすいCSSの「display」プロパティについて、クイズ形式で楽しく覚えられる本です。
「paddingがつかない！」「高さがおかしい！」「背景が出ない！」
そのトラブル、もしかしてdisplayプロパティのせいかも。
でも、どうやったらdisplayプロパティの問題だって気づけるでしょう。
習うより慣れよ！
ということで、本書でdisplayの特徴をつかんでみませんか？
こんな人のために書きました
- なんとなくCSSを書いているが、ときどきなぜかCSSが効かなくて困る
- displayのinlineとinline-blockの違いが分からない
- とりあえずdisplay:block;を書いている
こんなことは出てきません
- display:grid;やdisplay:contents;などの詳細な説明
- displayの値をふたつ設定して使う使い方の説明
CSSを制するには、displayを制せよ！
1
これだけは
覚えておきたい
display 4つ
クイズの前に、displayプロパティの基本の4つの値「 inline」「block」「inline-block」「none」について確認しておきましょう。
そのまえに、用語説明
displayプロパティについて語る前に、本書によく出る言葉を確認しておきましょう。
「プロパティ」と「値」はCSSの下記の部分を指します。
「要素」は下記のような、HTMLタグで囲まれたかたまりを指します。
また、要素の外側にある要素のことを「親要素」と呼びます。
display:inline;
aタグやspanタグなどのデフォルト値です。
- 要素は横に並ぶ
- 要素の大きさは、中身の文字の大きさになる
- heightやwidthが効かない
- marginは左右だけつく
- paddingは左右は普通につく。上下はほかの要素に食い込む
- paddingは左右は普通につく。上下はほかの要素に食い込む
- 親要素のtext-alignの影響を受ける
- vertical-alignの影響を受ける
display:block;
pタグやdivタグ、h1タグなどのデフォルト値です。
- 要素は縦に並ぶ(要素の前後に自動的に改行が入る)
- heightやwidthが効く
- marginやpaddingは上下左右につく。食い込まない
- text-alignを指定すると、中身の文字/inline/inline-block要素が影響を受ける
- vertical-alignをつけても何も起きない
display:inline-block;
inlineとblockのふたつの特徴をあわせ持つ値です。
- 要素は横に並ぶ
- heightやwidthが効く
- marginやpaddingは上下左右につく。食い込まない
- 親要素のtext-alignの影響を受ける
- text-alignを指定すると、中身の文字/inline/inline-block要素が影響を受ける
- vertical-alignの影響を受ける
display:none;
この値にすると、要素が消えます。
見えなくなるというよりは、要素がなくなるイメージです。
ドロップダウンメニューの実装などでよく使います。
※見えなくなるCSSには visibility:hidden; があります。
2
クイズで覚える!
display:○○;
説明だけでは分かりにくいですよね。
心配しないでください。ここからはクイズでdisplayの特徴になれていきましょう!
クイズに出てくる図の見方
1 これはdisplayなに?
要素 {
padding: 25px 0;
margin-bottom: 20px;
text-align: center;
}
ココに注目!
- width指定しないとき、要素の横幅は親要素いっぱいに広がる
- 要素の前後で行が変わる
- 縦のpaddingとmarginが使える
- text-align:center;を指定すると、要素の中の文字が中央寄せになる