コードラボJP
プライバシーポリシー お問い合わせ サイトマップ

CSSコメントはブラウザには表示されませんが、ソースコードをドキュメント化するのに役立ちます。

CSS コメント

コメントはコードを説明するために使用され、後でソースコードを編集するときに役立ちます。

コメントはブラウザによって無視されます。

CSSコメントは<style>要素内に配置され、/* で始まり、*/ で終わります：

例

/* これは単一行コメントです */
p {
  color: red;
}

コード内の任意の場所にコメントを追加できます：

例

p {
  color: red;  /* テキストの色を赤に設定 */
}

コード行の途中にもコメントを追加できます：

例

p {
  color: /*red*/blue; 
}

コメントは複数行にわたることもできます：

例

/* これは
複数行にわたる
コメントです */

p {
  color: red;
}

HTMLとCSSのコメント

HTMLチュートリアルから、<!–…–> 構文を使用してHTMLソースにコメントを追加できることを学びました。

次の例では、HTMLコメントとCSSコメントを組み合わせて使用しています：

例

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red; /* テキストの色を赤に設定 */
}
</style>
</head>
<body>

<h2>My Heading</h2>

<!-- これらの段落は赤くなります -->
<p>Hello World!</p>
<p>この段落はCSSでスタイルされています。</p>
<p>CSSコメントは出力に表示されません。</p>

</body>
</html>

ウェブブラウザがスタイルシートを読み込むと、その情報に従ってHTMLドキュメントを書式設定します。

3つのCSSの挿入方法

CSSを挿入する方法には以下の3つがあります:

外部CSS

外部スタイルシートを使用すると、1つのファイルを変更するだけでウェブサイト全体の外観を変えることができます。










This is a heading


This is a paragraph.

外部スタイルシートは任意のテキストエディタで作成し、.css拡張子で保存します。ファイルにはHTMLタグは含めません。

内部CSS

1つのHTMLページだけに適用するスタイルを内部スタイルシートで定義することができます。










This is a heading


This is a paragraph.

インラインCSS

1つの要素に対して直接スタイルを適用するには、インラインスタイルを使用します。スタイル属性には任意のCSSプロパティを含めることができます。







This is a heading


This is a paragraph.

インラインスタイルはスタイルシートの利点を失う可能性があるため、極力使用は控えるべきです。

複数のスタイルシート

同じセレクター（要素）に対して異なるスタイルが複数のスタイルシートで定義されている場合、最後に読み込まれたスタイルシートの値が使用されます。

例

外部スタイルシートで<h1>要素のスタイルが次のように定義されているとします:


h1 {
  color: navy;
}

その後、内部スタイルシートで同じ<h1>要素に別のスタイルが定義された場合:

内部スタイルシートが外部スタイルシートの後に定義されている場合、<h1>要素は「オレンジ」になります。

しかし、内部スタイルシートが外部スタイルシートの前に定義されている場合、<h1>要素は「ネイビー」になります:

カスケーディングオーダー

HTML要素に複数のスタイルが指定されている場合、どのスタイルが適用されるでしょうか？全てのスタイルは以下の規則に従って新しい「仮想的な」スタイルシートに「カスケード」されます。優先順位が高い順に:

したがって、インラインスタイルが最も優先され、外部および内部スタイルシート、そしてブラウザのデフォルトスタイルよりも優先されます。

ウェブブラウザがスタイルシートを読み込むと、その情報に従ってHTMLドキュメントを書式設定します。

3つのCSSの挿入方法

CSSを挿入する方法には以下の3つがあります:

外部CSS

外部スタイルシートを使用すると、1つのファイルを変更するだけでウェブサイト全体の外観を変えることができます。


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

外部スタイルシートは任意のテキストエディタで作成し、.css拡張子で保存します。ファイルにはHTMLタグは含めません。

内部CSS

1つのHTMLページだけに適用するスタイルを内部スタイルシートで定義することができます。


<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

