CSSとは？基本的な仕組みとSEO対策に効果的な書き方

皆さまは「CSS」をご存じでしょうか？
Webサイト制作に関わるCSS以外にもHTML・JavaScript・PHPなどなど…
サイトを構成しているそれぞれの言語について、よく聞く機会が多くなると思います。

それぞれの言語について制作側であればよく理解している方が多いと思いますが、
依頼者側や別領域の方など立場によっては
「よく聞くワードだけど単語だけしか知らない…」
「働きはなんとなく知っている」
「絶賛学び中！」
なんていう方もいらっしゃるのではないでしょうか。

本記事ではCSSの全体像を把握するために「CSSとは一体何なのか」や「SEOに関係してくるのかどうか」など順を追ってご紹介します。

CSSとは

CSSとはカスケーディング・スタイル・シート（Cascading Style Sheets）の略で、Webページのデザイン・見栄えを設定する「スタイルシート言語」です。

通常、一般的なWebページは以下を組み合わせることでWebページが表示されます。

• HTMLで「各要素の意味や情報構造を定義」
• CSSで「レイアウトやデザインを定義」

実はHTMLだけでも装飾・デザインはできる

実のところHTMLのstyleタグ内やインラインにCSSを記述することができるため、HTMLファイル単体で文書の装飾・デザインも行うことも可能です。

しかし、HTMLファイル単体にしてしまうと以下のように運用管理がしづらくなってしまいます。

• 記述したファイル内や該当箇所でしか適用されないため、複数ファイル・箇所・メディアごとにスタイル指定させることが困難
• 文書内容や意味にそぐわないHTMLタグを使用して、 文書構造が分かりづらくなる
• 文章構造がわかりづらいためメンテナンス性が下がる
• アクセシビリティが下がる

別ファイルで定義したほうが運用管理面でも優れているため、現在はHTMLとCSSの組み合わせでWebページを構築するのが一般的です。

CSS の基本的な構造

CSSの基本的な構造をわかりやすく言うと
HTMLファイルを構成している「どこの」「何を」「どうするのか」を記述しています。

例えばこの関係性を図にまとめると以下のようになります。

先程の言葉にあてはめてみると、

このCSSは「h1」の「色を」「赤く」表示させるという命令をしています。

そして、この関係図に具体的な名称をあてはめると下記のようになり

• 「どこの」を「セレクタ」
• 「何を」を「プロパティ」
• 「どうするか」を「値」

と呼びます。

CSSはこの「セレクタ」「プロパティ」「値」の3つで構成されています。

セレクタについて

セレクタ（selector）は「どこの」にあたる部分でスタイルを適用する対象のことです。
先程の例ではh1が指定されていますが、セレクタはさまざまな種類・指定方法があります。
ここでは一部の種類・指定方法をご紹介します。

基本的な形式でよく使用されているのは「タグ（要素）」「ID」「class」の３種類です。

タグ	「div」「a」などHTMLのタグ名を指定する形式 アルファベットから始まっている
ID	「#id」のように＃（シャープ）から始まる
class	「. class」のようにドット（ピリオド）から始まる

その他にも

• カンマ区切りで複数のセレクタを書く「複数指定」
• 半角スペースで区切り絞り込み指定をする「子孫セレクタ」
• 全要素に対して適用する「*（ユニバーサルセレクタ）」

などがあります。

よく使われるプロパティについて

CSSで用意されているプロパティの数も数えきれないほど多く、様々な種類があります。
その中でも使用頻度の多いCSSプロパティについてご紹介します。

フォントや文字色の変更

font-size

font-sizeプロパティを使うと、指定したHTML要素の文字サイズを変更できます。

プロパティの値には、pxや%、remを使って文字サイズを指定できます。

font-weight

font-weightは文字の太さを指定するプロパティです。指定する値の種類は、lightやboldのように太さの名前で指定や、数値で指定することもできます。

数値で指定する場合は、一番細い100から一番太い900まで選ぶことができ、初期値は400です。

font-family

font-familyはフォントの種類を変更できるプロパティで、複数指定できます。

font-familyで指定したフォントの表示は回覧する端末に依存するので、CSSで指定したフォントが相手の端末に入っていないと表示されず、代わりのフォントが表示されます。

もしも指定したフォントが表示されなかったときのために、複数指定できる仕様になっているのです。

上記コードでは、Arialというフォントを表示させるために記入しています。

もし回覧者の端末でArialが表示できないときは、2番目に記載しているHelveticaというフォントを表示します。

テキストに関するプロパティ

text-align

text-alignは、ブロック要素内にある文字の位置を指定できるプロパティです。位置を指定するには、主に下記の値を使います。

• center：ブロック要素の中央に文字を配置
• right：ブロック要素の右に文字を配置
• left：ブロック要素の左に文字を配置

text-decoration

