適切なマークアップをするためのCSSの基本とセレクタについて

table要素でレイアウトを組む『テーブルレイアウト』、レイアウトは全てCSSで調整する『フルCSSレイアウト』など、Webサイト制作時のレイアウトの組み方には手法が2つありますが、今は『フルCSSレイアウト』が一般的です。

テーブルレイアウトを選ぶしかない時代もありましたが、各ブラウザがCSSに対応し始めた頃からレイアウトは全てCSSを使って整え、HTMLタグが持つ意味も守ろう、という考え方が普及したようです。それが2005年ごろとのことで、もしかすると懐かしい話題だと感じる方もいらっしゃるのでは？

そもそもtable要素は表をつくるときに使うもので、ブラウザの表示上は問題なくても、文書構造としては正しくないものとなってしまいます。文書構造通りにマークアップすることで、音声読み上げアプリなども適切に情報を読み取れるようになれるなど、ユーザビリティの向上に寄与します。
ただ、それだけではありません。適切でないマークアップは、検索エンジンに内容を正しく伝えられないためSEOの効果が見込めなくなるのです

『HTMLで文書構造を表し、CSSでデザインする』という考えは、SEOにも大切な考え方です。
より深くCSSを理解し、SEOに最適化されたHTMLを作るために、基本と、セレクタの種類について、簡単に振り返りたいと思います。

CSSの書き方

CSSは次のように記述します。

セレクタ{
  プロパティ1: 値1; 
  プロパティ2: 値2;
  ・
  ・
  ・
}

装飾の種類を表す『プロパティ』、その装飾をどのように変化させるのかを表す『値』、指定したスタイルを適用する範囲を『セレクタ』と呼びます。
『プロパティ』の後に『:(半角コロン)』、『値』の後に『;(半角セミコロン)』を付けるルールとなっている点に注意が必要です。

文字色を設定する『color』プロパティ、背景色や画像を設定する『background』プロパティなどは使う場面が多いはずです。枠線、余白、透明度などを設定する様々なプロパティがあります。それらを組み合わせてHTMLをスタイリングしていきます。

例：p要素に含まれる文字を赤くしたい場合は次のように書きます。

HTML
  <p>テキスト</p>
CSS
  p{
    color:#FF0000;
  }

セレクタに要素名『p』を指定し、文字色を変更するプロパティ『color』の値を、赤色を表す『#ff0000』に設定する。これにより、pタグに含まれるテキストは全て赤色になります。

※補足情報
『#FF0000』とは色を数値で表したものでHEXカラーコードと呼ばれています。#の後に6ケタの16進数を指定することで、色を決めます。
2桁区切りで赤、緑、青の色の量を表していて、今回指定したカラーコードに日本語を併記すると「赤FF緑00青00」となります。赤のみが最大値になっているので赤色を示していることがわかります。

カラーコードについては原色大辞典さんのカラーピッカー[URL:http://www.colordic.org/picker/]をご覧いただくと、手軽に欲しい色がわかると思います。

『セレクタ』について

『セレクタ』とは、スタイリングする範囲を決めるもので、要素名、id、classなどを使って、指定します。CSS3が勧告されて種類も多くなり、できることも多くなりました。中カッコで囲んだ範囲に、プロパティと値を書き込んでいきます。

全てのp要素をスタイリングしたい場合は、次のように書きます。

p{
  color:#ff0000;
}

セレクタにclass属性を使う場合は『.class名』

class属性『style』を持つ要素をスタイリングする場合は次のように書きます。

.style{
  color:#ff0000;
}

セレクタにclass属性を使用する場合は『.class-value』(ピリオド+class属性の値)の形で記述します。例は、class属性の値が『style』の要素に指定するという意味です。

セレクタにid属性を使う場合は『#id名』

id属性『style』を持つ要素をスタイリングする場合は次のように書きます。

#style{
  color:#ff0000;
}

セレクタにid属性を使用する場合は『#id-value』(ハッシュ+id属性の値)の形で記述します。例は、id属性の値が『test』の要素に指定するという意味です。

