CSSとは何か?

CSS (Cascading Style Sheets;カスケーティングスタイルシート) は見栄えのよいページを作ることができますが、内部ではどう働くのでしょうか?この記事では簡単な構文の例とともに CSS とは何かについて説明し、この言語の重要な用語についても触れます。

前提条件:

基本的なコンピューターリテラシー、 基本的なソフトウェアがインストールされていることファイルの操作方法についての基本的な知識、HTML の基本 (HTML概論を学習のこと)。

目的: CSS とは何かを学ぶ。

HTML 概論 では HTML について触れ、文書をどのようにマークアップするかを学びました。この文書はウェブブラウザーで読むことができます。見出しは普通のテキストより大きく見え、段落はあたらしい行に分けられ、それらの間には空白が入ります。リンクはほかのテキストと区別するために色付きで下線が引かれています。これらはブラウザーによるデフォルトのスタイリングです。ページの作者がスタイリングしていなくても読みやすくなるようにブラウザーが HTML に適用するとても基本的なスタイルです。

The default styles used by a browser

しかし、ウェブサイトみんながこのような見た目では退屈でしょう。CSS をつかうとブラウザー内で HTML 要素をどう見せるかはっきりと制御できるようになり、マークアップを好きなように表現できます。

CSS の目的

前述のように、CSS は文書を(スタイルやレイアウトを)どのように表現するか指定する言語です。

文書 は普通、マークアップ言語をつかって構造化されたテキストファイルです。HTML がもっとも一般的な マークアップ言語ですが、SVG や XMLも出会うことがあります。

文書を 表現する とは、それを使いやすいフォームに変換することを意味します。Firefox, Chrome, あるいは Edge といったブラウザー はコンピューター画面やプロジェクター、あるいはプリンタで印刷される文書が視覚的に表現されるよう設計されています。

: ブラウザーは時にuser agent ユーザーエージェント と呼ばれますが、基本的に人に似せたコンピュータープログラムを意味します。CSS について語る時、ブラウザーは代表的なユーザーエージェントですが、それだけではありません。HTML と CSS 文書を印刷できる PDF に変換するようなユーザーエージェントもあります。

CSS は、例えば見出しやリンクの フォントサイズの変更といったごく基本的なテキストのスタイリングでもつかえます。例えば、一列のテキストをレイアウトしてメインコンテンツ領域と関連情報のためのサイドバーに分けるといった、レイアウト作成に使うこともできます。アニメーションのような効果も使えます。それぞれの例はこの段落のリンクをご覧ください。

CSS の構文

CSS はルールベースの言語です。ウェブページ上の特定の要素かグループに適用するスタイリングのルールを定義します。例えば、「ページ上の <h1> 要素の文字を大きく、赤くしたい」といったようにです。

これを実現するコードはとても簡単な CSS ルールです:

h1 {
    color: red;
    font-size: 5em;
}

ルールは セレクタ から始まります。ここにはこれからスタイリングしようとする HTML 要素を選びます。この例では <h1> を選んでいます。

つぎに波カッコ { } を書き、この中にプロパティプロパティ値 のペアで作られた 宣言 を 1 つ以上置きます。それぞれのペアは選んだ要素のプロパティとそれに与えたいプロパティ値を特定します。

コロン : の前にプロパティを書き、コロンの後にプロパティ値を書きます。CSS プロパティ は特定されたプロパティによって異なる許容値を持ちます。例えば、color プロパティは様々な color 値を持っています。font-size プロパティもあります。このプロパティは値として様々な size 単位 を持っています。

CSS スタイルシートはたくさんのルールを含みます。

h1 {
    color: red;
    font-size: 5em;
}

p {
    color: black;
}

ほかにどんな値があるか調べる必要があることに気づくでしょう。 MDN のプロパティのページをつかえば、忘れた時やほかにどんな値が使えるか知りたいときにすばやく調べられます。

: CSS リファレンスにすべての CSS プロパティのリストがあります。CSS の機能についてもっとたくさんの情報を見つける必要があるときには、検索エンジンで "mdn css-feature-name" と調べることに慣れても良いでしょう。 例えば、"mdn color" や "mdn font-size" を試してみてください!

CSS モジュール

