CSS の構造化

This translation is in progress.

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

前提条件:	基本的なコンピュータリテラシー、基本的なソフトウェアのインストール、基本的なファイル操作、 HTML の基本 ( HTML入門で学習)、基本的なCSSの動作
目的:	CSSの原理的なシンタックス構造上の詳細を学ぶ

HTML への CSS 適用

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

外部スタイルシート

CSSを始めようモジュールで、私達のページに外部のスタイルシートをリンクさせました。これが最も一般的で便利な、CSSをドキュメントに適用する方法です。これには、ひとつのCSSを複数のページにリンクできますし、すべてに同じスタイルを適用できるのです。多くの場合、サイトの個々のページはよく似た見た目です。そのため基本的なルック&フィールのために同じルールセットを適用するのです。

外部スタイルシートha、拡張子が .css の個別のファイルに書かれたCSSです。それは HTMLの <link> 要素から参照します。:

<!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 属性は、あなたのファイルシステム上のファイルを参照していなければなりません。

上の例で見たように、HTMLドキュメントと同じフォルダに CSS ファイルを置くこともできますが、どこか別の場所に置くこともできます。適切にパスを設定してください。例えば、:

<!-- Inside a subdirectory called styles inside the current directory -->
<link rel="stylesheet" href="styles/style.css">

<!-- Inside a subdirectory called general, which is in a subdirectory called styles, inside the current directory -->
<link rel="stylesheet" href="styles/general/style.css">

<!-- Go up one directory level, then inside a subdirectory called styles -->
<link rel="stylesheet" href="../styles/style.css">

内部スタイルシート

内部スタイルシートには、外部にCSSファイルはありません。そしてその代わりに、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ファイルが直接修正できない、コンテンツマネージメントシステムのような環境で作業する場合)、しかし外部スタイルシートほどの効果はありません。— WEBサイトでは、CSS は全てのページにわたって繰り返し適用する必要がありますし、変更があれば複数箇所を更新しなければなりません。

インラインスタイル

インラインスタイルとは、ただ1要素にだけ影響する 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>

あなたは本当にしなければならない場合をのぞいてこれを採用しないでください! この方法はメンテナンスが非常に難しくなります。(ひとつのドキュメントについて複数箇所に同じ情報を更新しなければならなくなる可能性があります。) そしてまたこれは表示上のCSS情報とHTMLの構造情報を混ぜることになりますが。これを行うと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 ルールは、ブラウザにルールを適用する要素を指示する、セレクターまたはセレクターのリストで始まります。有効なセレクターまたはセレクターのリストの例を示します。

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

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

注: CSS セレクターのチュートリアルでセレクターについて学ぶことができます。また次のモジュールで詳細を学びましょう。

詳細度

二つのセレクターが同じHTML要素を選択してしまうのはよくあることです。次のスタイルシートを考えましょう。pセレクターはパラグラフを青にします。そして選択した要素を赤にします。

.special {
  color: red;
}

p {
  color: blue;
}

ここではspecialクラスのあるパラグラフのあるHTMLドキュメントを考えてください。両方のルールが適用される可能性があります。そのためどちらのルールが優先されるでしょう？パラグラフはどの色になるのでしょうか？

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

この CSS 言語はイベントが衝突したときにどのルールが優先されるか決まっています。これはカスケードcascade や特異性specificity と呼ばれることがあります。次のコードブロックを見てください。pセレクターへルールを二つ決定しています。しかしこのパラグラフは結局青になっています。これはスタイルシートで青に設定する宣言がより末尾に近かったためです。後者のスタイルが前者のスタイルを上書きします。これがカスケードアクションです。

p {
  color: red;
}

p {
  color: blue;
}

しかし、前者がクラスセレクタや要素セレクタの場合は、クラスセレクターが優先されパラグラフは赤く染まります。それがスタイルシートの前の方にあったとしてもです。クラスセレクターは要素セレクターより特徴的な宣言ですので、クラスセレクターが優先されます。

上の内容をあなた自身で確認してください。HTMLに実験を加え、上のp { ... } ルールを加えましょう。それから最初のpセレクターに.specialを追加してスタイルが変わるかどうか確認しましょう。

このカスケードルールや特徴ルールは最初に見たときは少し複雑に思えるでしょう。しかしCSSの知識を蓄えるとこれが自然と理解できます。私たちは次のコースの Cascade and inheritance でより詳しく学ぶことになります。そこではその特異性の計算方法等の詳細を学ぶことになります。ここではこのようなものがあることと、いくつかのCSSが意図したとおりに適用されないのは特異性のせいであることだけを覚えてください。一つの要素に複数のルールが適用されていることを特定するのは問題の解決の最初の一歩です。

プロパティと値

最も基本的なレベルで CSSは二つの要素からブロックを構成しています。 :

