033.2 レッスン 1

CSSを使用する利点の一つは、同じスタイルを共有する要素に個別のルールを記述する必要がないことです。アスタリスクは、次の例のように、Webページ内のすべての要素にルールを適用します。

ページ内のすべての要素にスタイルルールを適用する方法は、 * セレクタだけではありません。単純にタグ名で要素にマッチするセレクタを タイプセレクタ と呼びますので、 body 、 p 、 table 、 em など、どんなHTMLタグ名でもセレクタとして使うことができます。CSSでは、親のスタイルは子の要素に 継承 されます。したがって、実際には、 * セレクタを使うと、 body 要素にルールを適用するのと同じ効果があります。

さらに、CSSのカスケード機能を使えば、要素の継承されたプロパティを細かく調整することができます。ページ内のすべての要素に適用される一般的なCSSルールを書いてから、特定の要素や要素のセットに対してルールを書くことができます。

同じ要素が2つ以上の相反するルールにマッチした場合、ブラウザは最も具体的なセレクタのルールを適用します。以下のCSSルールを例に挙げてみましょう。

ブラウザは color: purple と font-size: large のスタイルを body 要素内のすべての要素に適用します。しかし、ページ内に li 要素がある場合、ブラウザは font-size: large スタイルを font-size: small スタイルに置き換えます。これは li セレクタが body セレクタよりも li 要素と強い関係を持っているためです。

CSSでは同一スタイルシート内の同等のセレクタの数を制限していないので、同じセレクタを使ったルールが2つ以上あっても構いません。

この場合、どちらのルールも同じように li 要素に特化しています。ブラウザは相反するルールを適用することはできないので、CSSファイルの中で後から来たルールを選択します。混乱を避けるためには、同じセレクタを使用するすべてのプロパティをグループ化することが推奨されます。

スタイルシートに表示されるルールの順番は、ドキュメントでの適用方法に影響しますが、 important ルールを使用することで、この動作をオーバーライドすることができます。何らかの理由で、2つの独立した li ルールを維持しつつ、2つ目のルールではなく1つ目のルールを強制的に適用したい場合は、1つ目のルールをimportantとしてマークします。

!important と書かれたルールは、自然なスタイルシートのカスケードを崩し、CSSファイル内の問題を見つけて修正するのを難しくするため、注意して使用する必要があります。

特定のタグにマッチするセレクタを使用することで、継承された特定のプロパティを変更できることを確認しました。しかし、通常は同じタイプセレクタの要素に異なるスタイルを使用する必要があります。

HTMLタグの属性をセレクタに組み込むことで、参照する要素のセットを制限することができます。 例えば、あなたが作業しているHTMLページには、2種類の順序なしリスト（ <ul> ）があります。1つはページの上部でWebサイトのセクションへのメニューとして使用され、もう1つはテキスト本文の従来のリストに使用されます。

デフォルトでは、各リストアイテムの左に黒い円が付いています。トップメニューのリストから円を削除し、他のリストには円を残したい場合があります。しかし、単純に li セレクタを使用すると、テキストボディセクション内のリストの円も削除されてしまいます。一方のリストで使われているリストアイテムだけを変更し、もう一方のリストでは変更しないようにブラウザに指示する方法が必要です。 ページ内の特定の要素にマッチするセレクタを書くには、いくつかの方法があります。先に述べたように、まずは要素の属性を利用する方法を見てみましょう。今回の例では、 id 属性を使って、トップリストだけを指定することができます。

id 属性は、対応する要素に一意の識別子を割り当てるもので、これをCSSルールのセレクタ部分に利用することができます。CSSルールを記述する前に、サンプルのHTMLファイルを編集して、トップメニューに使われている ul 要素に id="topmenu" を追加します。

HTMLドキュメントの head セクションには、同じフォルダにあるスタイルシートファイル style.css を指し示す link 要素がすでにあるので、そこに以下のCSSルールを追加します。

ハッシュ文字は、セレクタの中で、要素に続いて、IDを指定するために使われます（スペースで区切ることはありません）。同じIDを持つ要素は存在しないので、ハッシュの左にあるタグ名は任意です。したがって、セレクタは単に #topmenu と書くことができます。

list-style-type プロパティは ul 要素の直接のプロパティではありませんが、親要素のCSSプロパティはその子要素に継承されるので、 ul 要素に割り当てられたスタイルは、その子要素である li 要素にも継承されます。

すべての要素が選択可能なIDを持っているわけではありません。実際、IDを持つことが期待されるのは、ページ内の主要なレイアウト要素のうちのいくつかだけです。例えば、サンプルコードで使われている惑星のリストです。このように繰り返される個々の要素に固有のIDを割り当てることは可能ですが、コンテンツの多い長いページではこの方法は実用的ではありません。そこで、親の div 要素のIDをセレクタとして利用し、その内側の要素のプロパティを変更する方法が考えられます。

しかし、 div 要素はHTMLのリストとは直接関係がないので、 list-style-type プロパティを追加しても、その子には何の影響もありません。したがって、コンテンツ div 内のリストの黒い円を中空の円に変更するには、 descendant（子孫） セレクタを使用する必要があります。

#content ul セレクタは、IDが content である要素の子である ul 要素のみにマッチするため、子孫セレクタと呼ばれます。必要に応じて何段階もの子孫を使うことができます。例えば、 #content ul li とすると、IDが content である要素の子孫である ul 要素の子孫である li 要素のみにマッチします。しかし、この例では、 li 要素が親の ul に設定されたCSSプロパティを継承するので、長いセレクタを使っても、 #content ul を使ったのと同じ効果が得られます。子孫セレクタは、ページレイアウトが複雑になってくると必須のテクニックです。

例えば、 topmenu のリストと footer div のリストのアイテムの font-style プロパティを変更して、斜めに見えるようにしたいとします。単に ul をセレクタにしてCSSルールを書いても、 content div 内のリストアイテムも変更されてしまうので、できません。これまでは、一度に一つのセレクタを使ってCSSプロパティを変更してきましたが、この方法はこの作業にも使えます。

別々のセレクタを使うのが唯一の方法というわけではありません。CSSでは、カンマで区切られたセレクタのリストを使って、1つまたは複数のスタイルを共有するセレクタをグループ化することができます。

セレクタをグループ化することで、スタイルを重複して書くという余計な作業を省くことができます。さらに、将来的に再びプロパティを変更したいと思っても、すべての異なる場所で変更することを覚えていないかもしれません。

CSSセレクタは、要素の動的な状態にも対応できます。これらのセレクタは、ハイパーリンクのようなインタラクティブな要素に特に有効です。訪問者の注意を引くために、ハイパーリンクの上にマウスポインタが移動したときに、ハイパーリンクの外観を変化させたい場合があります。

サンプルページに戻って、トップメニューのリンクから下線を取り除き、マウスポインタが対応するリンクの上に移動したときだけ下線を表示するようにしてみましょう。そのためには、まず、トップメニューのリンクから下線を消すルールを書きます。

次に、同じ要素の :hover 疑似クラスを使って、マウスポインタが対応する要素の上にあるときだけ適用されるCSSルールを作成します。

擬似クラスセレクタの :hover は、従来のCSSルールのすべてのCSSプロパティを受け入れます。その他の疑似クラスとしては、既に訪問されたハイパーリンクにマッチする :visited や、フォーカスを受けたフォーム要素にマッチする :focus などがあります。