デザイン・コーディング

Webサイトのデザインに欠かせない!CSSの基本

Webサイトを制作するにあたって文書構造はHTMLでデザインはCSS、要素の動きはJavaScriptを用いるということはご存じかもしれません。
しかし、そもそもCSSとは一体何でしょうか。今一度、なぜデザインをCSSで行うのか、またCSSを用いるメリットなどを確認していきましょう。

CSSについて

目次

CSSの基本

CSSの概要や由来、誕生の理由や歴史、バージョンなどのCSSの基礎知識から見ていきましょう。

CSSとは?

CSSとはCascading Style Sheets(カスケーディングスタイルシート)の略です。 W3Cがスタイルシートは複数の定義方法があることから、「階段状の滝」を意味する「cascade」(カスケード)になぞらえて、CSSと名づけました。

Webサイトの基本的なテキストを形作るHTMLに対して、CSSは見た目を作る言語、つまりWebページのスタイルを指定するための言語で、複数の定義方法を持ちます。その複数のスタイルシートを定義する優先順位については後ほど紹介します。

CSSを用いれば、HTMLで記述した文字の色を変更したり、レイアウトを整理したりするだけでなく、テキストにマウスカーソルがあった時の背景色の変更などが可能です。さらに音声デバイスや点字デバイスに対応するなど、HTMLではできなかったことができるようになります。 サイトに装飾を施して、サイト全体のデザインを行う作業にCSSは欠かせません。

HTMLとCSSの役割分担

CSSはHTMLの機能拡張競争の時代に生まれました。当時は、本来文書の論理構造を構成するためのHTMLの機能に、Webサイトのスタイルを決定する機能が付け足されていました。 元来HTMLは文書の特定の部分にタイトルや見出し、著作者の情報などそれぞれの意味を定義するものです。ですが、スタイルを定義する機能に意味を割り振ることは困難なことでした。

そこで、スタイルシートと呼ばれる文書のスタイルを定義する機能が登場したのです。スタイルシートの導入によって、文書の論理構造を定義するHTMLと、文書の見栄えを定義するCSSに役割を分担することになりました。 役割分担をしたことで、HTMLでタグの意味に従ったコーディングが可能になり、スタイルについての機能はスタイルに特化して発達したことで、デザインの幅が大きく広がりました。

CSSの歴史

HTMLでのスタイル指定には限界があるという意見をもとに、スタイル指定と文書構造の設計を分けるためにCSSが作成されました。

CSSの最初のバージョンであるCSS1は、1994年に発足したW3Cによって1996年に勧告されました。その後は1998年にCSS2、2011年にはCSS2.1、そして現在は最新バージョンであるCSS3が、CSS2.1と区別された各モジュールに分けて別々に標準化されています。

CSSのバージョン

CSSの各バージョンについて詳しく紹介します。

①CSS1 (Cascading Style Sheets, level 1)

W3Cが勧告した最新バージョンです。フォント・色・背景色・余白・境界線など、主に見栄えを指定するプロパティが定義され、HTMLとの役割分担が開始しました。

②CSS2 (Cascading Style Sheets, level 2)

さまざまなメディアからアクセスされる場合を踏まえて、それらへの対応も視野に入れたバージョンです。動的コンテンツの生成や配置、表などのレイアウトに関するプロパティが加わりました。

③CSS2.1 (Cascading Style Sheets, leve2 Revision 1)

CSS2.1ではCSS2のエラー修正、一部のプロパティの削除、説明変更などがされました。

④CSS3 (Cascading Style Sheets, level3)

CSS2の次世代バージョンとして誕生しました。アニメーションや背景グラデーション、変形などの機能が追加されました。現在は各モジュールに分かれて管理されています。

カスケードとは?

先ほど、「cascade」(カスケード)はCSSの語源であると紹介しました。カスケードとはどのようなものなのか、ここで一度確認しましょう。
カスケードとは、広範囲定義されたスタイルを順番に引き継ぎながら、局地に定義されたスタイルを段階的に適応していく作業のことです。広範囲に定義されたスタイルから優先順位が決定していきます。

