次に、CSS の構文について詳しく説明します。プロパティとそれらの値からどのように宣言 (Declaration) を作るか、複数の宣言からどのように宣言ブロック (Declaration blocks) を作るか、そして宣言ブロックとセレクターからどのように CSS 規則を完成するかを学びます。また補足として、コメントや空白などの他の CSS 構文の機能についても学びます。

前提条件: 基本的なコンピューターリテラシー、インストールされている基本的なソフトウェアファイルを扱う上での基本的な知識、 HTML の基本 (HTML の概要を学習)、そして CSS の仕組みについての考え。
目的: CSS の基本的な構文構造を詳しく学ぶこと。

メモ: CSS は宣言型言語であるため、構文はかなり簡単で分かりやすくなっています。さらに、間違いがあっても全体が壊れることがないとても素晴らしいエラーリカバリシステムもあります - 例えば解釈できない宣言は通常だと単に無視されます。欠点は、どこからエラーが発生しているのかを理解するのが難しいことです。読んでください、そうすればすべては結局明らかになるでしょう。

用語説明

最も基本的なレベルでは、 CSS は2つの要素で構成されています。

  • プロパティ (Properties): どのスタイルの機能 (フォント、幅、背景色など) を変更したいかを示す、人間が判読できる識別子
  • (Values): それぞれの指定されたプロパティに与えられた値で、スタイルの特徴をどのように変更したいかを示します (例えば、フォント、幅、背景色などを何に変更したいか)。