CSSを使ってスタイリングできることがたくさんあるので、CSS は モジュール にまとめられています。 MDN を探せばこれらモジュールのリファレンスが見つかるでしょうし、多くのページは特定のモジュールで編集されていることがわかります。例えば、その目的やプロパティと機能の違いを見つけるために背景と境界 モジュールを見ることができます。(後述で) CSS 技術を定義する仕様へのリンクもあります。

CSS がどのように作られているか、ここではあまり心配する必要はありませんが、もし例えば、特定のプロパティが似たものの中で見つかる可能性があることを知っていれば、情報は見つけやすくなります。

たとえば、背景と境界モジュールに戻ってみましょう。background-color と border-color プロパティがこのモジュール内で定義されているのは理にかなっていると思うかもしれませんし、実際そうなっています。

CSS の仕様

(HTML, CSS, JavaScript といった) ウェブの標準技術はすべて、仕様 (または単に 「スペック」)とよばれる文書で定義されており、(W3C, WHATWG, ECMA, or Khronos といった) 標準化組織によって発行され、技術がどう働くか定義しています。

CSS は W3C 内の CSS Working Group と呼ばれるグループにより開発されました。このグループは、CSS に関心のあるブラウザーベンダーやその他の企業の代表者で構成されています。またメンバー組織とつながらず、独立した声として行動する invited experts もいます。 

新しい CSS の機能は、CSS ワーキンググループにより開発され、仕様化されています。 特定のブラウザーが実験的に機能を実装させることもありますし、ウェブデザイナーやデベロッパーが要望することもありますし、ワーキンググループ自体が要件を固めることもあります。CSS は絶えず開発されており、新しい機能が利用可能になります。しかし重要なのは、古いウェブサイトが決して壊れてしまわないように、全員が努力していることです。2000年に作られたウェブサイトは限られた CSS 機能しか使えませんが、最新のブラウザーでも見えるようになっているべきなのです。

CSS の初心者としては、CSS仕様が圧倒的であることに気付くでしょう。これらは、ウェブ開発者が CSS を理解するために読むのではなく、エンジニアがユーザーエージェント機能のサポートを実装するために使用するのを想定しています。経験豊富な開発者の多くは、MDN ドキュメントや他のチュートリアルを参照します。ただし、それらが存在することを知り、使っている CSS やブラウザーによるサポート(以下を参照)、および仕様間の関係を理解することは価値があります。

ブラウザーサポート

一度CSS が指定されると、1 つ以上のブラウザーが CSS を実装している場合にのみウェブページの開発に役立ちます。これはコードが CSS ファイルの命令を画面に表示できるように記述されることを意味します。これは CSS がどう働くかのレッスンで見ることになるでしょう。すべてのブラウザーで同時にある機能が実装されることは通常はありませんし、それゆえ通常、一部のブラウザーでは CSS の一部を使用でき、他のブラウザーでは使用できないというギャップがあります。こういったわけで、どういった機能が実装されているか確認できることは有益です。MDN のそれぞれのページでは、関心のあるプロパティの状態が確認できるので、ウェブサイト上でそれが使えるか見極めることができます。

以下は CSS の font-family プロパティについての互換データです。

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
font-familyChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1
補足
完全対応 1
補足
補足 Not supported on option elements. See bug 1536148.
IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
system-uiChrome 完全対応 56Edge 未対応 なしFirefox 未対応 なし
未対応 なし
完全対応 43
補足 代替名
補足 Supported on macOS only.
代替名 非標準の名前 -apple-system を使用しています。
IE 未対応 なしOpera 完全対応 43Safari 完全対応 9
補足 代替名
完全対応 9
補足 代替名
補足 Supported since macOS 10.11.
代替名 非標準の名前 -apple-system を使用しています。
WebView Android 完全対応 56Chrome Android 完全対応 56Firefox Android 未対応 なしOpera Android 完全対応 43Safari iOS 完全対応 9
代替名
完全対応 9
代替名
代替名 非標準の名前 -apple-system を使用しています。
Samsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
非標準の名前を使用しています。
非標準の名前を使用しています。

次のステップ

CSS とは何かについていくらか理解したと思いますので、CSS 入門 に進みましょう。ここでは自分で CSS を書き始められます。

このモジュール内

  1. What is CSS?
  2. Getting started with CSS
  3. How CSS is structured
  4. How CSS works
  5. Using your new knowledge