CSSとはWEBページのデザイン装飾を指定するための言語です。HTMLで記述した文書や画像のスタイルを指定するために使用します。

CSSはWEBページのデザインに関わる言語です。しかし、WEBデザイン業務の担当者だけに求められる知識ではありません。特にマーケティングに携わる場合は、CSSの基本の知識を持っておくべきです。CSSはWEBサイトのSEO効果に直接的に影響するわけではないものの、間接的に関係しています。

そこで今回はWEBサイトにおけるCSSの役割とCSSの記述方法、使用上の注意点をご説明します。

CSSとは

CSSとはCascading Style Sheetsの略です。CSSはHTML（Hyper Text Markup Language）で作られたWEBページのデザイン部分にスタイルを適用するために用います。デザイン性の高いWEBページを作成するために、CSSの導入は欠かせません。

CSSのCascadingは階段状の滝のように連結した構造を意味します。上流で指定したスタイルが段階的に引き継がれて文書に適用されるのがCSSの特徴です。

CSSを使うと、WEBサイトに次のようなデザインを施すことができます。

CSSを使えば、例えばWEBページのなかで際立たせたい部分の文字色やサイズを変更できます。強調したい箇所に下線やアニメーションといったデザインを加えることも可能です。また表や画像の位置を変更してユーザーに見やすいレイアウトに変えたり、テキスト間の余白を調整して読みやすくすることも可能です。

CSSはWEBサイトの見栄えを整えることで、ユーザビリティの向上に貢献します。

HTMLとは

HTMLはコンピューターが用いる言語の1つです。すべてのWEBサイトがHTMLで作成されています。WEBサイトを作成するにあたって、コンピュータとコミュニケーションをとるための言語がHTMLです。

例えば、構成パーツをどこに配置するか、それぞれのパーツにどういった役割を持たせるか、といった内容をHTMLを用いてコンピューターに伝えます。

HTMLとCSSの違い

HTMLはWEBサイトの基盤をなす言語です。一方のCSSはWEBサイトにおける視覚効果を担います。HTMLとCSSの関係は、人間の体と衣服に例えられます。

HTMLだけで構成されたWEBサイトは、白い背景に黒い文字や青文字のリンクが書かれただけのシンプルなものです。画像も縦に並んだ状態で表示されるに留まります。

HTMLだけで作成されたWEBサイトでも、最低限の情報を伝達することはできます。しかしあまりにも文字と画像を羅列しただけのWEBページでは、ユーザーが熟読しないと何を伝えているサイトであるかは伝わりません。

HTMLで作成したWEBサイトにCSSが加わると、色彩が加わるほか、表示される内容の位置やサイズの調整、強調といった装飾が可能です。WEBサイトに独自性と華やさが加わります。どのような情報が掲載されたサイトなのかを、端的にユーザーに伝達することも可能です。

HTMLなしにWEBサイトは作成できません。しかしHTMLだけでは訴求効果に欠けます。そこでWEBサイトの土台に装飾を加えるのがCSSの役割です。HTMLとCSSの相乗効果によって訴求力がありユーザビリティの高いWEBサイトが成立します。

CSSを使用するメリット

CSSでスタイル指定するとWEBサイトの見栄えをよくするほか、デザインだけを一括で管理できることによるさまざまなメリットが期待できます。

文書構造を保てる

CSSを記述する場合はHTMLファイルとは別にファイルを作成するのが一般的です。これによってHTMLタグとCSSの指示が一つのファイルに混在する事態を避け、文章構造に影響を与えずにスタイル制御できます。

修正や変更を加えるのが容易になるほか、複数人でファイルを管理する際の視認性も高まります。

デザインを一括変更できる

CSSではWEBサイト全体のデザインを一括管理できます。複数のHTML文書を1つのCSSで管理できるため、デザインのメンテナンスをおこなう際も容易です。

HTMLでデザイン管理している場合は、それぞれのHTML文書に対してメンテナンスをおこなわなければなりません。ページが増えるほどメンテナンスの手間がかかります。

WEBサイトの管理を効率化する意味でCSSは有益です。

HTMLではできない装飾にも対応

CSSを使えば、HTMLではできないデザイン装飾も可能です。

例えば、コンピュータの操作画面でマウスカーソルを対象物に重ねたり場合にテキストの色や大きさを変えるデザインは、HTMLではできません。しかしCSSを活用すれば可能です。

