CSSとは

CSSとは、Cascading Style Sheet(カスケーディング・スタイル・シート)の略で、HTMLと組み合わせて使用することで、Webページの色やサイズ、レイアウトなどのデザインを定義するための言語。単に「スタイルシート」と呼ばれることもある。

1996年に「CSS1」が勧告され、1998年に「CSS2」、さらに2011年には「CSS2.1」が勧告された。2011年6月以降はその次の規格として「CSS3」の策定が進んでいる。「CSS3」は単一の規格ではなく、仕様がモジュール単位で策定されており(例えば、「CSS Fonts Module Lavel」)、それらを総称してCSS3と呼ばれている。CSS3ではすでに勧告に至ったモジュールもあるが、まだ草案段階のモジュールもある。現在は並行して「CSS4」の策定が進んでいる。

スタイルシートが必要な理由

もしスタイルシートを使わずにHTMLだけでWebページを作ろうとすると、文字と画像が並んだだけの単調でバランスの悪いページになってしまう。HTMLでもレイアウトや色、フォントなど、ページの見栄えを指定してある程度整えることは可能である。しかしHTMLは本来、文書の論理的な構造をマークアップし、文書の持つ情報をコンピュータが読めるようにする言語だ。そこにデザインのために本来の役割とは違った情報を盛り込んでしまうと、ソースが長くなるとともに文書構造もおかしくなり、コンピューターや検索エンジンに理解されにくいHTMLになってしまう。これはコンピュータだけでなく、ユーザーやサイト管理者にとっても理解しにくいHTMLとなる。

またHTMLの要素をどのように表示するかは、ブラウザによって異なることもありHTMLでデザインを定義したとしても、ブラウザによっては意図した通りに表示されないことがある。HTMLはあくまでもWebページの基礎を作るための言語なのだ。そこで、デザインを定義するためにスタイルシートが必要となるのである。

HTMLとのつながり

HTMLの本来の目的は前述の通りだが、Webの発展に伴ってレイアウトや色、フォントなどページの見栄えまでをも指定するようになってきた。W3CはそうしたHTMLから本来の機能以外の部分を取り除き、HTMLでは文書構造を、そして見栄えについてはスタイルシートを利用するべきだという方針を打ち出した。

CSSの一般的な使われ方(ファイルの読まれ方等)

CSSをHTMLに適用する方法として一般的に使われているのが、外部スタイルシートを読み込む方法である。外部スタイルシートは、'.css'という拡張子がついたファイルのことで、これをHTMLの<head>内の<link>要素で参照する。
(記述例:<link rel="stylesheet" href="style.css">)

他にも、外部ファイルを使用せず、HTMLの<head>の中の<style>要素内にCSSを記述する内部スタイルシート方式や、HTMLの要素の中に直接CSSを記述するインラインスタイルがある。

CSSの書き方

  1. CSSを書くための基本構造と3つの要素

    CSSでは次の3つの要素を使う。

    • - セレクタ・・・「どこの」(スタイルシートを適用する対象)
    • - プロパティ・・・「何を」(適用する種類)
    • - 値・・・「どのように」(値)

    例えば、「pタグ」の「色」を「青」にしたい場合は、
    p { color: blue; }
    と記述します。

    上記の例で言えば、セレクタが「p」、プロパティが「color」、値が「blue」にあたる。
    もし色を赤にしたい場合は「blue」となっている部分を「red」と記述する。

  2. CSSの書き方

    プロパティと値は波括弧「{}」で囲う。またプロパティと値はコロン「:」で繋ぐ。また複数のプロパティを指定する場合は、セミコロン「;」で区切る。
    複数のプロパティをまとめて書く場合は、次のように改行して記述する。

    p {
    color: blue;
    font-size: 20px;}

    上記の例では、「p」タグの「色を青」にし、「フォントサイズを20px」にする。という内容になる。
    また複数のプロパティを指定する場合は、上記のようにコードの間に改行やタブを入れて、コードを見やすく並べるとよい。

セレクタの書き方

セレクタはスタイルシートを適用する対象を指定するものだが、色々な書き方がある。その中でもよく使われるのは以下の5つの書き方である。

  • タグ名で指定する(例: p{ })
  • id名で指定する(例: #id{ })
  • class名で指定する(例: .class{ })
  • 複数の適用先を指定する(例:div, #text-a, #text-b{ } )
  • 子孫セレクタを使用する(例:section, div, p{ } )

CSSのメリット・デメリット

CSSのメリット

  • HTMLの文書構造を把握しやすくなる
    本来HTMLは文書構造を定義するためのものであり、デザインをCSSに切り離して記述することで、HTMLに記述するタグの管理が容易になる。
  • ページの軽量化とメンテナンス性の向上
    CSSにスタイルを指定することによりHTMLは余分な記述がなくなって軽量化し読み込み速度の向上が期待される。
    また色やサイズなどのデザインを変更する場合は、HTMLを変更する必要はなく、CSSを書き換えるだけでデザインを変更することができる。
  • HTMLでは表現できなかったデザインが可能になる
    CSSではHTMLではできないデザインの表現が可能となり、より見栄えのよいデザインを実現することができる。
  • デバイスごとにデザインを指定することができる
    現在はPCやタブレット、スマートフォンなど形や大きさの異なるデバイスが多数存在する。CSSでは書くデバイスごとに適用するデザインを分けることができるので、それぞれのデバイスに合ったデザインを設定することができる。
  • SEO効果が期待できる
    HTMLに記述する内容を文書構造のみの適切な内容にすることによって、検索エンジンに正しく解釈されるウェブサイトとなり、SEO(検索エンジン最適化)効果が期待できる。

CSSのデメリット

  • ブラウザーによってCSSへの対応状況が異なる
    ブラウザーによってはサポートされないプロパティが存在する点が挙げられる。ただし現在広く使われている主要ブラウザーでは、よく使われるCSS3のプロパティーの多くが実装可能となっている。

関連ワード