CSSは複数の定義方法がありますが、異なったスタイル定義が行われた場合は、定義した場所によって優先順位が決まっています。

スタイルの記述位置

CSSの記述位置は3つあります。

①Inline Styles (インラインスタイル)

HTMLのタグに直接スタイルを記述し、そのタグにのみ反映させることができます。
スタイルをテスト的に表示したい際によく用いられます。

②Document Level Style Sheets(ドキュメントスタイルシート)

HTML文書のhead要素内に、スタイルをまとめて記述することができます。複数ページあるうちの特定のページにだけ優先的に反映させたいスタイルがある場合に使用することがあります。

③External Style Sheets(エクスターナル:外部スタイルシート)

HTML文書以外にスタイル定義のみのファイル(スタイルファイル)を記述し、HTML文書内から参照してスタイルを指定する方法です。現在はこの方法がもっとも使用されています。理由としては更新のしやすさがあります。インラインスタイルの場合はその要素のみ、ドキュメントスタイルシートはそのページ内の要素のみにしかスタイルを適用しません。Webページが何百、何千ページとなった場合、1ページずつスタイルを変更していくのは非常に骨が折れます。

外部スタイルシートはHTML内でlinkタグを使用してスタイルシートと結びつけるだけで、そのスタイルシートに定義されているスタイルが反映されます。1つのスタイルシートのファイル内にあるスタイルを変更するだけで、linkタグでつながっているすべてのHTMLファイルの要素のスタイルを変更することができます。

このように現在は更新性を考えて外部のファイルにまとめてスタイルを管理することが一般的です。もちろん上述2つの方法と組み合わせることも可能です。

リンクの設定方法

外部スタイルシートの記述方法はlinkタグと@import(インポート)を使用する二つの方法に分けられます。今回はlinkタグを使用した記述方法を紹介します。

linkタグを使用することで、外部スタイルシートを読み込むことが可能です。リンキングスタイルシートとも呼ばれます。

スタイルシートの読み込みの記述は以下の2つを用います。

①rel=”stylesheet”
相手先のファイルのタイプをスタイルシートであると指定します。ちなみに、relはrelation(リレーション)の略です。

②href=”~”
ファイルのURLを記述します。

スタイルシートを複数リンクすることも可能です。複数のスタイルシートが矛盾する場合は、後に読み込まれたものが優先されます。

CSSでスタイルを指定するメリット

では、CSSのメリットはどのようなものでしょうか。
数多いCSSのメリットの中で特にHTMLから機能を分離させたことで生まれたものでは、以下の4点が挙げられます。

①HTMLのタグを正しく記述できる

デザイン性のみを重視したコーディングが主流であった時代は、どのようなデザインを行うかによってコードを記述していました。ですので、タグの意味に合ったコーディングというよりは希望のデザインに合わせたコーディングを行っていたのです。

デザイン優先のコーディングでは、情報構造が乱れた複雑なコードになり、検索エンジンに理解されにくくなってしまいます。
複雑で論理的でないコーディングは、誰かと共有しながらWebサイトの制作を行う場合にわかりにくくなってしまうのが問題点です。

しかしCSSを用いれば、タグの意味に沿ったコーディングが可能になり、人間にも機械にもわかりやすい文書となります。また、スタイルを割り付けることでHTMLではできなかったデザインも可能になりました。

②メンテナンス性を向上させることができる

HTMLとCSSの役割分担を行うことで、Webサイトのメンテナンス性を向上させることができます。一つのファイルでスタイルを変更するのではなく、複数のファイルをコピーして外部スタイルシートを作成し、リンクさせることで作業効率が上がります。

たとえばWebサイトのメンテナンスをする際には、一括指定や外部スタイルシートの読み込みによって、直接それぞれの要素のスタイルを指定する必要がなくなるので、作業量を軽減できます。

③HTMLドキュメントが軽量化できる