CSSはタイプセレクタ、クラスセレクタ、idセレクタを使って設定する場合がほとんどのため、基本は上記の3つを覚えてしまえば多くの場合問題ありません。

セレクタ一覧

上記のclass属性、id属性を含め、様々なセレクタが用意されています。

全称セレクタ(ユニバーサルセレクタ)

全ての要素にスタイルを適用するときに使います。

例：すべての要素のテキストを赤くする

*{
  color:#f00;
}

タイプセレクタ

特定のタグにスタイルを適用するときに使います。

例：p要素のテキストを赤くする

p{
  color:#f00;
}

idセレクタ

id名を指定するためのセレクタです。

例：id属性に『id1』が設定された要素のテキストを赤くする。

#id1{
  color:#ff0000;
}

※HTMLのルールにより、id属性の値を重複させてはいけないことになっています。
複数の要素に同じスタイルを適用したい場合はclassセレクタなどを使用してください。

classセレクタ

特定のclassを持つ要素に適用するときに使います。

例：class属性に『change』が設定された要素のテキストを赤くする。

.change{
  color:#ff0000;
}

属性セレクタ

指定した属性を持つ要素を選択するセレクタです。

例：rel属性を持つ要素のテキストを赤くする

[rel]{
  color:#ff0000;
}

※補足
属性の値まで絞ることも可能です。その場合は次のように記述します。

例：rel属性の値に「nofollow」が設定された要素のテキストを赤くする。

[rel="nofollow"]{
  color:#ff0000;
}

値が開始文字列で絞ることも可能です。その場合、セレクタの『=』の前に『^』を付けます。

例：data-example属性の値が『text』で始まる要素のテキストを赤くする

[data-example^="text"]{
  color:#ff0000;
}

値が終了文字列で絞ることも可能で、その場合、セレクタの『=』の前に『$』を付けます。

例：data-example属性の値が『text』で終了する要素のテキストを赤くする

[data-example$="text"]{
  color:#ff0000;
}

疑似クラス

複数ヒットするセレクタの中から1つ目だけを対象にするなど、絞り込みを行うためのセレクタです。
セレクタの後に『:(半角コロン)』を置いて、疑似クラスの指定を行います。

E:pseudo-class{
}

:first-child

例：#first以下の全要素の最初の子要素、且つそれがp要素だった場合に適用する

#first p:first-child{
}

適用される例

以下の疑似クラスも同様の考え方をします。

:last-child

例：div要素以下、全要素の最後の子要素、且つそれがp要素だった場合に適用する

div p:last-child{
}

:nth-child(n)

例：div要素以下、全要素のn番めの子要素、且つそれがp要素だった場合に適用する

div p:nth-child(n){
}

:first-of-type

例：div要素以下の全要素の子要素を見て、最初に出現するp要素に適用する

div p:first-of-type{
}

:last-of-type

例：div要素以下の全要素の子要素を見て、最後に出現するp要素に適用する

div p:last-of-type{
}

:nth-of-type(n)

例：div要素以下の全要素の子要素を見て、n個めに出現するp要素に適用する

div p:nth-of-type(n){
}

スタイルの優先順位

CSSは基本的に、同じセレクタならば後に書いた方が優先されます。

次の例では、p要素の文字色が赤になるよう先に記述されていますが、後の方に書いてある文字色を青にする記述が優先されています。

例：後に書いたスタイル適用される

p{
  color:#FF0000;
}
p{  /* 後に書いているこちらが優先される */
  color:#0000FF;
}

基本はidセレクタが最も優先される

CSSは後に書いた方が優先されるとお伝えしましたが、先に書いてあるセレクタの詳細度が高い場合はその限りではありません。
下記の例では、同じ要素を対象にしたスタイルを順番に書いていますが、先に書かれたセレクタの詳細度の方が高いため、後に書かかれた方が無視されています。

例：id『ex1』、class『ex2』を持つp要素

