はじめに
職業訓練で、Webページの見た目を整えるCSSについて学びました。
今回の授業では、テーブルや文章、リストの表示を調整するCSSプロパティに加えて、HTML要素のまとめ方や、id・classの指定についても学習しました。
その中で特に印象に残ったのは、目の前の要素だけを見るのではなく、ページ全体の構造を考えながらコーディングすることです。
これまでは、要素をまとめたいときに「とりあえずdivで囲めばよい」と考えてしまうことがありました。しかし、今回の学習を通して、divを使う目的やclassを付ける場所を考えることが大切だと気づきました。
今回学んだCSSプロパティ
今回の授業では、次のようなCSSプロパティを学びました。
| プロパティ | 主な役割 |
|---|---|
vertical-align | セル内などの縦方向の位置を調整する |
border-collapse | 表の境界線を重ねて表示する |
list-style-position | リストマーカーの位置を決める |
text-indent | 文章の先頭を字下げする |
white-space | 空白や改行、折り返し方を調整する |
overflow | 要素からはみ出した内容の表示方法を決める |
※なお、vertical-alignは主にテーブルセルやインライン要素などで使われるプロパティです。通常のブロック要素を自由に上下中央へ配置するための指定ではありません。
どのプロパティも、Webページを見やすく整えるために役立ちます。
ただし、CSSの名前と役割を覚えるだけでは、思い通りのページを作るのは難しいと感じました。
どの要素に指定するのか、HTMLがどのような構造になっているのかまで考える必要があります。
とりあえずdivで囲む考え方を見直した
今回の学習で特に考え方が変わったのは、divの使い方です。
これまでは、複数のタグをまとめたいときや、CSSを指定したいときに、とりあえずdivで囲めばよいように感じていました。
しかし、要素をまとめるときは、タグの数だけで判断するのではなく、そのまとまりにどのような役割があるかを考えることが大切です。
すでにある要素へ直接classを指定できる場合は、装飾のためだけに新しいdivを追加しなくてもよいことがあります。
一方で、子要素が一つであっても、背景色を付ける範囲を作りたい場合や、レイアウト用の箱として必要な場合は、divを使うことがあります。
つまり、子要素の数だけでdivが必要かどうかを決めるのではなく、その要素を追加する目的があるかどうかを考える必要があります。
また、内容に意味がある場合は、divだけでなく、sectionやnav、articleなど、その内容に合ったHTML要素が使えないか確認することも大切です。
sectionは内容のまとまり、navはメニューや案内用のリンク、articleは単独でも成り立つ記事などに使われる要素です。
何でもdivで囲むのではなく、役割に合った要素を選ぶことで、HTMLの構造が分かりやすくなります。
classは見た目や役割を共有するときに使う
classは、同じ役割や見た目を複数の要素で使いたいときに便利です。
例えば、複数の見出しに同じ色や余白を付けたい場合、同じclassを指定することで、共通のCSSを適用できます。
また、一度しか使わない要素であっても、見た目を指定する目的でclassを使うことがあります。
「一度しか使わないからid、複数回使うからclass」と単純に分けるのではなく、何のために使うのかを考えることが大切です。
CSSの見た目を指定するときは、あとから修正しやすいようにclassを使う方法がよくあります。
idは特定の要素を一意に示すために使う
idは、一つのページ内で同じ名前を一度しか使えません。
ページ内リンクの移動先を指定するときや、JavaScriptで特定の要素を操作するときなど、要素を一意に示したい場面で使われることがあります。
idでもCSSを指定することはできますが、classよりも指定が強くなりやすいため、あとから別のCSSで見た目を変更しにくくなることがあります。
そのため、CSSで見た目を整える場合は、一度しか使わない要素であってもclassを使う方法があります。
idとclassは、使用回数だけで決めるのではなく、目的に応じて使い分けることが大切だと学びました。
目の前だけでなくページ全体を見る
今回の授業で強く感じたのは、CSSを書くときには、指定したい部分だけを見るのではなく、ページ全体を見る必要があるということです。
その場の見た目だけを考えてclassを付けていくと、似たような名前のclassが増えたり、同じ役割なのに別々の指定を書いてしまったりすることがあります。
反対に、最初に全体の構造や共通する部分を確認しておくと、同じclassを使える場所が見つかり、CSSをまとめやすくなります。
HTMLの構造が整理されていれば、どのCSSがどの要素に影響しているのかも分かりやすくなります。
コーディングの矛盾を減らすためには、目の前の要素だけでなく、ページ全体を見ながらidやclassを指定することが大切だと感じました。
思い通りに表示できないときもある
まだ、頭の中で思い描いたデザインを、そのままコードにすることはできません。
classを指定したのに見た目が変わらなかったり、変更したくない部分まで同じデザインになったりすることがあります。
そのようなときは、CSSだけを見るのではなく、HTMLの親要素や子要素の関係、classを付けた場所、他のCSSに上書きされていないかを確認する必要があります。
うまくいかないときは大変ですが、原因を一つずつ探すことで、少しずつ理解が深まっていると感じます。
初心者が確認したいポイント
CSSが思い通りに反映されないときは、次の点を確認すると原因を見つけやすくなります。
- HTMLのタグが正しく閉じられているか
- HTMLとCSSの
class名が一致しているか - 指定したい要素を正しく選べているか
- 追加した
divに明確な役割があるか - すでにある要素へ直接
classを指定できないか - 内容に合ったHTML要素を使えているか
- 別のCSSに上書きされていないか
- 同じような
classを必要以上に増やしていないか
特に、CSSが反映されないときは、プロパティの書き方だけでなく、HTMLの構造まで見直すことが大切です。
今回の学習で感じたこと
今回の職業訓練では、CSSプロパティの使い方だけでなく、HTML全体を見ながら要素をまとめる考え方を学びました。
以前は、CSSを指定するためにdivを追加すればよいと思うこともありました。
しかし、実際には、そのまとまりに役割があるか、すでにある要素へ直接classを付けられないか、意味に合ったHTML要素がないかを考える必要があります。
また、idとclassについても、使用回数だけで決めるのではなく、それぞれの目的を理解して使い分けることが重要だと分かりました。
今回の学習で一番大きかったのは、CSSのプロパティを覚えたこと以上に、コーディングするときの見方が少し変わったことです。
まとめ
今回の職業訓練では、vertical-align、border-collapse、list-style-position、text-indent、white-space、overflowなどのCSSプロパティを学びました。
さらに、divは子要素の数だけで必要かどうかを決めるのではなく、そのまとまりに役割があるかを考えて使うことも学びました。
classは同じ役割や見た目を共有するときに便利で、idはページ内リンクやJavaScriptなど、特定の要素を一意に示したいときに使われることがあります。
まだ思い通りにコーディングできないことも多いですが、上達するためには反復練習が必要です。
まずは短いHTMLとCSSを何度も書き、divを追加する目的やclassを付ける場所を一つずつ確認してみましょう。
コメント