SEO無料相談に申し込む
まずは電話で相談する
CSSはWebサイトを装飾するためのマークアップ言語です。適切に使えば、処理速度の向上や導線設計の助けとなり、ユーザビリティを高められます。
しかし、CSSの使い方やSEO対策との関係を知らない方も多いのではないでしょうか。
そこでこの記事では、CSSの仕組みやSEOに効果的な記述方法を解説していきます。
サイトのリニューアルやデザインの見直しを検討している方は、ぜひ参考にしてください。
目次
CSSとは？
CSS（Cascading Style Sheets）は、Webサイトを装飾するためのマークアップ言語で、スタイルシートとも呼ばれます。HTMLと組み合わせて使用し、主に以下のことが行えます。
- 文字や背景の色の変更
- 文字の大きさや行間隔の調整
- 画像の大きさや形の調整
- レイアウトの変更
- アニメーションの実装
HTMLのみでもWebサイトは制作できます。しかし装飾が施せないないため、文字や画像が並んだだけの簡素なサイトしか作れません。
その結果デザイン性の低いサイトになり、ユーザーに興味を持ってもらうのが困難です。
一方CSSを使えばデザインを自由に作り込めるため、ユーザーにとって見やすいサイトに仕上げられます。
その他のWebサイトの作り方について詳しく知りたい方はこちら＞＞＞ホームページの作り方とは？自作・外注する際のポイント紹介
CSSの仕組み
CSSは以下のいずれかの方法で、HTML内の特定のタグや属性を指定し、任意の装飾をします。
- HTMLファイルに直接書き込む
- 別でCSSファイルを用意する
一般的には、CSSファイルを別で用意する方法が用いられます。サイトの骨組みとデザインは、異なるファイルで管理した方が運用しやすいためです。
一方、HTMLファイルに直接書き込む方法は記述量が多くなることから、簡易的な装飾でしか使われません。
以下では、CSSファイルを別で用意する際の記述方法を解説していきます。
基本の書き方
CSSは、装飾したいHTMLタグを指定し、装飾の内容を{}内に書き込みます。たとえば、以下のようなHTMLがあるとしましょう。
| <p>ホームページを公開しました！</p> |
文字色を青色にしたい場合、CSSは下記のように記述します。
| p { color : #0000FF; } |
以上で「ホームページを公開しました！」が青色の文字で表示されます。それぞれの項目の意味を表にまとめました。
| 該当箇所 | 名称 | 意味 |
|---|---|---|
| p | セレクタ | 装飾したいHTMLの場所 |
| color | プロパティ | 装飾内容の指定 |
| #0000FF | 値 | 装飾や変更の度合い |
プロパティと値の間に「:」、値の末尾に「;」を付け、{}で囲んでセレクタの後ろに書くのが基本のルールです。また、以下のように一つのセレクタに対して複数の装飾を指定することもできます。
|
p { color : #0000FF; /*文字を青色に*/ font-weight : bold; /*文字を太くする*/ font-size : 32px; /*文字の大きさを32pxに*/ } |
複数の場合、{}は一つですが「;」は値ごとの末尾にが必要です。書き方を間違えるとうまく機能しないため、注意しましょう。
セレクタの種類
セレクタには3つの種類があります。
- HTMLタグ
- id
- class
idとclassは、HTMLタグ内に書き込むCSS用の属性で、任意の名称を設定できます。
HTMLタグをセレクタにすれば、同じタグが使われている場所全てに装飾が適用されますが、特定の場所だけを装飾できません。
そこで、classがidを使えばそのような問題を回避できます。それぞれの書き方は以下のとおりです。
| 種類 | HTML | CSS | セレクタの書き方 |
|---|---|---|---|
| HTMLタグ | <p>HTMLタグの説明</p> | p { color : #0000FF; } | タグをそのまま書く |
| class | <p class=”class-sample”>classの説明</p> | .class-sample { color : #0000FF; } | class名の冒頭に「.」を付ける |
| id | <p id=”id-sample”>idの説明</p> | #id-sample { color : #0000FF; } | id名の冒頭に「#」を付ける |
うまく使い分ければ、記述の数を少なくでき、作業の効率化につながります。また、classは1ファイル内で同じ名称を何度でも使えますが、idではできないため、注意しましょう。
CSSとSEOの関係
CSSがSEO対策に直接的に良い影響を与えることは、ほとんどありません。CSSを別ファイルで用意することでHTMLが簡素化され、検索エンジンが内容を理解する助けになります。
ただし、コンテンツの品質やユーザー体験には関係がないため、CSSの工夫だけで順位が上がることはないでしょう。
とはいえ、CSSにはページの読み込み速度改善や、コンテンツの視認性を良くするなど、ユーザビリティを向上させる効果があります。
結果としてサイトの滞在時間を伸ばしたり、回遊率を上げたりなど、間接的にSEOに影響することは覚えておきましょう。
CSSを悪用するとペナルティの対象になる
CSSを悪用して以下のような対策を行うと、Googleのペナルティの対象となります。
- 背景と文字を同色にする
- 文字を画像の背後に配置する
- 文字を画面の外に配置する
- 文字の大きさや透明度を0にする
上記は隠しテキストや隠しリンクと呼ばれ、かつて検索エンジンを欺いて不当に順位を操作するために流行った手法です。手動による対策の対象となり、順位低下はもちろん、インデックスから除外されることもあるため、絶対に辞めましょう。
SEOに悪影響を及ぼさないためにCSSで気をつけること
不適切なCSSはユーザビリティを低下させ、SEOに悪影響を与えることがあります。そのような事態を避けるために、以下の3つに注意しましょう。
- ページの処理速度
- レンダリング処理
- 画像はできる限りHTMLで指定する
それぞれ詳しく解説していきます。
ページの処理速度
CSSの記述が冗長だと、読み込みに時間がかかり、ページの処理速度が低下します。
Googleはスマホサイトの表示速度が極端に遅いサイトの順位を下げると公表しているため、検索順位に悪影響を与える恐れがあります。
CSSはシンプルに記述するのが鉄則です。最低限の記述で構成されていれば、サーバーの処理速度やページの表示速度が向上します。
評価が下がるリスクを回避するために、不要な記述がないか、より短い記述で代用できないかなど、CSSファイルを見直しましょう。
レンダリング処理
レンダリングとは、Webブラウザが WebページのHTMLやCSSを読み取って、画面に反映する画像やテキストなどを生成することです。
CSSに読み込み位置やサイズが規定されていない要素があった場合、「レンダリングブロック」という現象が起こります。レンダリングブロックは、レンダリング処理の一連の流れを中断してしまうため、ページの表示速度の低下を招きます。
ユーザビリティはもちろん、SEO評価を下げてしまう恐れがあるため、CSSの記述に抜け漏れがないか確認しましょう。
レンタリングについて詳しく知りたい方はこちら＞＞＞レンダリングとは？SEOとの関係や影響を解説
画像はできる限りHTMLで指定
CSSで指定した画像は、Googleはインデックスしません。そのため、画像検索でも上位を狙いたい場合は、必ずHTMLのimgタグで設定しましょう。
しかし背景画像など、装飾のために使う画像は、CSSで読み込んだ方が管理や扱いが簡単になります。画像検索にインデックスさせる必要性を画像ごとに考え、適切な使い分けが重要です。
まとめ：CSSを効果的に使用すればユーザビリティの向上につながる
CSSの記述による、SEOへの直接的な影響はありません。
しかし、必要以上に長い記述や読み込み位置やサイズなどの記載漏れがあると、ページの処理速度が低下し、悪影響を与える恐れはあります。
また、CSSを悪用した隠しリンクや隠しテキストはペナルティの対象になるため行ってはいけません。
適切に装飾すればユーザビリティの向上に繋がり、ページの滞在時間の向上や直帰率の低下など間接的にSEOに良い影響を与えるでしょう。
SEO対策を外注しようとお考えの方はこちら＞＞＞【失敗しない】SEO対策を外注へ依頼する前にぜひ知ってほしい内容を徹底解説
SEO対策を外注する場合の費用相場について知りたい方はこちら＞＞＞SEO対策を代行業者へ依頼する場合の料金の相場は？
弊社SEOサービスランクエストではどんなお客様に対しても、予算状況に応じてSEOサービスを提供ができるように、「オーダーメイド型プラン」もご用意しております。お客様の課題や状況に合わせた最適なプランをご提案いたしますので、今後SEO代行業者をお探しになられる方は、ぜひ弊社サービスの内容をご覧ください。