HTMLを編集するだけではできないデザインを実現できるのはCSSのメリットです。

メディアごとにスタイル指定可能

CSSでは端末にあわせて表示スタイルを変更できます。

パソコンや携帯端末といったユーザーが使用する端末ごとに最適な表示サイズは異なります。CSSではそれぞれの環境に適したスタイルを作成、使いわけることが可能です。

CSS使用時の注意点

CSSでは使用に際して注意すべき点が2つあります。

CSSに完全に対応するブラウザがない

一般的なブラウザのなかでCSSに完全に対応しているものが存在しません。

HTMLによる文書の定義とCSSによるスタイル制御は分離されるため、ブラウザに文書内容がまったく表示されないということはありません。ただブラウザによってCSSへの対応状況はまちまちです。CSSを記述したら、念のためにGoogle Chrome、Firefox、Safari、Edgeなどのさまざまなブラウザで表示をチェックしてください。

SEO項目の記述

CSSの記述自体がSEOの評価に影響することはありません。しかしCSSの記述方法によっては、検索エンジンからの低評価に繋がる可能性があるので注意しなければなりません。

CSSはHTMLをデザインするために使用する言語です。しかし装飾だけを目的に複雑な書き方をすると、表示速度が遅くなることがあります。表示速度の遅延はユーザーの利便性を低下させ、ひいてはSEOの評価に影響します。

特に注意すべきはスマートフォンサイトの表示速度です。2016年にMFI（モバイルファーストインデックス）が導入されて以降、ユーザーの利便性を最優先する目的でスマートフォン端末での表示速度はSEOにおいて重要な意味を持ちます。

Googleが一貫して推奨しているのは、簡素でシンプルな記述です。WEBページの表示速度が遅い場合は、Googleがガイドラインで示す理想的なCSSの書き方 を参照しながら、SEOの記述を修正してください。

CSSファイルを書く場所

CSSを書く場所は3箇所あります。

外部ファイル

CSSファイルはファイル名の拡張子に.cssをつけることで簡単に作成できます。

テキストエディタやメモ帳で新規フォルダを作成したら、フォルダ名の最後に.cssと記入してください。ファイルの文字コードはUTF-8を指定して保存すると完了です。

CSSのデザインレイアウトを反映する際は、HTMLファイルにCSSファイルのURLを指定して読み込ませます。

メンテナンス性の高さと複数のHTMLファイルで共通してCSSを活用できる利便性の高さから、ほとんどのWEBサイトで採用されているのがこの方法です。

拡張子とは

拡張子はファイルの種類をコンピュータが判別するために使用する文字列です。.cssをファイルの末尾につけることで、CSSファイルであることをコンピュータに認識させることができます。

拡張子にはWordファイルの.docxやExcelの.xlsx、画像ファイルの.jpgといったものがあります。

文字コード

文字コードはエンコードのことです。文字をコンピュータで処理しやすいように、それぞれの文字に認識番号を割り振ったものをさします。

HTMLとCSSのファイルではUTF-8という文字コードを使用するのが一般的です。UTF-8のほかにはJISやShift_JIS、EUC、Unicodeといった文字コードもあります。

style要素の中

HTMLファイル内にstyle要素を書き、その中にCSSを記述することができます。

CSSを記述したHTMLファイルのみにデザイン効果が発揮されるため、特定のHTMLファイルのみにデザインを反映させたい場合や、CSSのデザイン効果を確認するために使用する方法です。

HTMLタグの中

HTMLの中にstyle=” “と記述して、そこに直接CSSを記述する方法です。特定のページを高速化する目的で使用します。

WordPressのソースコードの冒頭にインラインで書き込まれることがありますが、デザイン装飾というCSSの機能のために用いる方法ではありません。

CSSの基本要素

CSSの基本文法を構成するのは次の3つです。

セレクタは要素、プロパティは何を、値はどのように、命令するかを指定できます。

例えばp要素の色を青くするスタイルを指定したい場合は、以下のように記述します。

p {color: blue; }

この場合pがセレクタ、colorがプロパティ、blueが値に該当します。

セレクタ

セレクタとは、CSSで指定したデザインをどの部分に適用するかを決めるものです。セレクタで指定すると、その部分だけ限定して見た目を変更することができます。

カンマで区切って併記することで、複数のセレクタに同じスタイルを適用することも可能です。

