HTMLは文書の構造を定義しコンピュータに適切な情報を示すということが役割であり、デザインなどの見た目を記述するためのものではありません。そのためHTMLでマークアップしただけのWebページは必ずしも人にとって見やすく使いやすいものではありません。

HTMLでマークアップされたWebページにレイアウトや装飾を施して、ユーザー（人間）にとってわかりやすく操作しやすい快適なWebページにしなければなりません。その役割を担っているのが「CSS」です。
CSSはWebサイトを制作するうえでHTMLと同様に重要な技術です。ここではCSSの役割とできることについて理解しておきましょう。

CSSとは

CSSとは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略で、Webページのスタイルを指定するためのコンピュータ言語です。Webでは、CSSが広く普及しているので、単に「スタイルシート」呼ばれることもあります。

Webページは、HTMLとCSSを組み合わせて作られています。HTMLはWebページの情報のタグを使って意味や構造を定義するのに対し、CSSはWebページに装飾（デザインやレイアウトなどの見栄え）を施すのが役割です。マークアップされた要素に対して文字の種類・色・大きさ、背景色、配置などの見た目を指定していくといった仕組みになっています。

Note

CSSはスタイルシート言語のひとつなのですが、HTML文書にスタイルを適用する場合、CSSを利用することが広く普及したことで、単に「スタイルシート」といえばCSSを指すのが一般的になっています。

CSSの役割とできること

CSSにはHTMLとは違う明確な役割があります。

CSSの役割

HTMLでマークアップしただけのドキュメントをWebブラウザで表示してみると、ほとんど装飾されず背景が白色で文字色が黒色のシンプルな表現で、それぞれの要素は左上から順番に改行され縦に並んでいくだけで、必ずしも見やすく分かりやすいわけではありません。CSSは、人に対して、情報をより分かりやすく伝えたり、魅力的に見せるために、装飾やレイアウトを施しデザインしていくという重要な役割を担っているのです。

CSSでできること

CSSでできることは非常に多岐にわたります。
文字色・サイズ・背景色だけでなく、行間や文字間の調整など緻密な設定をすることができます。またレイアウトでは要素のサイズや余白などの設定や、様々な要素をブロックのように縦や横に並べ替えたり、あるいは自由な位置に固定するなど、柔軟な配置をすることもできます。

単なる装飾するということだけではなく、全てのHTMLに対し一括して見た目を指定したり、ページごとに特別なスタイルに変更したりするなど、たくさんページを装飾するための柔軟な仕組みを持っています。

また、ディスプレイサイズやデバイスに合わせて最適化することができ現在のWebページを表現するためのさまざまな機能があります。

現在CSSのバージョンはCSS3になり飛躍的に表現の幅が広がりました。装飾やレイアウトなどの静的な表現の自由度が上がっただけではなく、アニメーションなどにも対応しより高度な表現を行うことができるようなっています。しかし、その分かなり複雑な設定が必要になり、CSSの習得がより難しくなっている部分もあります。

CSSを使用するメリット

なぜHTMLとCSSは分離しなければならないのでしょう。 HTMLとCSSによって「構造」と「装飾」を分離することには多くのメリットがあるのです。

SEO効果やアクセシビリティ向上

HTMLにはWebページの見栄えを制御する仕組みがないわけではありませんが、Webページを装飾するためにHTMLを使うべきではありません。HTMLは情報構造を定義するための言語であり、見栄えの制御のために本来の役割とは違った使い方をすると、文書の情報構造がでたらめなのもになってしまうことがあるからです。

HTMLでは文書構造のみを定義して、表現部分をCSSが引き受けることで、HTML文書から見栄えに関する指定を分離することができ、構造を定義すること以外の無意味なコードを排除することができます。これによって、複雑なデザインをしつつも最適な文書構造を保つことが可能になります。

でたらめな文書構造ではコンピュータや検索エンジンに理解されず、せっかくの情報がうまく活用することができなくなってしまうことがあります。情報を適切なマークアップすることで検索エンジンに正しく解釈されるようになり、SEO効果だけでなくアクセシビリティ向上のも期待できるようになります。

メンテナンス性の向上

HTMLで見栄えを指定した場合、それを変更しようとすると、そのスタイルが使用されているすべての箇所を変更する必要があります。 CSSでスタイルを一括で管理することで、統一したスタイルを設定や一括変更などを容易に行うことができるようになります。
また、デザイン管理するCSSファイルを分離することで、複数のHTML文書でスタイルを共有したり、必要なスタイルのみを適用するなど管理しやすくなり、メンテナンス性が非常に向上します。

メディアごとのスタイル指定

CSSにはディスプレイや印刷、TVなど、様々なメディアごとに適用するスタイルを指定できるだけでなく、「CSSメディアクエリ（CSS Media Query）」といって出力メディアの条件によってもスタイルを変更できる機能があります。これによってより細かくそれぞれのメディアに適したスタイルでWebページを出力させることができるようになります。