値を含むプロパティを CSS 宣言 (CSS declaration) と呼びます。 CSS 宣言は、 CSS 宣言ブロック (CSS declaration blocks) 内に含まれます。 CSS 宣言ブロックとセレクター (selectors) をペアにしたものが CSS 規則セット (CSS Rulesets) (または CSS 規則 (CSS Rules) になります。

理論的に深く説明する前に、具体例を見てみましょう (以前の記事で見たのと良く似ていますね)。

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

    <ul>
      <li>This is</li>
      <li>a list</li>
    </ul>
  </body>
</html>

CSS ファイル:

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

p {
  color: red;
}

p, li {
  text-decoration: underline;
}

これらを組み合わせた結果、次のようになります:

構文を詳しく見ていきましょう。

CSS 宣言

CSS プロパティを特定の値に設定することは、 CSS 言語の中心的な機能です。 CSS エンジンは、適切にレイアウトしてスタイルを設定するために、ページの各要素にどの宣言が適用されるかを計算します。覚えておくべき重要なことは、 CSS ではプロパティと値の両方が大文字と小文字を区別することです。各ペアのプロパティと値はコロン (:) で区切ります。

CSS には300を超えるさまざまなプロパティと、ほぼ無限の数のさまざまな値があります。すべてのプロパティと値のペアが許可されているわけではありません。各プロパティには、定義されている特定の有効な値のリストがあります。

重要: プロパティが不明な場合、または特定のプロパティに対して値が有効でない場合、宣言は無効と見なされ、ブラウザの CSS エンジンは完全に無視します。

重要: CSS (および他のウェブ標準) では、綴りの曖昧さが発生する場所では米国の綴りが標準として合意されています。例えば、 color は常に color のように入力します。 colour は機能しません。

アクティブラーニング: 宣言を見抜く

上の例では、5つの別々の CSS 宣言があります。無効な (誤ったまたは間違った) 宣言を識別し、それがなぜ無効なのかを解明できますか。

CSS 宣言ブロック

宣言はブロックでグループ化され、宣言の各セットは左中括弧 ({) と右中括弧 (}) で囲まれています。

宣言ブロック内に含まれる各宣言はセミコロン (;) で区切る必要があります。そうしないと、コードは機能しません (または少なくとも予期しない結果が生じます)。ブロックの最後の宣言を終了する必要はありません。それは、セミコロンによって、ブロックを別の宣言で拡張するときにそれを追加するのを忘れるのを防ぐので、そうすることがしばしば良いスタイルと考えられています。

メモ: ブロックはネストすることができます。このような場合、開き括弧と閉じ括弧は、入れ子になった HTML 要素のタグと同じ方法で論理的に入れ子にする必要があります。あなたが遭遇する最も一般的な例は、@-規則です。@media@font-face などのような @ 識別子で始まるブロックです (下記の CSS ステートメントを参照してください)。

メモ: 宣言ブロックは空の場合があります - これは完全に有効です。

アクティブラーニング: 宣言ブロックはどこ?

上記の例で、3つの別々の CSS 宣言ブロックを識別できましたか?

CSS セレクターと規則

私たちはパズルの一部を見逃しています - どの宣言にブロックを適用するべきかを宣言ブロックに伝える方法を議論する必要があります。これは、各宣言ブロックの先頭にセレクター (ページ上のいくつかの要素に一致するパターン) を付けることによって行われます。関連する宣言はそれらの要素にだけ適用されます。セレクターと宣言ブロックを合わせたものは、規則セット、または単に規則と呼ばれます。

セレクターは非常に複雑になることがあります。コンマ (グループ) で区切られた複数のセレクターを含めることで規則を複数の要素に一致させることができます。たとえば、クラスを "blah" の要素を選択する場合 それが <article> 要素の中にあり、それがマウスポインタによってホバリングされている間に限ります。心配しないでください - CSS の経験が豊富になればなるほど、物事はより明確になるでしょう。そして、セレクターについて次の記事で詳細に説明します。

要素はいくつかのセレクターに一致するかもしれません、それゆえいくつかの規則は与えられたプロパティを複数回設定するかもしれません。 CSS はどちらが優先されるのかを定義しており、適用する必要があります。これはカスケードアルゴリズムと呼ばれ、カスケードと継承でどのように機能するかについて詳しく学習します。

重要: 未知の疑似要素または疑似クラスを使用する場合のように、チェーンまたはグループ内の単一の基本セレクターが無効な場合でも、無視される無効なセレクターを除いて、セレクターのグループはまだ有効です。

アクティブラーニング: セレクターのグループを見つける

この例では、2つの異なるタイプの要素に適用される規則を特定できましたか?

CSS ステートメント

CSS 規則はスタイルシートの主要な構成要素であり、 CSS で最もよく見られるブロックです。しかし、時折みることがある他の種類のブロックがあります - CSS 規則はいわゆる CSS ステートメントの一種です。他の種類は次のとおりです。

  • @-規則 はメタデータ、条件付き情報、またはその他の説明的な情報を伝達するために CSS で使用されます。それらはアットマーク (@) で始まり、その後にそれがどんな種類の規則であるかを示すための識別子が続き、それからセミコロン (;) で終わる、ある種の構文ブロックとなります。識別子によって定義されたそれぞれのタイプの @-規則は、それ自身の内部構文とセマンティクスを持ちます。 例は次のとおりです。
    • @charset@import (メタデータ)
    • @media もしくは @document (ネストステートメントとも呼ばれる条件付き情報。以下を参照してください)
    • @font-face (説明的な情報)
    具体的な構文例:
    @import 'custom.css';
    この @-規則は他の CSS ファイルを現在の CSS にインポートします。
  • ネストされたステートメントは @-規則 の特定のサブセットです。その構文は、特定の条件が一致した場合にのみ文書に適用される CSS 規則のネストされたブロックです
    • @media @-規則 コンテンツは、ブラウザを実行するデバイスが定義された条件に一致する場合にのみ適用されます
    • @supports @-規則 コンテンツは、ブラウザが実際にテストされた機能をサポートしている場合にのみ適用されます
    • @document @-規則 コンテンツは、現在のページがいくつかの条件に一致する場合にのみ適用されます
    具体的な構文例:
    @media (min-width: 801px) {
      body {
        margin: 0 auto;
        width: 800px;
      }
    }
    
    上記のネストされたステートメントは、ページの幅が800ピクセルを超える場合にのみネスト規則を適用します。

コース内の適切な場所で、いくつかのタイプの @-規則/ネストされたステートメントについて学びます。

重要: 規則セット、@-規則、またはネストされたステートメント以外のステートメントは無効であるため無視されます。

構文を超えて: CSS を読みやすくする

ご覧のとおり、 CSS の構文はそれほど難しくありません。いくつかの規則を記述し、間違った記述をしても無視されます。ただし、それでうまくいくとしても、 CSS コードを使いやすく保守しやすくするために知っておくべきベストプラクティスがいくつかあります。

ホワイトスペース

ホワイトスペースは実際の空白、タブ、改行です。ホワイトスペースを追加すると、スタイルシートがより読みやすくなります。

HTML と同じように、ブラウザーは CSS 内にあるほとんどのホワイトスペースを無視する傾向にあります。ホワイトスペースの多くは読みやすくするための助けになるためだけにあります。以下の最初の例では、それぞれの宣言 (および規則の開始/終了) が1行に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 を書くこともできます。これは最初の例と機能的には同じですが、きっと皆さんはどこか読みにくいと思うでしょう。

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 で注意する必要があるホワイトスペースは、プロパティや値の周りのものです。例えば、以下の CSS は妥当です。

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

しかし、以下のものは妥当ではありません。

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

0auto が margin プロパティの妥当な値として解釈されないため (0auto は二つの独立した値)、またブラウザーが padding- を妥当なプロパティとして解釈しないためです。ですから、常に個別の値を値同士を少なくとも一つの空白で区切る必要がありますが、プロパティ名や値はどちらも、分割されない文字列にするようにしてください。

コメント

HTML の場合と同様、 CSS の中にコメントを入れて、数ヶ月後に見直したとき、コードがどのように動作するかを理解しやすくしたり、他の人が理解しやすくしたりすることが推奨されます。コメントは、例えばコード内のどの部分がエラーを起こしているかを見つけるときなど、テストの目的でコードの特定の一部を一時的にコメントアウトするのにも有用です。

CSS 内のコメントは /* で始まり、 */ で終わります。

/* 基本的な要素のスタイル付けを扱う */
/* -------------------------------------------------------------------------------------------- */
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) {
  /* Let's special case the global font size. On large screen or window,
     we increase the font size for better readability */
  body {font-size: 130%;}
}

h1 {font-size: 1.5em;}

/* Handle specific elements nested in the DOM  */
/* -------------------------------------------------------------------------------------------- */
div p, #id:first-line {background-color: red; background-style: none}
div p                 {margin          :   0; padding         : 1em;}
div p + p             {padding-top     :   0;                       }

一括指定

font, background, padding, border, margin のような一部のプロパティは一括指定プロパティ (shorthand properties) と呼ばれます。 — これ配置行で複数のプロパティの値を設定することができるため、時間を節約し、処理中にコードをよりきちんとさせます。

例えばこの行です。

/* padding や margin のような一括指定では、値は
   上、右、下、左の順で適用されます (アナログ時計と同じ順序です)。
   他の一括指定の形もあり、例えば二つの値では、例えば上下と左右の
   パディングを設定します */
padding: 10px 15px 15px 5px;

以下の全体と同じことです。

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 構文の基礎を理解しているはずです。次回の記事では、CSS セレクターについて詳しく調べ、使用可能なさまざまなセレクターとその動作について説明します。

このモジュール

ドキュメントのタグと貢献者

このページの貢献者: silverskyvicto, mfuji09, peach1248, itkurokawainfo
最終更新者: silverskyvicto,