CSS初心者がclassとidの違いを学んで気づいたこと

# CSS初心者がclassとidの違いを学んで気づいたこと

今日は職業訓練で、CSSのセレクタと余白を設定するプロパティについて学習しました。

今回練習したのは、主に次の4つです。

• class
• id
• margin
• padding

CSSを使うと、文字の色や大きさ、要素の配置など、Webページの見た目を整えることができます。

これまでにもCSSを書いたことはありましたが、classとidの使い分けについては、最初はよく理解できませんでした。

どちらもHTMLの要素を指定してCSSを適用できるため、「何が違うのだろう」と迷いました。

CSS class id 違い｜最初は分からなかった理由

まずは、classとidをどう使い分けるのかという基本の考え方からです。

学習を進める中で、classとidは、使う目的が少し違うことを知りました。

classは、同じデザインや設定を複数の要素に使いたいときに便利です。

たとえば、同じ見た目のボタンをいくつか作る場合、それぞれに同じclassを付けることで、CSSをまとめて指定できます。

一方、idは、ページ内の一つの要素を識別するときに使います。

HTMLでは、同じid名を一つのページ内で重複して使わないことが基本です。

最初は、classとidのどちらを使っても見た目を変えられるため、使い分ける必要性が分かりませんでした。

しかし、それぞれの役割を意識して設定することで、どこにどのCSSが使われているのか分かりやすくなることに気づきました。

まだ完全に使いこなせているわけではありませんが、実際にコードを書いて比べたことで、少しずつ違いが見えてきました。

「*」を使った全称セレクタの話は、CSS初心者が「*」の意味を理解した日｜全称セレクタでブラウザの余白をリセットに書いています。

CSS margin padding｜余白設定の違いも練習した

classとidに続いて、余白を決めるmarginとpaddingについても整理します。

今回は、余白を設定するmarginとpaddingについても学びました。

marginは、要素の外側に作る余白です。

paddingは、要素の内側に作る余白です。

説明を読んだだけでは、どちらも余白なので少し混乱しました。

そこで、背景色を付けたボックスを作り、marginとpaddingの数値を変えながら表示を確認しました。

paddingを大きくすると、文字と枠の間が広がります。

marginを大きくすると、その要素と周りの要素との間隔が広がります。

実際に画面の変化を見てみると、「内側の余白」と「外側の余白」の違いが分かりやすくなりました。

CSSは、説明を読んで覚えるだけではなく、自分で数値を変更しながら確かめることが大切だと感じました。

枠線や背景色、文字色を使ったブログ装飾の話は、CSS初心者が最初に覚えたいborder・background-color・colorの使い方｜ブログ装飾で学んだことにまとめています。

CSS class id｜見た目が同じでもコードの書き方は違う

ここでは、見た目は同じでもコードの書き方が変わるという気づきを紹介します。

今回の学習で印象に残ったのは、Webページの見た目が同じでも、CSSの書き方は人によって変わるということです。

同じデザインを作る場合でも、似た内容のCSSを何度も書く方法もあれば、共通する部分をclassにまとめる方法もあります。

役割に合わせて使い分けることで、重複の少ないCSSを書けることを知りました。

重複の少ないコードにすると、あとから内容を見直したり、修正したりするときに分かりやすくなります。

同じCSSを何度も書かずにまとめることで、管理もしやすくなると感じました。

私はこれまで、Webページの見た目を完成させることに意識が向きがちでした。

しかし、今回の学習を通して、見た目だけではなく、コードの読みやすさや修正のしやすさも大切だと気づきました。

コーディングにも、整理されていて無駄が少ないという意味での美しさがあるのだと思います。

CSS class id｜実際に書くことで少しずつ理解できた

ここからは、実際にコードを書きながら理解を深めていった過程です。

classとidの違いも、marginとpaddingの違いも、最初からすぐに理解できたわけではありません。

説明を読んで分かったつもりになっても、自分でコードを書くと、どちらを使えばよいのか迷うことがありました。

それでも、小さなパーツを作って表示を確認し、数値や指定方法を変えてみることで、少しずつ役割を理解できるようになりました。

今回の学習で、分からないことがあっても、実際に書いて試すことが大切だと改めて感じました。

一度で正しく書こうとするのではなく、書いて、表示して、間違いを直すことを繰り返しながら覚えていきたいです。

line-heightで分かった行間の仕組みは、CSSの行間はただの余白ではなかった｜初心者がline-heightを学んでスッキリした話に書いています。

CSS初心者へのアドバイス｜classとidの使い分け方

最後に、classとidの違いに迷ったときの試し方をまとめます。

classとidの違いに迷ったときは、まず小さなHTMLとCSSを作って試してみると分かりやすいと思います。

たとえば、同じデザインのボタンを3つ作り、すべてに同じclassを付けてみます。

次に、ページ内の一つの要素にidを付けて、それぞれがどのように使われるのか確認します。

marginとpaddingについても、最初は10px、その次は30pxというように、数値を大きく変えてみると違いが見えやすくなります。

分からないまま暗記するよりも、画面の変化を見ながら覚えるほうが、理解につながりやすいと感じました。

まとめ

今日はCSSの学習として、classとid、marginとpaddingについて練習しました。

最初はclassとidの使い分けがよく分かりませんでしたが、実際にコードを書くことで、それぞれの役割を少しずつ理解できました。

marginとpaddingについても、数値を変えながら画面を確認することで、内側と外側の余白の違いが分かりました。

今回の学習を通して、Webページは見た目が完成すればよいのではなく、あとから見直しや修正がしやすいコードを書くことも大切だと気づきました。

今後は、class名の付け方やCSSの優先順位についても学び、読みやすく修正しやすいコードを書けるように練習していきたいです。

CSSを学び始めた方も、まずは小さなパーツを一つ作り、実際にコードを書きながら違いを確かめてみてはいかがでしょうか。

通学の大変さについては、職業訓練は50代にきついか｜片道2時間・月18日の5ヶ月に書いています。

最後までお読みいただき、ありがとうございました。

• CSS初心者が「*」の意味を理解した日｜全称セレクタでブラウザの余白をリセット
• CSS初心者が最初に覚えたいborder・background-color・colorの使い方｜ブログ装飾で学んだこと
• CSSの行間はただの余白ではなかった｜初心者がline-heightを学んでスッキリした話
• 職業訓練は50代にきついか｜片道2時間・月18日の5ヶ月