HTML文書からスタイルを分離したことで、スタイルを一括指定できるようになりました。HTMLを用いた記述では変更したい部分のコードを一つ一つ変えていく必要がありました。

ですが、CSSでは変更部分に共通するセレクタやクラスを記述するだけで、一気に変更を反映させることが可能です。
また、余分なコードが減ることで、Webサイトのページ表示にかかる時間が短縮されます。

さらに、外部スタイルシートを活用すると、修正作業が必要になった際にそれぞれの要素にスタイル指定を行う必要がありません。
CSSで修正部分のスタイルに関する情報の記述を担うことで、結果的にHTMLの中で記述されるコードの数が減ります。
HTML文書の全体量が減ることは、Webサイトのページの読み込みが早くなったり、操作が早くなったりすることにつながります。

CSSを用いたSEO対策

HTMLでなくCSSでWebサイト全体の構成を行うことで、直接SEO対策にもつながるというメリットがあります。
主な要因は以下の2点です。

①コーディングが正しく記述されている

1つ目は、HTMLとCSSの役割分担によって、HTMLの文書を正しく記述できるという点です。 正しいHTML記述とは、先ほどメリットとして挙げた、タグの意味に沿ったコーディングのことです。

マークアップ言語の役割分担は人間や機械だけでなく、検索エンジンにとってもわかりやすくなります。

そもそも検索エンジンは、収集したWebサイトの文書構造を解釈し、その解釈にしたがってそれぞれの要素の優先順位を付けて蓄積していきます。検索語を入力すると、サーバーは蓄積したデータとアルゴリズムによって解釈した順番にWebサイトを表示しています。
検索エンジンが解釈しやすい文書構成は、Webサイトの評価を上げるのです。
したがって、正しいHTMLの記述は検索エンジンにとって解釈しやすく、結果的にWebサイトの優先順位を高くするのでSEO対策につながります。

②ページの表示に時間がかからない

2つ目は、ページの表示時間が短縮されるという点です。検索エンジンの評価ポイントには、ページの表示時間の短さも含まれています。これも先ほどメリットとして挙げた一括指定や外部スタイルシートの利用が、メンテナンス性の向上だけでなくHTMLページの軽量化をもたらします。

ページの軽量化は前述の通りWebサイトのページの読み込みや操作を早くすることができます。

CSSのコーディング

実際にCSSのスタイル指定はどのように行われているのでしょうか。
たとえば、h1を赤色で表示するスタイルを指定する場合、以下のように記述します。

  1. h1 {
  2. color: red;
  3. }

CSSのコーディング方法は複数あり、HTMLとも異なる知識が必要になります。

実際にコーディングをするために不可欠なセレクタやプロパティの種類や記述方法の詳細は次の記事で紹介します。ぜひご覧ください。

まとめ

今回はCSSの概要からメリット、スタイルの記述について紹介しました。CSSの基本が一から見直せたでしょうか。コーディングのための詳細記事は後日掲載しますので、そちらも併せて読んでみてください。

Webサイト作成のための技術は、制作者の使い勝手がよくなるように日々進化しています。進化したさまざまな新しいツールに対応すれば、作業を効率よく進められます。
それだけでなく、新しい変化に対応しないことで競合他社に出し抜かれるなどのデメリットもあります。


WebMediaでは新しく勧告されたバージョンや終了したサービスに対する代替案についての記事を発信しています。Webサイト作成の参考にしてみてください。

また、Webサイトを立ち上げよう、リニューアルしようとは思うものの費用や人手、時間が足りないといったことはありませんか?
WebMediaを運営するITRAではお客様に真摯に向かい、ご要望に沿ったWebサイト制作やリニューアルを行ってきました。お気軽にお問い合わせください。

関連記事

この記事の著者

itra
ITRA株式会社

官公庁や大手企業を中心とした大規模なWebサイトを総合的にプロデュースするWeb制作会社。デザインからシステム、サーバーまでWebサイトに関わるお客様の悩みを解決します。