はじめに
職業訓練で、Webページの見た目を整えるために使う「CSS」について学びました。
今回学習したのは、Webページ内にあるすべての要素に、一括でスタイルを設定できる「全称セレクタ」です。
CSSを学び始めたばかりの頃は、記号の意味や設定による見た目の変化がよく分からないこともあります。しかし、実際にコードを書いて表示を確認すると、CSSがどのように働いているのかを少しずつ理解できました。
今回は、全称セレクタを使ってブラウザの余白をなくしたときの体験を紹介します。
全称セレクタとは
全称セレクタは、アスタリスク記号の「*」で表されるCSSセレクタです。
セレクタとは、CSSで「どの部分にスタイルを設定するのか」を指定するものです。全称セレクタを使うと、Webページ内のすべての要素をまとめて指定できます。
今回学んだ設定は、次のようなものでした。
* {
margin: 0;
padding: 0;
}「margin」は、要素の外側にできる余白です。「padding」は、要素の内側にできる余白を表します。
この2つを「0」にすることで、すべての要素に最初から設定されている余白を、まとめてなくすことができます。
サンプルと同じ表示にならなかった理由
学習中にWebページをブラウザで表示すると、画面の端に少し余白ができていました。
自分ではサンプルと同じようにコードを書いたつもりでも、サイトの内容がブラウザの端までぴったり表示されません。そのため、最初は何が違うのか分かりませんでした。
ブラウザには、見出しや段落などの要素に、あらかじめ余白が設定されていることがあります。この初期設定によって、書いた覚えのない余白が表示される場合があります。
そこで全称セレクタを使い、marginとpaddingを0に設定しました。
すると、それまで画面の縁にあった余白がなくなり、サンプルと同じようにサイトがブラウザの端にぴったりと表示されました。
わずかな違いではありますが、余白がなくなったことで全体が整い、見た目もよくなったように感じました。
実際に設定して気づいたこと
今回の学習で印象に残ったのは、CSSの短い設定でも、Webページの見た目が大きく変わることです。
アスタリスク1文字で、ページ内のすべての要素を指定できることにも驚きました。
コードだけを見ていると、何をしているのか分かりにくい場合があります。しかし、設定前と設定後の画面を見比べると、CSSの役割を実感できます。
また、Webページがサンプルどおりに表示されないときは、HTMLの間違いだけでなく、ブラウザが最初から持っているスタイルも関係していることを学びました。
見た目が少し違うときに、すぐに自分のコードが間違っていると思うのではなく、余白や初期設定を確認することも大切だと感じました。
CSS初心者へのアドバイス
CSSを学び始めたばかりの人は、コードを読むだけでなく、実際に数値を変えて表示を確認するのがおすすめです。
たとえば、marginを0にした場合と、10pxにした場合を比べると、余白がどのように変化するのかを理解しやすくなります。
また、全称セレクタは便利ですが、すべての要素に設定が適用されます。そのため、後から個別の要素に余白を付けたい場合は、見出しや文章などに改めてスタイルを設定する必要があります。
最初は、次の流れで確認すると学習しやすいと思います。
- CSSを設定する前の画面を確認する
- 全称セレクタで余白を0にする
- 設定後の画面を確認する
- どこが変わったのかを見比べる
小さな変化でも、自分で違いを確認すると知識が身につきやすくなります。
まとめ
職業訓練のCSS学習では、アスタリスクで表される全称セレクタについて学びました。
全称セレクタを使うと、Webページ内のすべての要素に一括でスタイルを設定できます。
今回はmarginとpaddingを0にすることで、ブラウザの端に表示されていた余白をなくすことができました。サンプルと同じ表示になり、見た目が整ったときは、CSSの効果を実感できてうれしかったです。
まだCSSの学習は始まったばかりですが、実際にコードを書き、画面の変化を確認しながら、一つずつ理解していきたいと思います。
CSSを勉強中の方も、まずは余白の設定を変えて、画面がどのように変化するのか試してみてください。
コメント