CSS の全体像

CSSの概要と基本的な使い方について理解できたので、今度は言語自体の構造をもう少し詳しく見てみましょう。ここで説明した概念の多くはすでに目にしています。さらに先に進んでわかりにくい概念に出会ったとき、この記事に戻って見直してください。

前提条件:	基本的なコンピュータリテラシー、基本的なソフトウェアのインストール、基本的なファイル操作、 HTML の基本 ( HTML入門で学習)、基本的なCSSの動作
目的:	CSSの基本的な文法を身につける

HTMLにCSSを適用する方法

最初にドキュメントへCSSを適用する3つの方法を見ましょう。

外部スタイルシート

CSSを始めようモジュールで、私達のページに外部スタイルシートをリンクさせました。CSSをドキュメントに適用するとき、これが最も一般的で便利な方法です。外部スタイルシートを使うと、ひとつのCSSファイルを複数のページにリンクして、すべてのページで同じスタイルシートを利用できます。多くの場合、サイトの個々のページはおおむね同じような見た目をしています。各ページが同じCSSルールをつかうことで一貫性のある見た目や操作感（"look and feel"）を実現できます。

外部スタイルシートは、拡張子.cssをもつ個別のファイルにCSSをかき、HTMLの <link> 要素からこのCSSファイルを参照する方法です:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

CSS ファイルはこのようになります。:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

<link> 要素の href 属性で、ファイルシステム内にあるファイルのパスを指定する必要があります。

上の例ではCSSファイルをHTML文書と同じフォルダに置きましたが、ほかの場所に置くこともできます。その場合はCSSファイルを配置した場所にあわせてパスを適切に指定してください。つぎの例では現在のディレクトリ（カレントディレクトリ, current directory）を基準にしてパスを指定しています:

<!-- 現在のディレクトリの下に"styles"ディレクトリがあり、
     その下にCSSファイルがある場合 -->
<link rel="stylesheet" href="styles/style.css">

<!-- 現在のディレクトリの下に"styles"ディレクトリがあり、
     その下に"general"ディレクトリがあり、
     その下にスタイルシートがある場合 -->
<link rel="stylesheet" href="styles/general/style.css">

<!-- ひとつ上のディレクトリ("../")にうつり、
     その下に"styles"ディレクトリがあり、
     その下にスタイルシートがある場合 -->
<link rel="stylesheet" href="../styles/style.css">

内部スタイルシート

内部スタイルシートでは、HTML文書の外部にあるファイルの代わりに、HTML文書の <head> 要素の中にある <style> 要素をつかってCSSを記述します。

例えば、HTML はこのようになります。:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

内部スタイルシートは、例えばCSSファイルが直接修正できないCMSで作業する環境などでは役立ちますが、外部スタイルシートとくらべると非効率な方法です。WEBサイトの全てのページに同じCSSをくり返し書く必要があり、更新が必要となればこれらの箇所を逐一修正しなければなりません。

インラインスタイル

インラインスタイルは単一の要素だけに影響する CSS 宣言で、 style 属性に書きます。:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

どうしても使わざるをえない状況でなければ、インラインスタイルを使うのは避けてください！

この方法はコードのメンテナンスを非常に難しくします。複数のHTML文書ごとに、文書内の複数の箇所にわたって同じ内容を更新するはめに陥ります。

また、インラインスタイルをつかうとページの見た目をあらわすCSSの情報とページの構造をあらわすHTMLの情報とが同じコードのなかに混在します。その結果、コードを理解することが難しくなります。CSSとHTMLのように互いに異なる種類のコードを分離させておけば、コードにかかわるメンバーすべての負担が軽くなります。

もっとも、インラインスタイルを使うほうが一般的な状況や、そうする利点がある状況がないわけではありません。HTMLの本文のみ編集が許可されるCMSのような、きわめて制限された環境でスタイルを調整する場面はその一例です。そのほか、HTML形式のメールでもインラインスタイルが使われます。ここではできるだけ多くのメールクライアントで互換性を実現することが意図されています。

CSSを試してみる

記事のあちこちに、実際にブラウザ上でうごかせるCSSを用意しています。試してみるには、まずあなたのコンピュータ上にディレクトリ（フォルダ）を新しく作り、次の2つのファイルをこのディレクトリに保存してください:

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My CSS experiments</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body> 

    <p>Create your test HTML here</p>

  </body>
</html>

styles.css:

/* Create your test CSS here */

p {
  color: red;
}

次に、あなたが試したいいくつかのCSSに応じてHTMLファイルの <body> 要素のコンテンツを書き換えて、CSSファイルにもCSSを追加しましょう。

