CSSを記述するときのルールについて

CSSには、いくつかのルールが定められています。その基本となるのが、「セレクタ」と呼ばれるものです。セレクタとは、HTMLのどの部分にスタイルを指定するかを決めるもので、HTMLのタグで指定していきます。

基本的な構造としては、「セレクタ」「プロパティ」「値」の3つで構成されています。下記の例だと、h1タグのフォントサイズを20pxに指定することを意味します。

p {font-size: 20px; }

「p」がセレクタで、「font-size」がプロパティ、「20px」が値です。左から順に読んでいって、「p」の「font-size」を「20px」にするという意味ですね。すごく単純ですから、覚えやすいと思います。

そして、さらに構造を見ていくと、セレクタのひとかたまりを「規則集合」、{}で囲まれた部分を「宣言ブロック」、{}の内部を「宣言」といいます。

20141017-2

規則集合の中には、半角スペースや改行などを自由に入れることができるので、自分の見やすいように整形するようにしてください。

p {
font-size:  20px;
margin-right: auto;
margin-left: auto;
}

一般的には、上記のように宣言ごとに改行して記述していきます。こうすれば見やすくなりますから、後で修正するときにも混乱することがありません。また、複数人で編集するときにも、決められたルールに沿って記述すれば、間違うことは無くなるでしょう。

 

セレクタの種類

セレクタには、色々な種類があり、それぞれに効果も変わってきます。特徴を知って使い分けをすることで、自分の思うようにレイアウトや装飾が出来るようになるはずです。ここでは、一般的に使われるセレクタを紹介します。

セレクタの種類 使用例
要素セレクタ p {color: #000; }
全称セレクタ * {color: #000; }
IDセレクタ #content {color: #000; }
classセレクタ .red {color: #000; }
複数セレクタ h1 p {color: #000; }
子孫セレクタ p strong {color: #000; }

要素セレクタ

最も基本的なセレクタで、選択した要素にスタイルを適用することができます。「p」を指定すれば、ページ内のすべての「p」にスタイルが適用されます。

全称セレクタ

文章内のすべての要素に対して、スタイルを適用します。別名「ユニバーサルセレクタ」とも呼ばれますね。すべてのテキストの色を変えたり、行間を指定するときに使います。

IDセレクタ

特定の要素に付けたIDを指定して、スタイルを適用します。HTML側で、<div id=”content”>という風にIDを指定すれば、そこの部分にだけ装飾をすることが可能です。注意点としては、同じIDをページ内で複数使うことが出来ません。

classセレクタ

特定の要素に付けたclass属性を指定して、スタイルを適用します。<p class=”red”>という形でclass属性を指定すれば、そこの部分に装飾を加えられます。IDセレクタと似ていますが、classセレクタは同じものをページ内で何度でも使用可能です。

複数セレクタ

同じスタイルを複数の要素に適用させることが出来ます。「,」で区切ることで、いくつでも指定することが可能です。上手く使えば少ない記述でレイアウトできるので、シンプルなソースになります。

子孫セレクタ

ある要素の中の特定の要素に、スタイルを適用できます。セレクタの間に半角スペースを入れるだけで、指定することが可能です。

 

CSS内の優先順位について

CSSを記述するときには、上から順番に書いていきます。その時に、下にあるものから優先的に適用されるというルールがあります。たとえば、同じ要素のセレクタが複数あった場合、下にある方が適用されるということです。

なので、過去のセレクタを上書きすることができ、デフォルトスタイルシートのリセットなどに使われます。


そして、セレクタにも優先順位が決まっていて、「IDセレクタ」「classセレクタ」「要素セレクタ」の順にスタイルが適用されます。ですから、セレクタを指定してもスタイルが変わらないときには、優先順位が適用されている可能性があります。

「IDセレクタ」で指定していたら、後で「classセレクタ」で指定しても適用されません。なので、間違いの無いように気を付けてください。

 

以上、CSSのルールについて解説をしました。Webデザインにおいて重要なことですから、必ず覚えておくようにしましょう。

サブコンテンツ

このページの先頭へ