SEOで使われる用語「CSS」について解説しています。

CSSとは

CSSとはカスケーディング・スタイル・シートの略で、HTMLと組み合わせて使用する言語です。HTMLで各要素の意味や情報構造を定義し、CSSでそれらを装飾します。もっと分かりやすく説明しますと、サイト内のコンテンツ部分とデザインを別々に定義しようという考えです。

cssについて

CSSの仕組み

HTMLで下記のように表記するとします。

CSSのしくみ-HTML

h1内に記述した「こんにちは!!」を赤文字に変えたい場合、下記のように表記します。

CSSのしくみ-セレクタ・プロパティ・値・宣言について

  • セレクタは宣言内に書いたスタイルを適用させたい場所を指します。
  • プロパティは変更したい内容を指します。(文字の大きさ、色など)
  • 値は変更する度合いを指します。(–px、–%など)

セレクタについて

セレクタは大まかに分けて、タグ・ID・classの3つに分類できます。

CSSについて-タグ・ID・classについて

タグはHTMLのタグのことです。そのタグがある場所すべてにスタイルが適用されます。IDとclassは自分で名前を決めることができます。IDは名前の前に#、classは名前の前に.(ピリオド)を入れます。上記のようにHTMLのタグにIDやclassを入れることも可能です。

IDとclassの違いについて

IDは1つのHTML内で同じ名前を1度しか使用できません。それに対してclassは1つのHTML内で何度も名前を使用することが出来ます。同じスタイルを何度も使用したい場合はclassを指定すると、同じ宣言を書かなくて済むので大変便利です。

1つのHTML内で1度しか使用できない名前を複数使用してしまった場合、一部のアクセス解析などで不具合を起こしてしまいます。ブラウザでサイトを閲覧する上ではID名が重複していても、サイトは問題なく表示されますが、リスクを考えて慎重に使うようにしましょう。

CSSのメリットとデメリット

メリット

  • HTMLの構造が把握しやすくなります。
  • デザインに関するデータを、HTMLに記述する必要がなくなります。
  • デザインを統一することができます。
  • デザインのみを変更する際は、CSSを書き換えるだけで、あらかじめ指定してあった箇所のみ変更内容を適用させる事ができます。

デメリット

CSSの使用には、1つだけデメリットがあります。現時点では、一般的なブラウザの中でCSSに完全対応しているものが存在せず、ブラウザによってレイアウトが崩れてしまうことがあります。

しかし、HTMLによる各要素の意味・情報構造とCSSによるスタイルの制御は分離されるため、コンテンツ部分が表示されないということはありません。

CSSとSEOの関係性

center、font、tableなどのタグを使用すれば、HTMLだけでウェブページの見栄えを整えることも出来ます。

HTMLで見栄えを整えた場合

しかし、HTMLだけで見栄えを整えようとしますと、上記のように物凄く長いソースコードになってしまいます。そこで使用するのがCSSです。CSSで装飾することで、下記のようにHTMLのソースコードが短くなります。

CSSを使用した場合のHTML

なぜ、HTMLのソースコードを簡潔にするかと言いますと、余分なHTMLのソースコードを省くことによって、検索エンジンが重要な文章や単語を拾いやすくなるからです。拾いやすくなるということは、拾った物が検索結果に反映されやすくなるということです。

もちろん、CSSを使用すれば大幅に検索順位が改善する、といった類の話ではありませんが、検索エンジンが適切に情報を処理することを助ける、という意味でも、CSSを使用することを推奨します。

Webサイトの運用でお困りではありませんか?

私たちが得意とするコンテンツマーケティングやSEOに限らず、Webの運営・改善に関する総合的な知見を持つ私たちなら、きっと御社の悩みを解決できると考えています。

サイト内検索

SEO・サイト運用・コンテンツマーケティングでお困りの際には ぜひお気軽にご相談ください

初級者から上級者まで幅広くコンテンツマーケティングの知識を学べるセミナーもございます

実務に役立つeBookが
無料でダウンロードできます

SEOやコンテンツマーケティングに
ご関心のある方はぜひご利用ください。

×