HTMLのdivタグとspanタグの違い、以前受講生に質問されて苦い思いをしました
この機会にマスターします！
1. 何度でも復習！そもそもタグってなに？
HTMLは、とにかくタグでテキストを挟むのが大好き！変態や...！開始タグと終了タグで挟まれたテキストは、そのタグの命令を聞かなければいけない
つまり、挟まれるタグの種類によって、なんの変哲もないテキストの役割は変わるのです。
書き方： <タグ名>テキスト</タグ名>
2. でも注意！divもspanも意味を持たないタグ！？
先ほど述べたように、タグは種類によって役割が違います。
例えば・・・
・pタグなら段落を表す
・h1タグなら見出しを表す
だけどdivタグとspanタグときたら、
彼らはタグ自体に意味を持たない、つまり何も表さないタグらしいんです！
3. じゃあ一体どんな役割があるのかな？
divタグ編
結論、divタグは囲った部分を、ブロック要素としてまとめて扱うことができるのです
どうゆうことかというと・・・
<h1>渡邉貴恵とは</h1><p>私は福島県出身の24歳です</p><p>皆さんよろしくお願いします！</p>
というコードを、<h1>タグと<P>タグごとに一つのブロック＝まとまりとして認識して色分けを行いたい時・・・
<div class="one"><h1>渡邉貴恵とは</h1></div>
<div class="two"><p>私は福島県出身の24歳です</p><p>皆さんよろしくお願いします！</p></div>
こんな風に、divタグを使ってまとめることで、各々に違うcssを当てることができるようになるのです！
またdivタグでまとめた部分はmarginやpaddingなどのレイアウトや、width、heightなどのサイズも自由に決めることができるみたい！
確かに思い返せばそうだったなメモメモ...
spanタグ編
divタグではブロック要素ごとに認識され、レイアウトやサイズなどの装飾を加えることができたけど・・・
spanタグでは行の一部ごとのまとまり、つまりインライン要素として認識され、その各々にcssを当てることができるのです
詳しく見て行きましょう
例えば・・・
< 私の名前は"渡邉貴恵"でございます >
この"渡邉貴恵"の部分だけを赤く装飾したいよー！って時に、
<p>私の名前は
<span class="aka">渡邉貴恵</span>
でございます</p>
こんな風に装飾したい行の一部分だけをspanタグで囲めば、
なんと！！！.aka{color:red}
ほら、これでようやく愛しのcssを当てて赤く装飾することができるでしょ
つまり<span class="クラス名"> テキスト </span>で挟んだテキストだけをピックアップして、文字の色や太さを変えたい時に使えるよ！
まとめ
・divタグは、テキストを挟むことで大きなまとまりとしてブロック化(＝ブロック要素)し認識させることで、レイアウトやサイズを指定をすることができる。
・spanタグは、テキストの行の一部分を挟むことで小さな行のまとまり(=インライン要素)として認識し、文字の色や太さの装飾を加えることができる。