text-decorationは、文字にアンダーラインのような装飾を付けたり消したりできるプロパティです。

主にaタグにデフォルトで設定されているアンダーラインを消したり、文字にアンダーラインを加えるときに利用します。

line-height

line-heightプロパティを使うと、テキストの行間を調節でき、初期値としてnormalという値が設定されています。

line-heightに指定する値は、pxや％表記する方法と数字単体で入力する方法があります。

値に20pxを指定するとテキストの行間は20pxに統一されます。単体だと、1を指定すると文字サイズと同じ行間で表示し、2を指定すると行間が文字サイズの2倍になります。

widthとheightプロパティ横幅や高さを指定できる

widthはHTML要素の横幅を調節できるプロパティで、heightは高さを調節できます。初期値は双方ともautoが指定されています。

paddingとmarginは要素間の余白を調節できる

padding

paddingは、HTML要素内部の余白を調節するときに利用するプロパティです。HTMLで作ったボックスと内部テキストの間に余白を作るときによく利用されます。

paddingに値を指定するときは、左から順に上の余白、右の余白、下の余白、左の余白という順に設定できます。また、上下と左右の余白を一緒に調節する場合、左に上下の値、右に左右の値を同時に指定できます。

たとえば、上下に20pxの空白、左右に30pxの空白を指定する場合は下記のように入力します。

margin

marginプロパティを使うと、HTML要素外部の余白を調節できます。要素同士の余白を調節したりとWebサイトをレイアウトするときによく利用します。

値の使い方はpaddingプロパティと同じく、左から順に値を入力することで四方の余白を指定できます。

背景を変更する

background-color

background-colorは、指定した要素の背景色を変更できるプロパティです。Webサイト全体の背景から、各ボックスの背景色まで変更できます。

上記コードのようなカラーコードや単色を指定して表示することもできます。

background-image

background-imageは、指定した要素の背景に画像を挿入するときに使用します。Webサイトのメインビジュアルやボックスの背景に画像を設定するときに利用されます。

画像の指定方法は、background-imageの値に画像のパスを指定することで表示できます。

上記のように、urlというメソッド内に画像があるパスを入力します。

レイアウトの調節に欠かせないdisplayプロパティ

displayプロパティを使うと、HTML要素の使用を変更できます。たとえば、ブロック要素であるdivタグをインライン要素にしたり、要素を簡単に横並び表示したりできます。

displayプロパティでよく使う値は下記になります。

block	指定した要素をブロック要素に変更できる
inline	指定した要素をインライン要素に変更できる
inline-block	指定した要素をインラインブロック要素に変更できる
flex	指定した要素をフレックスレイアウトへ変更できる

CSSの特徴

CSSは、カスケーディング・スタイル・シート（Cascading Style Sheets）の略でしたが、カスケーディング(Cascading)とは、連鎖的に伝わるという意味で、階段の様な滝が上から流れてくるイメージになります。

これはCSSの特徴をよく捉えていて、CSSは上流で定義したスタイルは下流へ引き継がれていきます。
また、同じ要素に異なるCSSスタイルを何度でも上書きすることができるのも一つの特徴です。

読み込まれる順番について

スタイルの重複があった場合、基本的には後から読み込まれたスタイルが優先的に適用されます。
例えば、以下の記述例の場合は、3つのフォントサイズが重複指定されていますが、適用されるのは最後に読み込まれた「font-size:18px」になります。

しかし、この上書きルールは外部ファイルの読み込み順・インライン記述などによる「CSSの記述場所」やセレクタの書き方によって優先順位が変わる「詳細度」、優先順位を覆すことができる「!important指定」などによって例外として優先順位が変更されることがあります。

CSSを後に書いてもスタイルが上書きされない場合、これらが関係している可能性があるので重点的に見直してみるのも解決策のひとつです。

CSSとSEOの関係

基本的にCSSの記述自体がSEO順位に直接影響を与える訳ではないと言われていますが、
CSSの書き方次第ではページの処理速度やレンダリングスピードに影響を及ぼす可能性があります。

Googleが発表しているモバイルファーストインデックスによりスマホページの表示速度がページ評価の要素として優先されているため、CSSの記述によって処理速度が遅くスマホページの表示速度が下がることがSEOの評価のひとつとなり得ると考えられます。

SEO対策に効果的な書き方

少しでもSEO評価を高めるためにできることとして
「Googleのガイドラインに沿ったコーディングにする」という方法があります。

Googleは全体的に簡素化されたシンプルなソースコードのCSSスタイルシートの読込を望んでいるため、「いかにCSSの処理速度を速めるか」がポイントとなります。

参照元：Google HTML/CSS Style Guide

上記で提唱されているコーディング方法を4つのポイントに分けてご紹介します。

CSSのスタイルルール

ID及びクラスの命名

CSSには意味のないIDや、見た目だけのクラス名だけでなく、検索エンジンのクローラーが判別しやすいように命名しましょう。