もし、簡単にファイルを作成できないシステム上にいる場合には、次のインタラクティブエディタを使ってコードを試してみましょう。

楽しみながら、先に進んでいきましょう。

セレクター

セレクターは、CSSに欠かせない構成要素です。CSSを始めようのチュートリアルでは、すでにさまざまな種類のセレクタを見てきましたね。セレクターは、HTML文書のなかでスタイルを適用する対象を指定するものです。もしあなたが指定したはずのスタイルが適用されなかったなら、あなたが意図したとおりの対象をセレクタで指定できていないのかもしれません。

それぞれの CSS ルールの先頭には、セレクターまたはセレクターのリストを書きます。これによって、ブラウザにどの要素にCSSルールを適用するかを指示します。次のコード例は、いずれも有効なセレクター、またはセレクターのリストです:

h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro

上のCSSセレクターを使ったCSSルールを作成し、HTMLのスタイルを設定しましょう。構文の意味がわからない場合、MDNで検索してみましょう!

情報: 次のモジュールの記事CSS セレクターで、より詳しくセレクターについて学ぶことができます。

詳細度

いくつかのセレクターが同じHTML要素を選択できることがよくあります。

次のスタイルシートには、パラグラフを青にするpセレクターと、選択された要素を赤にする.specialセレクターが書かれています。

.special {
  color: red;
}

p {
  color: blue;
}

ここで、specialクラスをもつパラグラフを含んだHTMLドキュメントについて考えてみましょう。p要素には両方のCSSルールが適用される可能性があります。さて、どちらのCSSルールが優先されるのでしょう？パラグラフはどちらの色になるでしょうか？

<p class="special">What color am I?</p>

ふたつのCSSルールの内容が競合した場合にどちらを優先するかを決めるために、CSSにはカスケード(cascade)、詳細度(specificity)という2種類の原則があります。

次のコード例では2組のCSSルールがpセレクタに対して宣言されています。このときp要素のコンテンツは青色になります。その理由は、青色を指定するCSSルールのほうがスタイルシート上であとに宣言されているためです。あとに宣言したスタイルがそれ以前に宣言したスタイルを上書きするのです。これがカスケードという原則です。

p {
  color: red;
}

p {
  color: blue;
}

ところが、先のブロックのセレクタがクラスセレクタ、あとのブロックが要素セレクタだった場合には、クラスセレクタに対する規則のほうが優先されます。要素セレクタより先に宣言されているにもかかわらずです。

競合したCSSルールを選択する文脈で、クラスセレクタは要素セレクタに比べてより詳細だ(more specific)、あるいはより高い詳細度(specificity)をもつとみなされます。そして、詳細度がより高いために、クラスセレクタが優先されたのです。

実際のコードでここまでの例を試してみましょう。

上で示したHTMLを自分のHTMLファイルに加えます。
CSSルールp {....}をスタイルシートに加えてブラウザで表示します。
先にあるpセレクタを.specialセレクタに書き換えます。表示されたスタイルをもとのものと比べてみましょう。

初めのうちは、詳細度やカスケードといった原則は少しとっつきにくいかもしれません。ですが、CSSについて理解が深まっていけばなじんでくるはずです。

次のモジュールにある記事カスケードと継承では、詳細度の計算方法を含めてさらにじっくりと説明します。

今の段階では、このようなルールがあるということ、より高い詳細度をもつものがスタイルシートのどこかにあってCSSが思った通りに適用されない場合があることを意識してみてください。ひとつの要素に複数のCSSルールが適用されていると明らかにすることが、このような問題を解決する第一歩です。

プロパティと値

CSSは2つの基本的な部品でできています:

プロパティ(Properties): スタイルに関して変更できる何らかの特徴をあらわす、人間が理解できる名前（識別子, identifiers）です。(e.g. font-size, width, background-color)
値(Values) : プロパティがあらわす特徴をどのように変えるかを指定する値です。(e.g. どのようなフォントを指定するか、HTML要素の幅をいくつにするか、背景色をどの色にするか)

次のコード例でハイライトされているのが、ひと組のプロパティとそれに対応する値です。この例では、プロパティの名前が color (コンテンツの色)、値が blue (青色)です。

A declaration highlighted in the CSS

プロパティ名と値の組をCSS 宣言(CSS declaration)とよび、CSS宣言はCSS宣言ブロック(CSS Declaration Blocks)のなかに入っています。

次のコード例ではCSSの宣言ブロックをハイライトしています。

A highlighted declaration block

そして、CSS宣言ブロックとセレクターとを組にしたものがCSSルールセット（CSS Rulesets または CSS Rules）です。

