CSS初心者が「*」の意味を理解した日｜全称セレクタでブラウザの余白をリセット

# CSS初心者が「*」の意味を理解した日｜全称セレクタでブラウザの余白をリセット

職業訓練で、Webページの見た目を整えるために使う「CSS」について学びました。

今回学習したのは、Webページ内にあるすべての要素に、一括でスタイルを設定できる「全称セレクタ」です。

CSSを学び始めたばかりの頃は、記号の意味や設定による見た目の変化がよく分からないこともあります。しかし、実際にコードを書いて表示を確認すると、CSSがどのように働いているのかを少しずつ理解できました。

今回は、全称セレクタを使ってブラウザの余白をなくしたときの体験を紹介します。

職業訓練校に通うまでの経緯は57歳で職業訓練校へ｜面接に一度落ちてから合格した理由に書いています。

CSS 全称セレクタ｜「*」1文字とmargin・padding 2つのプロパティ

全称セレクタは、アスタリスク記号の「*」で表されるCSSセレクタです。

①「*」がすべての要素を指定するセレクタ

セレクタとは、CSSで「どの部分にスタイルを設定するのか」を指定するものです。全称セレクタを使うと、Webページ内のすべての要素をまとめて指定できます。

今回学んだ設定は、次のようなものでした。

* {
  margin: 0;
  padding: 0;
}

②marginとpaddingを0にするという設定

「margin」は、要素の外側にできる余白です。「padding」は、要素の内側にできる余白を表します。

この2つを「0」にすることで、すべての要素に最初から設定されている余白を、まとめてなくすことができます。

CSS初心者｜サンプルと表示がズレた3つの気づき

学習中にWebページをブラウザで表示すると、画面の端に少し余白ができていました。

• サンプルと表示がズレていた場面
• 全称セレクタで余白を0にした結果
• 設定して気づいたCSSの役割

①サンプルと表示がズレていた場面

自分ではサンプルと同じようにコードを書いたつもりでも、サイトの内容がブラウザの端までぴったり表示されません。そのため、最初は何が違うのか分かりませんでした。

ブラウザには、見出しや段落などの要素に、あらかじめ余白が設定されていることがあります。この初期設定によって、書いた覚えのない余白が表示される場合があります。

②全称セレクタで余白を0にした結果

そこで全称セレクタを使い、marginとpaddingを0に設定しました。

すると、それまで画面の縁にあった余白がなくなり、サンプルと同じようにサイトがブラウザの端にぴったりと表示されました。

わずかな違いではありますが、余白がなくなったことで全体が整い、見た目もよくなったように感じました。

③設定して気づいたCSSの役割

今回の学習で印象に残ったのは、CSSの短い設定でも、Webページの見た目が大きく変わることです。

アスタリスク1文字で、ページ内のすべての要素を指定できることにも驚きました。

コードだけを見ていると、何をしているのか分かりにくい場合があります。しかし、設定前と設定後の画面を見比べると、CSSの役割を実感できます。

また、Webページがサンプルどおりに表示されないときは、HTMLの間違いだけでなく、ブラウザが最初から持っているスタイルも関係していることを学びました。

見た目が少し違うときに、すぐに自分のコードが間違っていると思うのではなく、余白や初期設定を確認することも大切だと感じました。

CSS 全称セレクタ｜初心者向け4ステップの確認方法

CSSを学び始めたばかりの人は、コードを読むだけでなく、実際に数値を変えて表示を確認するのがおすすめです。

①数値を変えて表示を比べてみる

たとえば、marginを0にした場合と、10pxにした場合を比べると、余白がどのように変化するのかを理解しやすくなります。

②全称セレクタが及ぶ範囲への注意

全称セレクタは便利ですが、すべての要素に設定が適用されます。そのため、後から個別の要素に余白を付けたい場合は、見出しや文章などに改めてスタイルを設定する必要があります。

③4つの手順で確認する

最初は、次の流れで確認すると学習しやすいと思います。

1. CSSを設定する前の画面を確認する
2. 全称セレクタで余白を0にする
3. 設定後の画面を確認する
4. どこが変わったのかを見比べる

小さな変化でも、自分で違いを確認すると知識が身につきやすくなります。

HTML・CSSの試験で「入力を疑う」視点を学んだ話はHTML・CSSの試験で学んだ「入力を疑っている」という視点で紹介しています。

まとめ

職業訓練のCSS学習では、アスタリスクで表される全称セレクタについて学びました。

全称セレクタを使うと、Webページ内のすべての要素に一括でスタイルを設定できます。

今回はmarginとpaddingを0にすることで、ブラウザの端に表示されていた余白をなくすことができました。サンプルと同じ表示になり、見た目が整ったときは、CSSの効果を実感できてうれしかったです。

まだCSSの学習は始まったばかりですが、実際にコードを書き、画面の変化を確認しながら、一つずつ理解していきたいと思います。

CSSを勉強中の方も、まずは余白の設定を変えて、画面がどのように変化するのか試してみてください。

5ヶ月間の通学生活の様子は職業訓練は50代にきついか｜片道2時間・月18日の5ヶ月にまとめています。

• 57歳で職業訓練校へ｜面接に一度落ちてから合格した理由
• HTML・CSSの試験で学んだ「入力を疑っている」という視点
• 職業訓練は50代にきついか｜片道2時間・月18日の5ヶ月