ブロックレベル要素とインラインレベル要素
ブロックレベル要素の特徴
- テキストP.076〜P.077
- 要素が縦に並ぶ（その前後で改行表示されます）
- 幅と高さを指定できる（デフォルト状態で親要素と同じ幅を持っています）
- 余白を自由に調整できる
- 要素の配置を指定できない
- 親要素より小さい幅を指定しても前後で改行され、横並びに配置できません
- 幅指定がない場合は、ブラウザー幅で表示されます
- 見出し（h1〜h6要素）、段落（p要素）、表（table要素）、リスト（ul、ol、dl要素）などが該当します
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ブロックレベル要素</title> <style> h1 { background-color: #BAD6EF; } p { background-color: #EDF5AC; } </style> </head> <body> <h1>見出し</h1> <p>段落</p> </body> </html>
インラインレベル要素の特徴
- 主にブロックレベル要素の中で使用される要素
- 横に要素が並ぶ（前後で改行されません）
- 幅と高さは指定できない
- 上下の余白が調整できない（上下のpaddingは指定できるが非推奨）
- 要素の配置を指定できる
- リンク（a要素）、画像（img要素）、汎用要素：特別な意味を持たない（span要素）など
インラインブロック要素の特徴
- ブロックレベル要素とインライン要素の中間の要素
- 横に要素が並ぶ
- 幅と高さが指定できる
- 余白を自由に調整できる
- 要素の配置を指定できる
block、inline、inline-blockの違い
| block | inline | inline-block | |
|---|---|---|---|
| 並び方 | 縦並び | 横並び | 横並び |
| 幅・高さの指定 | ○ | ✕ | ○ |
| 余白の指定 | ○ | 左右ののみ○ paddingは上下も可 | ○ |
| 配置の指定 | ✕ | ○ (親要素に指定) | ○ (親要素に指定) |
displayプロパティ
- ブロックレベル要素をインラインレベル要素のように扱う
- インラインレベル要素をブロックレベル要素のように扱う
ブロックレベル要素をインラインレベル要素のように扱う
- リストを横に並べる
li { display: inline; }
インラインレベル要素をブロックレベル要素のように扱う
- a要素をブロックレベル要素として表示し、クリック可能な領域を広げる
a { padding: 10px; display: block; }
便利な値（display: inline-block;）
- インラインレベル要素のように前後で改行せずに配置しつつ、ブロックレベル要素のように高さと上下マージン・上下パディングを指定できます
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>display:inline-block</title> <style> ul { width: 300px; padding: 0; background-color: #D2F4FE; } li { display: inline-block; width: 100px; height: 50px; /* 高さ 50px */ margin-bottom: 10px; /* 下マージン 10px */ background-color: #DFB9E5; } </style> </head> <body> <ul> <li>リスト項目1</li> <li>リスト項目2</li> <li>リスト項目3</li> </ul> </body> </html>
- インラインレベル要素と同様に、ソースコード上の改行やインデントは空白１文字分に置き換わります
<body> <ul> <li>リスト項目1</li><li>リスト項目2</li><li>リスト項目3</li> </ul> </body>
- 改行をとると、空きがなくなりすべて横並びになります
リセット
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>リセットCSSを記述する前に</title> <style> h1,p,ul { color: #FFF; } h1 { background-color: #95CCE2; } p { background-color: #EFB15F; } li { background-color: #98DC77; } </style> </head> <body> <h1>ページのテーマ</h1> <p>ここに本文が入る</p> <ul> <li>箇条書き</li> <li>箇条書き</li> <li>箇条書き</li> </ul> </body> </html>
- 各要素間が、指定していないにもかかわらず空いているのがわかります
- リストも２文字分インデントされています
これは、ブラウザが初期値としてもっている空きの値を利用してプレビューしているからです
ブラウザ固有のCSSの値をリセット
《空きをなくす記述》
h1, p, ul, li { color: #FFF; margin: 0; padding: 0; }
この状態から、自分の空けたい値を指定することにより、思い通りのレイアウトにするということが「リセットCSS」の目的です。
《ブラウザとの空きもなくす記述》
html, body, h1, p, ul, li { color: #FFF; margin: 0; padding: 0; }
これからページを構築していく段階で、「初期値：0」であることにより、指定した値が反映されていることが確認しやすくなります。
この設定の意味を拡張（値を初期値に設定し直す）した設定を「リセットCSS」と呼びます。
