この記事は東京海洋大学NePPのAdvent Calendar 2024の22日目です🎄
はじめに
今回の記事では、私が今までHTML&CSSを学びながら書いてきてややこしいなと感じたことについてまとめていきます。
まだ始めたばかりの方などに参考になればうれしいです
（私もまだ勉強をしている身なので、間違っている部分などあれば指摘していただけるとありがたいです
）
1. class属性とid属性の違い
1つめはHTMLにおける"class属性とid属性の違い"についてです。
まず大きな違いとして、同じHTMLファイル内で使用できる回数があげられます。同じclass名はページ内で何度も使えますが、同じid名は "ページ内で一度しか" 使うことが出来ません。
次に、CSSで指定した時の適用の優先順位があげられます。CSSでは "idで指定したものが優先" されます。あるタグにclassとidをつけて、そのclass名とid名に対してCSSを設定した時、idが優先されるため実際に適用されるのはid名を指定したCSSのみとなります。
以上のことから、「ページ内で何度も繰り返して表示する部分に対してはclassを使ってCSSで何回も同じコードを書かなくていいようにできる」「ずらしたくはない部分やページ間で同じ表示を使う部分にはidを使う」という違いがあることを確認できます。
気づかずに同じclass名を使ってしまって、思っていたところと違う部分にCSSが適用されてしまうことがたまにあるので気を付けたいです、、
2. marginとpaddingの違い
2つめはCSSにおける"marginとpaddingの違い"についてです。
marginとpaddingはどちらも余白を指定できるものです。しかし、"余白を付ける場所が違う" ことに注意しなければいけません。
要素の内側の余白はpadding、その周りにborderがあり、要素の外側（borderの外側）の余白はmarginで指定します。Chromeの「検証」やEdgeの「開発者ツールで調査する」で実際に確認すると分かりやすいですね。（このような概念はボックスモデルというそうなのでもう少し詳しく知りたい方はぜひ調べてみてください）
またメディアクエリを設定する時など、レイアウト崩れ防止のためにbox-sizingをborder-boxを使ってwidthで指定できる要素の幅をborderまで含むようにする場合も注意が必要です。今書いたように、border-boxを指定した時widthに含まれるのは「もともとの要素とpaddingとborder」でmarginは指定していない時と同じく含まれません。
どこの余白を指定しているのかは慣れるまで難しいと思うので何回も確認していくことも大切ですね！
3. ブロック要素とインライン要素とインラインブロック要素の違い
3つめはdisplayで指定できる、ブロック要素・インライン要素・インラインブロック要素の違いについてです。
この3つの要素の違いは主に「配置・並び方」「width・heightの設定」「margin・paddingの設定」に現れます。
「配置・並び方」については、ブロック要素のみ縦となり、インライン要素とインラインブロック要素では横になります。
「width・heightの設定」については、インライン要素のみ指定することができず、ブロック要素とインラインブロック要素では指定することができます。
「margin・paddingの設定」については、ブロック要素とインラインブロック要素では縦横左右すべて指定することができ、インライン要素では左右のみ指定することができます。
すごくややこしいですが、この3つの要素を分かっておくと便利なことがあるので私もちゃんと知っておこうと思いました。
例えば、インライン要素であるaタグでリンクを作る時のクリックできる範囲の変え方をはじめて知ったときこの大切さに気付きました。インライン要素のままではテキストの部分のみクリックできるようになっていますが、aタグをブロック要素にすることで大きさが広がりクリックできる範囲を要素全体に広げることができます。HPを作っていくときに大切になってくると思うので忘れないようにしたいです
さいごに
今回の記事では、HTML&CSSを学ぶ上で気になった部分についてまとめました。気づいたことなどがあればまた書き足したり、新しく記事にまとめたりしていこうと思います。
「はじめに」でも書いたように、私もまだ勉強中の身なので間違っている部分などは指摘していただけると助かります！
ここまで読んでいただきありがとうございました