divとspan

まとまりをつくる 2 つのタグ

ここまでのタグは、見出し・段落・リストのように意味が決まっていました。div と span は意味を持ちません。ここからここまでが 1 つのまとまりだと囲むためだけのタグです。あとで CSS を当てるときの取っ手になります。

ブロックとインライン

2 つの違いは、囲んだ中身の並び方です。

• div はブロック要素です。前後で改行され、横はばいっぱいに広がります。写真と文章のように複数の部品をまとめるのに向いています
• span はインライン要素です。改行されず、文章の途中に入り込みます。1 行の中の一部分だけを囲むのに向いています

段落の中に div を入れるとそこで改行が起きて、見た目が崩れます。文章の中を囲みたいときは span を使います。

今回書くこと

自己紹介の画像と段落を div で囲みます。これで写真と文章がひとかたまりになり、あとで横にならべて配置できます。さらに段落の中の名前を span で囲みます。

書いても見た目は変わりません。それでいいです。いまは構造だけを整えています。

1. 自己紹介の img と p を div で囲む
2. 自己紹介の段落の中の名前を span で囲む
3. div の中身は半角スペース 2 つ分だけ字下げする