プロパティ(Properties): 人間が読めるIDで、変更したいスタイルの特徴を示します。(例えば font-size, width, background-color)
値(Values) : 指定されたプロパティに与える値で、スタイルの特徴をどのように変えるかを示す(例えばフォントをどう変えるか、幅をどう変えるか、背景色をどう変えるか)

次のものは一つのプロパティと値をハイライトしています。プロパティ名は color (色の意味)でその値は blue (意味は青)です。

A declaration highlighted in the CSS

プロパティ名と値の組(pair)を CSS 宣言(CSS declaration)といいます。CSS宣言はCSS宣言ブロック(CSS Declaration Blocks)に配置します。次の画像ではCSSの宣言ブロックをハイライトしています。

A highlighted declaration block

最終的に、CSS宣言ブロック(CSS declaration blocks)はセレクターとのペアになってCSSルールセット(CSS Rulesets または CSS Rules)を構成します。次の画像には二つのルールがあり、一つは h1 セレクター用で、もう一つは p セレクター用です。ここでは h1 のルールをハイライトしています。

The rule for h1 highlighted

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

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

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

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

関数

多くの値は比較的シンプルなキーワードまたは数値である一方、いくつかの値は関数の形をとるものがあります。例えば、 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%がいくらか私にはわかりません。全ての値についてMDNに関連したページはそのように計算されています。

他の例としては <transform> には rotate()のような関数を与えます。

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

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

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

次のプロパティに適切な値をしらべて、さまざまなHTML要素に適用するCSSルールを作成してください。:

transform
background-image 特定のグラデーションの値を指定しましょう。
color, rgb形式、rgba 形式、hsl形式、hsla形式の特定の値を指定しましょう。

@rules

ここまでのチュートリアルで @rules には出会っていませんでした。（「アットルールズ」と発音します）これはCSSがどのように振る舞うかについて指示を与える特別なルールです。いくつかの @rules はルールの名前と値からなる単純なものです。例えば、あなたのメインのCSSスタイルシートに追加のスタイルシートを含めたい場合、 @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) と呼ばれます。— これは一行に複数のプロパティの値を設定できるからであり、このプロセスであなたのコードの作成や作成時間を短縮できます。

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

/* In 4-value shorthands like padding and margin, the values are applied
   in the order top, right, bottom, left (clockwise from the top). There are also other 
   shorthand types, 例えば、2-value shorthands, which set padding/margin
   for top/bottom, then left/right */
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のスタイルにどのように影響するかを確認しましょう。いくつか値を変えて実験してみましょう。

Warning: While shorthands often allow you to miss out values, they will then reset any values that you do not include to their initial values. This ensures that a sensible set of values are used. However, this might be confusing if you were expecting the shorthand to only change the values you passed in.

As with HTML, you are encouraged to make comments in your CSS, to help you understand how your code works when coming back to it after several months, and to help others coming to the code to work on it understand it.

Comments in CSS begin with /* and end with */. In the below code block I have used comments to mark the start of different distinct code sections. This is useful to help you navigate your codebase as it gets larger — you can search for the comments in your code editor.

/* Handle basic element styling */
/* -------------------------------------------------------------------------------------------- */
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;
}

Comments are also useful for temporarily commenting out certain parts of the code for testing purposes, 例えば、if you are trying to find which part of your code is causing an error. In the next example I have commented out the rules for the .special selector.

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

p { 
  color: blue; 
}

Add some comments to your CSS, to get used to using them.

空白

White space means actual spaces, tabs and new lines. In the same manner as HTML, the browser tends to ignore much of the whitespace inside your CSS; a lot of the whitespace is just there to aid readability.

In our first example below we have each declaration (and rule start/end) on its own line — this is arguably a good way to write CSS, as it makes it easy to maintain and understand:

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;
}

You could write exactly the same CSS like so, with most of the whitespace removed — this is functionally identical to the first example, but I'm sure you'll agree that it is somewhat harder to read:

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;}

The code layout you choose is usually a personal preference, although when you start to work in teams, you may find that the existing team has its own styleguide that specifies an agreed convention to follow.

The whitespace you do need to be careful of in CSS is the whitespace between the properties and their values. 例えば、the following declarations are valid CSS:

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

But the following are invalid:

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

0auto is not recognised as a valid value for the margin property (0 and auto are two separate values,) and the browser does not recognise padding- as a valid property. So you should always make sure to separate distinct values from one another by at least a space, but keep property names and property values together as single unbroken strings.

Try playing with whitespace inside your CSS, to see what breaks things and what doesn't.

次のステップ

It's useful to understand a little about how the browser takes your HTML and CSS and turns it into a webpage, so in the next article — How CSS works — we will take a look at that process.

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

このモジュール内

最終更新日: Jan 21, 2020, by MDN contributors