【CSS Modules】systemアットルール記述子の使い方

Copy
1/*
2 * システムカラーは、ユーザーエージェント（ブラウザ）やオペレーティングシステム（OS）によって
3 * 定義される特別な色のキーワードです。
4 * これらを使用することで、アプリケーションがユーザーのシステムテーマに自動的に適応し、
5 * 一貫性のあるユーザーインターフェースを提供できます。
6 *
7 * 主にUI要素の標準的な色を表現するために使用されます。
8 */
9
10/* ドキュメントやアプリケーションの一般的な背景色とテキスト色を設定 */
11body {
12  background-color: Canvas; /* OSのテーマに応じた背景色 */
13  color: CanvasText; /* OSのテーマに応じたテキスト色 */
14  font-family: sans-serif; /* 汎用的なフォント */
15  margin: 20px; /* 余白を追加 */
16}
17
18/* ボタン要素のスタイルを設定 */
19button {
20  background-color: ButtonFace; /* OSのテーマに応じたボタンの表面色 */
21  color: ButtonText; /* OSのテーマに応じたボタンのテキスト色 */
22  border: 1px solid GrayText; /* OSのテーマに応じたグレーテキスト色を枠線に */
23  padding: 8px 16px; /* 内側の余白 */
24  border-radius: 4px; /* 角を丸める */
25  cursor: pointer; /* マウスオーバー時にポインターを表示 */
26}
27
28/* ハイパーリンク要素のスタイルを設定 */
29a {
30  color: LinkText; /* OSのテーマに応じた未訪問リンクの色 */
31  text-decoration: none; /* 下線をなくす */
32}
33
34/* 訪問済みのハイパーリンクのスタイルを設定 */
35a:visited {
36  color: VisitedText; /* OSのテーマに応じた訪問済みリンクの色 */
37}
38
39/* 選択されたテキストの背景色とテキスト色を設定 */
40::selection {
41  background-color: Highlight; /* OSのテーマに応じた選択範囲の背景色 */
42  color: HighlightText; /* OSのテーマに応じた選択範囲のテキスト色 */
43}

CSSのsystemキーワードは、ユーザーのシステムテーマに合わせた色をWebページに適用するための特別な色キーワードです。これは、ユーザーエージェント（ブラウザ）やオペレーティングシステム（OS）が定義する標準的なユーザーインターフェース（UI）の色を表現するために使用されます。このキーワードを利用することで、アプリケーションがユーザー環境のテーマ（ダークモードやライトモードなど）に自動的に適応し、一貫性のあるデザインを簡単に提供できます。

サンプルコードでは、様々なUI要素にsystemキーワードが適用されています。例えば、Canvasはドキュメントの一般的な背景色を、CanvasTextはそれに対するテキスト色をOSのテーマに合わせて設定します。ButtonFaceやButtonTextはボタンの表面とテキストの色を、LinkTextは未訪問のリンクの色を、VisitedTextは訪問済みリンクの色を定義します。また、HighlightとHighlightTextはテキスト選択時の背景色と文字色を、それぞれシステムの規定色で表示します。

systemキーワード自体に特定の引数や戻り値はありません。しかし、その背後では、各キーワードがOSやブラウザが持つ定義済みの色情報にアクセスし、該当する色の値をCSSプロパティに適用する役割を果たしています。これにより、個別の色コードを指定することなく、ユーザーに馴染み深いUIデザインを容易に実現できるため、システムエンジニアを目指す方にとって、ユーザー体験を向上させる上で非常に有用な機能です。

Copy
1/*
2 * このCSSファイルはCSS Modulesとして扱われることを想定しています。
3 * OSのシステムフォントを要素に適用するためのスタイル定義です。
4 * `system-ui`キーワードを使用することで、ユーザーの環境に最適なネイティブUIフォントが自動的に選択されます。
5 */
6.systemFontText {
7  /*
8   * `system-ui` は、ブラウザがOSのユーザーインターフェースフォントを自動的に選択するよう指示します。
9   * これにより、ユーザーの環境に合わせた統一感のある見た目を実現できます。
10   * フォールバックとして、一般的なシステムフォントがリストされています。
11   */
12  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
13  
14  /* フォントサイズの例 */
15  font-size: 1rem;
16  
17  /* 文字色の例 */
18  color: #333;
19}

このCSSコードは、ウェブページ上のテキスト要素に、ユーザーが使用しているオペレーティングシステム（OS）の標準的なシステムフォントを適用する方法を示しています。このスタイル定義は、CSS Modulesとして利用されることを想定しています。

.systemFontText クラスに定義されている font-family プロパティが、この機能の中心です。ここに指定されている system-ui というキーワードは、ウェブブラウザに対して、現在ユーザーが利用しているOSのユーザーインターフェースで使われているネイティブなフォントを自動的に選択し、適用するよう指示します。これにより、ウェブサイトがユーザーのOS環境に自然に溶け込み、統一感のある見た目を提供できるという利点があります。例えば、Windowsユーザーには「Segoe UI」、macOSユーザーには「San Francisco」のようなフォントが自動で適用されることが期待されます。

system-ui の後に続く -apple-system, BlinkMacSystemFont などのフォント名のリストは、万が一 system-ui キーワードがサポートされていないブラウザや環境であった場合に備えて、代替（フォールバック）として表示されるフォントを指定するものです。これにより、どのような環境でも適切なフォントが表示されるよう配慮されています。

この system-ui キーワードは、特定の引数を取ったり、値を返したりするものではなく、ブラウザにOSのシステムフォントを使用するよう指示する設定値として機能します。シンプルな指定で、ユーザーフレンドリーなフォント表示を実現するための強力な手段と言えます。