#ex1{
  color:#FF0000;
}
.ex2{  /* 対象は同じでもセレクタの詳細度が低いので重複しているプロパティは無視される */
  color:#0000FF;
}

次の一覧で、下に向かうごとに詳細度が高くなります。

• 全称セレクタ(ユニバーサルセレクタ)
• タイプセレクタ
• classセレクタ / 属性セレクタ / 疑似クラス
• idセレクタ

スタイルが効かないときは、セレクタを組み合わせて詳細度を高める。

上記の詳細度ベースに、セレクタを組み合わせて記載することで、要素を絞り込み、詳細度を高めることが可能になります。
『子孫セレクタ』、『子セレクタ』、『隣接セレクタ』、『間接セレクタ』の4つがよく使われます。

子孫セレクタ『E F』

セレクタを半角スペースで区切って、要素を絞り込みます。
『E』の子孫にある全ての『F』が対象になります。

E F{
}

子セレクタ『E > F』

セレクタを半角の不等号(大なり)で区切って、要素を絞り込みます。
『E』の直下にある『F』が対象になります。

E > F{
}

隣接セレクタ『E + F』

セレクタ同士を+記号で区切って、要素を絞り込みます。
『E』の隣にある『F』が対象になります。

あまり出番が無いように思えますが、見出しタグの直後にあるpタグのみ選択したい場合などに利用します。

E + F{
}

間接セレクタ『E ~ F』

セレクタ同士を~記号で区切って、要素を絞り込みます。
『E』と同じ階層にある全ての『F』が対象になります。

入れ子が深かったり浅かったりする要素を選択したくない場合に利用します。

E ~ F{
}

詳細度の考え方

詳細度は『全称セレクタ』、『タイプセレクタ』、『classセレクタ/属性セレクタ/疑似クラス』、『idセレクタ』の順に高くなり、それぞれ別々に数えられます。

詳細度を数値で表す場合、a.b.cのように表記することができます。アルファベットの意味は次の通りです。

a = 『idセレクタ』の数
b = 『classセレクタ/属性セレクタ/疑似クラス』の数
c = 『タイプセレクタ』の数

例1：セレクタが『#content > .col.content_inner p』の場合のスコアは『1.2.1』になります。

内訳：
『#content』はidセレクタなのでa に +1、
『.col』と『.content_inner』の二つがclassセレクタなのでb に +2、
『p』はタイプセレクタなので、c に +1、

例2：idセレクタが先に指定されていると、後に書かれたidを持たないセレクタが無視される

/* CSS */
#id1{
  color:#ff0000;
}
.cls1.cls2.cls3.cls4.cls5.cls6.cls7.cls8.cls9.cls10.cls11{
  /* classを11個積み重ねてもidセレクタの詳細度に勝てないので無視される。 */
  color:#0000ff;
}

例2のセレクタはそれぞれ次のようなスコアになるので、先に書いた方が優先されます。
■#id1
スコア：1.0.0
■.cls1.cls2.cls3.cls4.cls5.cls6.cls7.cls8.cls9.cls10.cls11
スコア：0.11.0

まとめ

私がWebについて勉強を始めたころには、『レイアウトはCSSを使って整える』という考えが完全に主流になっていましたので、テーブルレイアウトはWebサイト運営期間の長いお客様のサイトで拝見するくらいです。

『Yahoo!』も2008年ごろまでtable要素でレイアウトを組んでいたようです。古いバージョンIEへの対応など、新旧問わずブラウザ間の差異を小さくする“当時の最善策”がテーブルレイアウトだったのだと思います。差異を小さくすることを優先した分リッチな表現などはあきらめていたのではないかと予想しています。

古いバージョンのブラウザに対応するためには、テーブルレイアウトで組む必要がありますが、それ以外の場合はCSSレイアウトで作成することがSEOとしての最適解になるはずです。

現在はMicrosoftのサポートが切られたブラウザは基本的には対応しないWeb制作会社様も少なくないと思います。CSSの知識を深めて、最新技術を積極的に取り入れていきたいものですね。

この記事がCSSを勉強している方の参考になれば幸いです。