HTMLのブロック要素とインライン要素について
1. 参考
2. 言葉の整理
2-1. コンテンツ
HTMLタグの間にあるものを指す。
例1
<div>おはよう</div>
- divタグにとって
おはようの一文字一文字がコンテンツ
例2
<span>こんにちは</span>
- spanタグにとって
こんにちはの一文字一文字がコンテンツ
例3
<div> <span>こんばんは</span> </div>
- divタグにとって
<span>こんばんは</span>の一文字一文字がコンテンツ - spanタグにとって
こんばんはの一文字一文字がコンテンツ
2-2. ブロック要素
下記のようにdisplayプロパティの値がblockのものを指す。
親要素の 横幅 か 高さ に伸びる性質を持つ。
横幅 か 高さ かを決めるのは、後述のwriting-modeに指定する値による。
display: block;
2-3. インライン要素
下記のようにdisplayプロパティの値がinlineのものを指す。
コンテンツの長さまで伸びる性質を持つ。
display: inline;
2-4. フロー方向
2個目以降の「ブロック要素」が配置される方向を指す。
2-5. 書字方向
2個目以降の「コンテンツ」が配置される方向を指す。
3. CSSプロパティのwriting-mode
writing-modeは、フロー方向と書字方向を決めるcssのプロパティである。
横書きであり左から右へ流れる言語（ltr: Left To Right）である場合、下記のような意味を持つ。
| writing-modeの値 | ブロック要素の伸びる方向 | 書字方向 | フロー方向 |
|---|---|---|---|
| horizontal-tb | 水平（親要素の横幅） | 左から右 | 上から下|水平 |
| vertical-rl | 垂直（親要素の縦幅） | 上から下 | 右から左|垂直 |
| vertical-lr | 垂直（親要素の縦幅） | 上から下 | 左から右|垂直 |
3-1. horizontal-tbの例
特に何も指定しない場合、ほとんどのブラウザはデフォルトでこの値を設定しているっぽい。
<div class="作文用紙" style="writing-mode: horizontal-tb"> <p>これは一行目です。</p> <p>これは二行目です。</p> <div>
↓Hatena Blog は HTML で書けます。実際に上記のHTMLをそのまま書いたものが下記です。
これは一行目です。
これは二行目です。
3-2. vertical-rlの例
日本語（ltr: Left To Right）で作文用紙のように書きたい場合、作文用紙の行をブロック要素、作文用紙の一つをコンテンツとみなすと、フロー方向は右から左、書字方向は上から下なので vertical-rl が適切となり、下記のように書ける。
<div class="作文用紙" style="writing-mode: vertical-rl"> <p>これは一行目です。</p> <p>これは二行目です。</p> <div>
↓実際に上記のHTMLをそのまま書いたものが下記です。
これは一行目です。
これは二行目です。
3-3. vertical-lrの例
日本語（ltr: Left To Right）でこの形式で書くときが思いついていないが、一応下記のように書ける。
<div class="作文用紙" style="writing-mode: vertical-lr"> <p>これは一行目です。</p> <p>これは二行目です。</p> <div>
↓実際に上記のHTMLをそのまま書いたものが下記です。
これは一行目です。
これは二行目です。