<h1> {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

インラインCSS

1つの要素に対して直接スタイルを適用するには、インラインスタイルを使用します。スタイル属性には任意のCSSプロパティを含めることができます。


<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

インラインスタイルはスタイルシートの利点を失う可能性があるため、極力使用は控えるべきです。

複数のスタイルシート

同じセレクター（要素）に対して異なるスタイルが複数のスタイルシートで定義されている場合、最後に読み込まれたスタイルシートの値が使用されます。

例

外部スタイルシートで<h1>要素のスタイルが次のように定義されているとします:


h1 {
  color: navy;
}

その後、内部スタイルシートで同じ<h1>要素に別のスタイルが定義された場合:


<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

内部スタイルシートが外部スタイルシートの後に定義されている場合、<h1>要素は「オレンジ」になります。

しかし、内部スタイルシートが外部スタイルシートの前に定義されている場合、<h1>要素は「ネイビー」になります:


<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

カスケーディングオーダー

HTML要素に複数のスタイルが指定されている場合、どのスタイルが適用されるでしょうか？全てのスタイルは以下の規則に従って新しい「仮想的な」スタイルシートに「カスケード」されます。優先順位が高い順に:

したがって、インラインスタイルが最も優先され、外部および内部スタイルシート、そしてブラウザのデフォルトスタイルよりも優先されます。

CSSセレクタは、スタイルを適用したいHTML要素を選択します。

CSS セレクタ

CSSセレクタは、スタイルを適用したいHTML要素を「見つける」（または選択する）ために使用されます。

CSSセレクタは次の5つのカテゴリに分けることができます：

このページでは、最も基本的なCSSセレクタを説明します。

CSS 要素セレクタ

要素セレクタは、要素名に基づいてHTML要素を選択します。

例

ここでは、ページ上のすべての<p>要素が中央揃えになり、テキストの色が赤になります：

p {
  text-align: center;
  color: red;
}

CSS id セレクタ

idセレクタは、HTML要素のid属性を使用して特定の要素を選択します。

要素のidはページ内で一意なので、idセレクタは一意の要素を選択するために使用されます。

特定のidを持つ要素を選択するには、ハッシュ（#）文字の後に要素のidを記述します。

例

以下のCSSルールは、id=”para1″を持つHTML要素に適用されます：

#para1 {
  text-align: center;
  color: red;
}

注意: id名は数字で始めることはできません！

CSS クラスセレクタ

クラスセレクタは、特定のクラス属性を持つHTML要素を選択します。

特定のクラスを持つ要素を選択するには、ピリオド（.）文字の後にクラス名を記述します。

例

この例では、クラス=”center”を持つすべてのHTML要素が赤色で中央揃えになります：

.center {
  text-align: center;
  color: red;
}

特定のHTML要素のみがクラスの影響を受けるように指定することもできます。

例

この例では、クラス=”center”を持つ<p>要素のみが赤色で中央揃えになります：

p.center {
  text-align: center;
  color: red;
}

HTML要素は複数のクラスを参照することもできます。

例

この例では、<p>要素がクラス=”center”およびクラス=”large”に従ってスタイルが適用されます：

<p class="center large">この段落は2つのクラスを参照します。</p>

注意: クラス名は数字で始めることはできません！

CSS ユニバーサルセレクタ

ユニバーサルセレクタ（*）は、ページ上のすべてのHTML要素を選択します。

例

以下のCSSルールは、ページ上のすべてのHTML要素に影響を与えます：

* {
  text-align: center;
  color: blue;
}

CSS グループセレクタ

グループセレクタは、同じスタイル定義を持つすべてのHTML要素を選択します。

次のCSSコード（h1、h2、およびp要素が同じスタイル定義を持ちます）を見てください：

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

セレクタをグループ化して、コードを最小化する方が良いです。

セレクタをグループ化するには、各セレクタをコンマで区切ります。

例

この例では、上記のコードからセレクタをグループ化しています：

h1, h2, p {
  text-align: center;
  color: red;
}

すべてのCSSシンプルセレクタ

セレクタ 例 例の説明
#id #firstname id=”firstname”の要素を選択
.class .intro class=”intro”の要素をすべて選択
element.class p.intro class=”intro”の<p>要素のみを選択
* * すべての要素を選択
element p すべての<p>要素を選択
element,element,.. div, p すべての<div>要素とすべての<p>要素を選択