CSSとは何か?

このロケールの翻訳が存在しないため、英語バージョンのコンテンツを表示しています。 Help us translate this article!

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> 要素の文字を大きく、赤くしたい」といったようにです。

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

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

ブラウザーサポート

一度CSSが指定されると、1つ以上のブラウザーがCSSを実装している場合にのみWebページの開発に役立ちます。これはコードが 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 完全対応 あり
system-ui
実験的
Chrome 完全対応 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