次の例には二つのCSSルールが含まれています。一つは h1 セレクターに対するもの、もう一つは p セレクターに対するものです。ここでは h1 のほうをハイライトしています。

The rule for h1 highlighted

CSSという言語の核となる機能は、CSSのプロパティを何らかの特定の値に設定することです。CSS言語を処理するエンジンは、どの要素にどのスタイルを設定するかを決定します。CSSでは、プロパティと値の両方とも大文字小文字を区別することに注意してください。プロパティと値の間にコロン(:)をおいて区切ります。

次のプロパティのそれぞれの値を確認して、それぞれのHTML要素に別のCSSルールが適用されるようなCSSルールを作成してください。:

重要: プロパティをCSSエンジンが理解できない場合、またはそのプロパティに妥当な値が指定されていない場合には、宣言は妥当ではないと考えられます。このとき、CSSエンジンはこのプロパティを完全に無視します。

重要: CSS (と他のWEBの標準)では、アメリカ綴りが標準となっています。他の綴りは意図した結果にならないことがあります。例えば、color は常に colorと綴りましょう。イギリス英語綴りの colour は動作しません。

関数

プロパティの値の多くは比較的シンプルなキーワードまたは数値ですが、なかには関数（functions）の形をとるものがあります。例えば、 calc() 関数は、CSS内で簡単な計算を行うことができます:

<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>

.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}

これは次のように表示されます。 :

関数をプロパティの値に指定するには、関数の名前につづけて丸カッコを書き、カッコの内側にその関数が受け付ける値を書きます。 calc() 関数は、上でみたように、外側のブロックの幅の90%から 30 ピクセルを引いた長さを返します。この幅をあらかじめ計算して具体的な数値をCSSに指定することはできませんし、実際にこの 90% という幅がいくつになるかは私たちには知るよしもありません。calc関数がとりうるすべての値、使い方、機能については対応するMDN内の記事に書かれています。

transformプロパティは、さまざまな値を取ることができます。そのひとつがrotate()という関数です:

<div class="box"></div>

.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn)
}

上のコードは下図を出力します。 :

次のプロパティの値をえらんで、いろいろを要素に適用するCSSルールを作成してみましょう:

transform
background-image （特に、<gradient>値を使ってみましょう）
color, 特に、rgb()、rgba()、hsl()、hsla()を使ってみましょう。

@rules

このチュートリアルで初めて登場するルールが、@rulesです（「アットルールズ」と発音します）。これはCSSの動作について指示を与える特殊なルールです。いくつかの @rules はルールの名前と値からなる単純なものです。例えば、メインのCSSスタイルシートに追加のスタイルシートの内容を取り込みたい（インポート, import）場合、 @import を使います:

@import 'styles2.css';

よく目にする@rulesに、@media があります。これはメディアクエリという機能を使って、指定した条件が満たされている場合に限ってCSS を適用できます。(例えば画面の解像度がある値より大きい場合や画面幅がある値より大きいといった条件を指定できます。)

次の CSS は、body 要素の背景色をピンク色に指定するスタイルシートです。しかし、その次に @media を使用して、ブラウザの表示幅が30emより広い場合にだけ適用されるスタイルシートのセクションを作成しています。もしブラウザが 30em より広い場合、背景色は青になります。

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

これ以外の@rulesについても、一連のチュートリアルを通じて目にすることになるでしょう。

表示幅に基づいてスタイルを変更するようなメディアクエリがどのようになるかを確認しましょう。今あなたが使用しているブラウザの表示幅を変えて表示がどのようになるか確認しましょう。

ショートハンド

font や background や padding や border それに margin のプロパティは ショートハンドプロパティ(shorthand properties) と呼ばれます。— これは一行に複数のプロパティの値を設定できるからであり、このプロセスであなたのコードの作成や作成時間を短縮できます。

例えば、この行を見てください:

/* padding, margin などのプロパティで4個の値をとる
   ショートハンドでは、上(top）、右（right）、下（bottom）、左（left）、と時計回りの順にプロパティが適用されます。
   ほかには、2個の値をとるショートハンドがあります。
   この場合は 上/下、左/右、の順になります。 */
padding: 10px 15px 15px 5px;

この行と同じ効果を出す、次のCSSを見てください。:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

また次の行を見てください。:

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

同様に上の行と同じ効果を出す、次の行と比べてみましょう。:

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;

ここで全てのショートハンドをお見せすることはしませんが、チュートリアルのなかでさまざまな例を見ていくことになります。CSSリファレンスをみて、ショートハンドプロパティを探してみましょう。

あなたのCSSに上の宣言を加えて、それがあなたのHTMLのスタイルにどのように影響するかを確認しましょう。いくつか値を変えて実験してみましょう。