セレクタの一例には次のようなものがあります。

アクタリスクはページ全体にCSSプロパティを適用したい場合に使用するセレクタです。.classでは、1つのクラスを1ページで何回も使用できます。一方のアイディセレクタは、1ページにつき1回しか使用できません。そのためアイディセレクタはヘッダーやフッターなどで使用します。

プロパティ

プロパティでは適用するスタイルの種類を意味します。数多く存在するプロパティを使いわけることで、さまざまなデザインが実現可能です。

プロパティの一例には以下のようなものがあります。

値

具体的に何をしたいかを指定するのが値です。文字の色の変更や、横幅を何pxにするといった指定ができます。

例えばp要素の色を赤にしたい場合は、このように記述します。

p {color: red; }

またh1タグを20ピクセルに指定したい場合は、次のように設定してください。

h1 {font-size:  20px; }

値はプロパティのあとに : （コロン）を書いてから記述します。コロンが抜けると動作しないので注意してください。またCSSコードを見やすくする目的で、コロンの前後に半角スペースを入れることがあります。スタイルを適用したいプロパティが複数ある場合は、値の最後に ; （セミコロン）を記述して区切ってください。

CSSを書くときの注意点

CSSは細部まで正確に記載されていないと、適用されないことがあります。半角と全角の違いや微細な記号の誤りでもエラーが発生するため、慎重に入力してください。

半角で入力する

CSSでは全角は認識されません。コンピュータの認識では、全角と半角は異なるため、入力の際は注意してください。全角はエラーの原因になります。

プロパティと値は{}（波カッコ）で囲む

{} （波カッコ）の中には表示させたい内容を複数書くことができます。しかし、波カッコの前後いずれかが欠けてもエラーを起こし、適切に表示されません。特に閉じる波カッコを忘れないように注意してください。

値の最後には ; （セミコロン）

CSSでは ; （セミコロン）を値の最後に記述します。セミコロンは定義の終了を宣言する記号です。セミコロンがないと定義が続いているとコンピュータは認識します。

CSSの優先順位

CSSには優先的に反映される順位があります。CSSを記載する場所の優先順位の影響や、複数箇所で同じスタイルを指定したことが理由で、意図したとおりにデザインが反映されない事態を引き起こすことも珍しくありません。

ユーザーが閲覧するブラウザの設定が最も優先されます。それに次いでCSS内に!importantが書かれている場合です。!importantは最優先で使用することを命令するために使用します。

idやclassセレクタも優先順位が高く、スタイルが重複している場合はあとから読み込まれたスタイルが優先されます。

CSSを外部ファイル、style要素のなか、HTMLタグのなかに同時に書いたと仮定すると、最も優先されるのはHTMLタグのなかにCSSを書いた場合です。外部ファイル、style要素のなかの優先順位は同率ですが、あとに読み込んだ方の優先順位が高くなります。

正しく記載したにもかかわらずCSSが反映されない場合は、優先順位による影響を疑って記載内容を再確認してください。

まとめ

CSSはHTMLと組み合わせて使用することでWEBサイトの見栄えをよくし、ユーザビリティを高めるツールです。すべてのWEBサイトがHTMLで作られているため、HTMLを装飾するCSSの基本的な知識は、WEBサイト構築の担当者以外も身につけて損はありません。CSSのプロパティは数百種類あると言われており、0からHTMLとCSSを駆使してWEBサイトの構築をするにはハードルが高すぎるきらいがあります。しかし、CSSの基本的なルールを理解していれば、クライアントやWEBサイト構築のパートナーとのコミュニケーションにおいて有用です。WordPressのようなCMSを使用する際にも活用できます。ユーザビリティが高くSEOの評価にも繋がるWEBサイト構築の一助として、HTMLとCSSの知識も積極的にインプットしてください。

SEOとWEBマーケティングの東京SEOメーカーTOPへ戻る

この記事の監修者

上級SEOコンサルタント　坂口　直樹

新潟大学大学院を卒業後、事業会社で10年働く間にSEOに出会う。自身でサイトを多数立ち上げ、実験と検証を繰り返しながらSEOを研究。お金に変えることを目的とはせず、ユーザーに何が有益かを問い続け改良を繰り返すうち、「インターネット上の真実ではない情報を正してユーザーのためになる情報を発信する」という天啓を得る。現在は東京SEOメーカーの上級SEOアドバイザーとしてアサイン。