CSSとは?CSSの仕組みとSEOへの影響

CSSとは?CSSの仕組みとSEOへの影響

CSSとは

CSSとはカスケーディング・スタイル・シートの略で、HTMLと組み合わせて使用する言語です。HTMLで各要素の意味や情報構造を定義し、CSSでそれらのレイアウトやデザインを定義し、組み合わせてWebページが表示されます。
HTMLは元々それ自体で文書の装飾・デザインを行うことができますが、コンテンツとデザインが一つのファイルで定義されているよりも、別々に定義されている方が簡単に管理できるため、現在はHTMLとCSSの組み合わせでWebページを構築するのが一般的です。

cssについて

たとえばHTMLにもcenter、font、tableなどレイアウトを整えるのためのタグは存在しており、下記のようなマークアップは可能です。

HTMLで見栄えを整えた場合

しかしデザインの定義をCSSで行うことで、HTML自体の記述は下記まで簡素化できます。

CSSを使用した場合のHTML

\プロのノウハウを詰め込みました!資料ダウンロードはこちらから/

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はすでに多くのブラウザがサポートしていますが、ブラウザによって表示が微妙に変わってしまったり、古いブラウザでは対応しておらずデザインが施されないといったケースがあります。もっともGooglebotのシミュレート環境では問題なく対応しているため、SEO上の問題が生じることはありません。

CSSとSEOの関係性

基本的にCSSを導入することによるSEO上の影響はほぼありません

HTMLの記述がより簡素になることで、検索エンジンが適切にコンテンツの内容を理解することの一助にはなりえますが、ソースコードが洗練されているかどうかはページを訪問したユーザーの体験には影響しません。そのためCSSをどう使うかという場面において、SEO上の特別な注意を払う必要はありません。

ページの読み込み速度を改善するにあたって、不要なCSSを削除したり、複数のCSSを1ファイルにまとめるといった施策を行うことはありえますが、これについてもSEOというよりはユーザー体験(UX)の改善を主目的として行う方が妥当です。

また、ナイルではSEOについてまとめた資料をご用意しております。SEOについて把握したいなら、まずはこの3点の資料をご覧ください。

  • SEO成功事例・法則資料
  • SEO1問1答 全30問
  • SEO内製化 (インハウスSEO) 進め方ロードマップ

具体的な内容については、ダウンロードの上、ご確認ください。

編集者情報

金子 光
金子 光(かねこ ひかる)
新卒で楽天グループ株式会社に入社。
営業管理として40人規模のチームをマネジメント。その後社員3人のベンチャー企業に入社し新規事業立ち上げを経験。
現在はナイルのマーケティング相談室編集長として、Webマーケティングに従事している。
無料相談はこちらから

監修者情報

ナイル編集部
ナイル編集部

2007年に創業し、約15年間で累計2,000社以上の会社にマーケティング支援を行う。また、会社としても様々な本を出版しており、業界へのノウハウ浸透に貢献している。(実績・事例はこちら

PIVOTにもスポンサード出演しました!

PIVOTにもスポンサード出演しました!
チャンネル登録者数が100万人を超えるYoutubeチャンネルPIVOTにスポンサード出演しました!
動画内では、マーケティング組織立ち上げのための新しい手段についてお話しています。
マーケティング組織に課題がある方はぜひご覧下さい。
動画を見る

関連記事

サブドメインとは?知っておくべき基礎知識から取得方法まで解説

サブドメインとは?知っておくべき基礎知識から取得方法まで解説

制作会社を考え直すポイント

【対談】こんなコンテンツ制作会社は要注意!付き合い方を考え直す6つのポイント

アイキャッチ

【事例】構造化データ「よくある質問」実装による順位・クリック数・セッション数などの改善事例

新着記事

動画で学ぶWebマーケティング【生成AI/ChatGPT編】

動画で学ぶWebマーケティング【生成AI/ChatGPT編】

サードパーティCookie廃止に伴う広告予算動向

【サードパーティCookie廃止に伴う広告予算の動向調査】

動画で学ぶGA4

動画で学ぶWebマーケティング【Googleアナリティクス4/サイト分析編】

もっと効果的な集客施策
してみませんか?

Web戦略の情報を
定期的に受け取りたい方

取材・メディア掲載に関するお問い合わせは、こちらからお問い合わせください。