ゼロからのWeb制作 Vol.11|スタイルシート(CSS)6

こんにちは、鈴木です。

前回はHTMLについて書きましたが、また今回からCSSについて書いていこうと思います。

目次

  1. スタイルの優先順位
  2. コメントの使用

1.スタイルの優先順位

CSSは基本的にファイルの読み込み順や記述順で上から下に読み込まれます。

しかし個別性の高いセレクタには、優先的にスタイルが適用されます。

ここでは、タイプセレクタ、classセレクタ、idセレクタの3つを考えます。

タイプセレクタ

HTMLに使用するタグなどがタイプセレクタにあたります。頻繁に登場するため汎用性は高いですが、個別性は低いです。

classセレクタ

classセレクタは、共通に使用できる場所で複数回使用することができます。そのため、タイプセレクタほどではないですが個別性は低いです。

idセレクタ

idセレクはHTML文書内で1度しか使うことができないため、個別性は高いです。

まとめると、スタイルの優先順位は
idセレクタ>classセレクタ>タイプセレクタ
になります。

※idセレクタが文書内で1回しか使用できない理由

文書内に2回以上同じid名を使用しても、実際にはブラウザ上で問題なく表示されます。

では、他ページからリンクする場合やページ内でリンクをする場合を考えてみましょう。

例えば、ページ内のフッタにリンクしたいとき、本来ページ内にフッタは一つしかないのに、フッタというid名が2箇所存在していたら、どちらにリンクすればよいか判断できません。

そのため、個別性の高い箇所にはidセレクタを用いる必要があります。HTMLの文法上においても正しくないので、同じid名を文書内で2回以上使用しないようにしましょう。

2.コメントの使用

スタイルを増やしていくとシートが複雑になり、ページのどの部分を記述しているのか分かりにくくなります。

コメントの内容はブラウザ上では表示されません。コメントをつけておくことで、後から誰が見ても分かるスタイルシートになります。

スタイルシートにおいては、

/*コメント*/

を使います。

例えば、「/* */」の内部に「ヘッダ」、「フッタ」などと記しておけば、修正が必要なときに修正箇所の特定が手早くできます。

※ また、HTML文書でコメントを残すときは

<!--コメント-->

を使います。