【CSS Modules】@documentアットルールの使い方

Copy
1/*
2 * @document ルールは、指定された条件に一致するウェブページにのみ
3 * 囲まれたCSSスタイルを適用するために使用されます。
4 *
5 * この例では、"example.com" ドメインのページにスタイルを適用します。
6 */
7@document domain("example.com") {
8  /*
9   * "example.com" ドメインにアクセスした際に適用されるスタイル定義。
10   */
11  body {
12    background-color: #f0f8ff; /* ページの背景色をアリスブルーに設定 */
13    font-family: Arial, sans-serif; /* フォントをArialに設定 */
14    color: #333; /* 文字色を濃いグレーに設定 */
15  }
16
17  h1 {
18    color: #0056b3; /* 見出しの色を濃い青に設定 */
19    text-align: center; /* 見出しを中央揃えにする */
20    margin-bottom: 20px; /* 見出しの下に余白を追加 */
21  }
22
23  p {
24    font-size: 16px; /* 段落のフォントサイズを設定 */
25    line-height: 1.5; /* 行の高さを設定し、読みやすくする */
26  }
27
28  a {
29    color: #007bff; /* リンクの色を青に設定 */
30    text-decoration: none; /* リンクの下線を削除 */
31  }
32
33  a:hover {
34    text-decoration: underline; /* ホバー時にリンクに下線を表示 */
35  }
36}

CSSの@documentルールは、特定の条件に合致するウェブページにのみ、その中に記述されたスタイルを適用するためのものです。これは、通常のCSSがWebサイト全体に適用されるのとは異なり、指定したページでのみスタイルを有効にしたい場合に非常に有用です。

このサンプルコードでは、@document domain("example.com")という条件を指定しています。これにより、ドメイン名が「example.com」であるウェブページにアクセスした場合にのみ、波括弧 {} 内に定義されたCSSスタイルが適用されます。例えば、bodyセレクタでページの背景色をアリスブルーに設定したり、フォントをArialにしたりするスタイルは、「example.com」ドメインのページだけで有効になります。また、h1セレクタで見出しの色を濃い青に設定し中央揃えにすることや、pセレクタで段落のフォントサイズや行の高さを調整することも、この条件に合致するページに限定されます。リンクのスタイルも同様に、この特定のドメインにのみ適用され、ホバー時に下線が表示されるようになります。

@documentルール自体には、プログラミング言語における関数のような引数や戻り値の概念は存在しません。代わりに、domain(), url(), url-prefix() といった関数形式の記述を用いて、スタイルを適用するページを詳細に指定する条件を定義します。このように、ウェブサイトの一部にのみ異なるデザインを適用したい場合に、柔軟かつ効率的にスタイルを制御できるのが@documentルールの特徴です。

Copy
1/*
2 * @document は、特定のURL、ドメイン、または正規表現に一致するドキュメントにのみ
3 * CSSルールを適用するためのアットルールです。
4 *
5 * 【重要】この @document アットルールは、現在主要なブラウザではサポートされていません。
6 * 提案されましたが、ブラウザベンダーによる実装が見送られ、W3Cの勧告から削除されました。
7 * そのため、このコードは実際のWebページでは機能しません。
8 *
9 * システムエンジニアを目指す方が、このようなルールが存在したこと、
10 * そしてその目的を理解するための参考コードとして提供します。
11 * 主な目的は、特定の「ドキュメント」に対して特定のスタイルを「要求」することでした。
12 */
13@document
14  /* 特定のドメインにのみスタイルを適用する場合の例 */
15  domain("example.com"),
16  /* 特定のURLプレフィックス（URLの始まり）を持つページにのみスタイルを適用する場合の例 */
17  url-prefix("https://www.example.com/products/")
18{
19  /*
20   * このブロック内のCSSルールは、上記の条件に一致するドキュメントが
21   * 読み込まれた場合にのみ適用されることを意図していました。
22   */
23  body {
24    /* ドキュメントの背景色を薄い青色に設定 */
25    background-color: #e0f2f7;
26    /* ドキュメントのテキストの色を濃い青色に設定 */
27    color: #004d40;
28    /* ドキュメントのフォントをサンセリフ体に設定 */
29    font-family: 'Roboto', sans-serif;
30  }
31
32  h1 {
33    /* h1要素のテキストを中央揃えにする */
34    text-align: center;
35    /* h1要素のテキストの色をさらに濃い青色に設定 */
36    color: #002d33;
37    /* h1要素の下部に太い線を引く */
38    border-bottom: 2px solid #002d33;
39    padding-bottom: 10px;
40  }
41}

CSSの@documentは、特定のドメインやURL、または正規表現に一致するウェブページ（ドキュメント）に対してのみ、その内部に記述されたCSSのスタイルルールを適用することを目的としたアットルールです。このルール自体に渡す引数や、何らかの値を返す戻り値はありません。

しかしながら、この@documentルールは、現在主要なウェブブラウザではサポートされていません。かつて提案されましたが、ブラウザベンダーによる実装が見送られ、W3Cの勧告からも削除されました。そのため、このサンプルコードを実際のウェブページで使用しても、記述されたスタイルが適用されることはありません。システムエンジニアを目指す方々には、過去に特定の条件に基づいてスタイルを適用するというこのようなルールが存在し、その目的がどのようなものであったかを理解するための参考として提供しています。

サンプルコードでは、domain("example.com")と記述することで「example.com」ドメインのページに、url-prefix("https://www.example.com/products/")と記述することで特定のURLで始まるページにスタイルを適用する例を示しています。これらの条件に一致するドキュメントが読み込まれた場合に、ブロック内に記述されたbodyやh1要素に対する背景色、文字色、配置などのCSSルールが適用されることを意図していました。これは、特定の「ドキュメント」に対して「要求」に応じたスタイルを柔軟に適用するための仕組みでした。