注意: ショートハンドプロパティのなかには、値を省略できるものもあります。そのようなプロパティでは、省略した値は対応する初期値に設定されます。このことを利用して技巧的なCSSルールを作ることもできますが、ショートハンドを使って単にプロパティを指定するだけなら、かえってまぎらわしいだけでしょう。

HTMLを書くときと同じように、CSSを書くときにもコメントを入れることをおすすめします。そうすることで、あとからでも内容を思い出しやすくなります。また、ほかのひとがこのCSSに手を加える場合にも、機能を理解してもらいやすくなります。

CSSのコメントは/*ではじまり*/でおわります。下のコード例では、コードのまとまり(セクション section)どうしを明確に区別するためにコメントを使っています。このようにコメントを入れることで、コード量が大きくなってきたときにエディタの検索機能で特定の場所を探しやすくなります。

/* 共通のスタイル指定を表すセクション */
/* -------------------------------------------------------------------------------------------- */
body {
  font: 1em/150% Helvetica, Arial, sans-serif; 
  padding: 1em; 
  margin: 0 auto; 
  max-width: 33em;
}

@media (min-width: 70em) {
  /*特定の条件が満たされたときにかぎり適用する
    グローバルの文字サイズのルールセット。
    大きいスクリーンやウィンドウで文字サイズを大きくして読みやすさを改善します。*/
  body {
    font-size: 130%;
  }
}

h1 {font-size: 1.5em;}

/* 特定の子要素に対するスタイル指定を表すセクション  */
/* -------------------------------------------------------------------------------------------- */
div p, #id:first-line {
  background-color: red; 
  background-style: none
}

div p {
  margin: 0; 
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

コメントの便利な使い方のひとつに、一時的にコードの一部をコメントに入れて無効化するコメントアウト(commenting out)と呼ばれる方法があります。たとえば、何らかのエラーが発生したとき、コードのどの部分が原因かを見つけだすためにコメントアウトを利用します。次の例では、.specialセレクタに対するCSSルールをコメントアウトしています。

/*.special { 
  color: red; 
}*/

p { 
  color: blue; 
}

実際にあなたのCSSにもコメントを書きくわえてみて、使い慣れていきましょう。

空白

空白とは、CSSでは半角スペース、タブ文字、改行文字のことをさします。HTMLと同じように、ブラウザはCSSにふくまれる空白の多くを無視します。CSSに多くの空白が使われるのはコードの読みやすさのためだと言ってよいでしょう。

次のコード例の1つ目では、CSS規則の宣言、ブロックのはじまり（セレクタ、{）、ブロックの終わり（ } ）を1行ずつ使って書いています。これは、管理しやすく理解しやすい、好ましいCSSの書き方です:

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p,
#id:first-line {
  background-color: red;
  background-style: none
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

同じCSSを、空白のほとんどを取り除いて次のように書くこともできます。次の例は、機能の観点では1個目の例とまったく変わりありません。ですが、なんとなく読みづらいと感じるのではないでしょうか。:

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; background-style: none}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

基本的に、コードの形式をどう整えるかは個人の好みによるものです。いっぽうで、皆さんが他のひととチームを組んで開発に取り組むときには、チーム全員が理解してしたがっている独自のスタイルガイド（style guide）があるのを目にすることもあるでしょう。

CSSでの空白について注意すべき点があります。それは、プロパティ名、およびその値の区切りになる空白についてです。

例えば、次の例は正しい(valid）CSSです:

margin: 0 auto;
padding-left: 10px;

次の例は誤った（invalid）CSSです:

margin: 0auto;
padding- left: 10px;

0auto という書き方をブラウザは正しい値と解釈してくれません。なぜなら、margin プロパティの値 0、および auto はふたつの別々の値だからです。padding-もまた、ブラウザが認識できる正しいプロパティ名ではありません。

CSSのプロパティに対する複数の値どうしを区別するためには、最低でも1個以上の空白をあいだにおく必要があります。また、プロパティの名称や値のひとつひとつは、その一部分だけを切り離したりせず続けて書かなければなりません。

自分のCSSのなかで空白をさまざまに入れてみて、どうすればCSSが正しく機能して、どうすれば機能しなくなるかたしかめてみましょう。

次のステップ

ブラウザがHTMLやCSSを解釈してウェブページに作り替えていくながれを多少なりとも知っておくことは開発の役にたちます。そこで、次の記事「CSS はどう働くか？」では、ブラウザがWebページを生成する過程についてみていきましょう。

前のページ Overview: First steps 次のページ

このモジュール内

最終更新日: Jun 6, 2020, MDN 貢献者