ID及びクラス名のスタイル

最大限短縮されたスタイルで、クローラーが理解しやすい記述を心掛けて下さい。

タイプセレクタ

タイプセレクタ、あるいは子孫セレクタにはIDとクラス名を含めないようにコーディングしなければなりません。

ショートハンドプロパティ

ガイドラインに沿うだけでなく、行数を省くためにもプロパティを一括指定しましょう。

「0」と単位

値が0の場合は基本的に単位を省略して下さい。

小数点数値「0」

値が小数点のケースにおいても0を省略しましょう。

16進法

黒は#000、白であれば#fffといったように、コードが2つ続く際は16進数表記に基づいて3文字で記述して下さい。

プレフィックス

大規模サイトにおいては、ID及びクラス名が重複してしまう可能性がありますが、基本的に末尾へハイフンを付けてプレフィックスを設定して下さい。

ID及びクラス名の区切り文字

ID及びクラス名が2つ以上の単語になる場合は、ハイフンで繋げるようにしましょう。

CSSハックは最後の手段に

CSSハックは最終的な手段として用いるようにして、なるべく別の表現方法を採用して下さい。

CSSの書式ルール

プロパティ宣言の順序を守る

プロパティ宣言はアルファベット順に記述して、ベンダープレフィックスは考慮せず、接頭辞（プレフィックス）の順序を守るようにしましょう。

ブロック毎のインデント

ブロック毎にインデントして、階層を判断しやすくして下さい。

宣言の終わりにセミコロン

宣言はセミコロンを付けて終わるように記述しましょう。

プロパティ名の終わりに半角スペース

プロパティ末尾のコロンには半角スペースを入れて下さい。

セレクタ及び宣言を分離する

宣言とセレクタは改行して分離するように記述します。

CSSルールを分離する

プロパティは1つずつ改行を入れましょう。

CSSには単一引用符を使う

プロパティ値、あるいは属性セレクタには単一引用符を使用して、URLには含めないようにして下さい。

CSSのメタルール

CSSのメタルール重要であり、セクションごとの区切りには注意が必要となります。
CSSのセクション毎の区切りでは、改行と用途等のコメントを記述しましょう。

CSSを外部ファイルで読み込む

CSSはHTMLのスタイル内、あるいはインラインで記述することもできますが、外部ファイル化も可能となっています。簡単なイメージとしては「CSSファイル」を別途作成して、HTMLファイルから読み込ませるということであり、現在のWebサイト作りにおいては最も一般的な手法といえます。

その背景としては、2つ以上のHTMLに同じコードを適用できるというメリットが挙げられており、大規模サイト運営の際は変更作業の簡易化、そしてSEO対策ではユーザービリティ向上に繋がります。

ファーストビューはインラインで記述する

ページレイアウトアルゴリズムに於いて、ファーストビューはSEOで重要な要素です。そのため、ファーストビューが早くユーザーに表示されるように、ファーストビューの表示読み込み優先度を上げるとSEOでよいでしょう。その方法は、cssファイル全てを読み込むのではなく、ファーストビューに必要なcss要素だけを先に読み込ませます。

cssに記述する画像を使い分ける

画像の表示は、<img>タグを使って表示する方法とcssファイルの中で記述する方法があります。どういった画像がSEOに最適か分かるでしょうか。

コンテンツの文脈で価値がある画像や画像検索で表示させるべき場合は、<img>タグで画像を表示させます。一方で、背景画像など文脈上意味のない場合はcssの記述で画像を表示させても問題ありません。間違ってSEOに価値がある画像をcssの記述で表示させないようにしましょう。

隠しテキストを行わない

cssでテキストを装飾する場合は、隠しテキストにならないようにしましょう。悪質な場合はペナルティを受けるリスクが生じます。cssで隠しテキストにされやすい例は、「display:none」や「白い背景に白い文字を重ねる」でユーザーにはテキストが見えない状態にされることです。隠しテキストと認識されるようなcssの記述は避けましょう。

モバイルフレンドリーにする

cssは「モバイルフレンドリー」を意識する必要があります。例えばスマートフォンで見たページのリンク同士が近すぎると、誤クリックを誘発してユーザビリティに問題が起こります。スマートフォンのユーザビリティが高くなるようにcssを記述しましょう。

おわりに

いかがでしたでしょうか。今回は「CSSの基本的な仕組み」や「SEOとの関係」について紐解いていきました。

CSSの記述には数多くのルールがありプロパティも何百種類もあるため一見すると習得するのは大変そうに思えるかもしれませんが、基本となる法則やセットを覚えておけば経験を重ねるごとにスムーズに適用・読み解くことができます。

CSSのレベルやSEOへ関係性など、これから先も変化のある領域なのでいろいろな情報をインプットしつつ深めていきましょう。