【CSS Modules】font-variation-settingsアットルール記述子の使い方

Copy
1/*
2 * CSS Modulesで可変フォントのfont-variation-settingsを使用するサンプルです。
3 * 「font-variation-settingsが機能しない (not working)」場合の主な原因は、
4 * フォントが可変フォントではない、または正しく読み込まれていないこと、
5 * および指定された軸（例: 'wght', 'wdth'）がフォントに存在しないことです。
6 *
7 * このコードは、可変フォントを@font-faceルールで定義し、
8 * その後、定義したフォントに対してfont-variation-settingsを適用する方法を示します。
9 */
10
11/*
12 * 1. 可変フォントを定義します。
13 *    font-variation-settingsが機能するためには、
14 *    ここで指定するフォントが**可変フォント**である必要があります。
15 *    また、`src` のパスが正しいフォントファイル（通常 .woff2 形式）を指していることを確認してください。
16 *    例として、Google Fontsなどで提供されている「Roboto Flex」などの可変フォントを使用できます。
17 */
18@font-face {
19  font-family: 'MyCustomVariableFont'; /* このフォントファミリー名を後で使用します */
20  /*
21   * 実際の可変フォントファイルへのパスをここに指定してください。
22   * 例: `url('/fonts/MyCustomVariableFont.woff2')`
23   * `format('woff2-variations')` は、ブラウザにこれが可変フォントであることを伝えます。
24   */
25  src: url('path/to/your/variable-font.woff2') format('woff2-variations');
26  font-weight: 100 900;  /* フォントがサポートするウェイトの範囲 (オプション、必須ではありませんが推奨) */
27  font-stretch: 50% 150%; /* フォントがサポートする幅の範囲 (オプション、必須ではありませんが推奨) */
28  font-display: swap;    /* フォントの読み込み戦略を定義し、FOIT (Flash of Invisible Text) を防ぎます */
29}
30
31/*
32 * 2. 定義した可変フォントとfont-variation-settingsを要素に適用します。
33 *    このCSSは、CSS Modulesを使用している場合、以下のように使用されます:
34 *    JavaScript/TypeScript ファイルで `import styles from './MyComponent.module.css';`
35 *    HTML/JSX で `<p className={styles.variableText}>...</p>`
36 */
37.variable-text {
38  font-family: 'MyCustomVariableFont', sans-serif; /* @font-faceで定義したフォントファミリー名を指定 */
39  font-size: 2rem; /* テキストのサイズ */
40  color: #333; /* 文字色 */
41  text-align: center; /* テキストアラインメント */
42
43  /*
44   * ここでフォントのバリエーション設定を行います。
45   * 指定する軸タグ（例: "wght", "wdth", "opsz"）は、
46   * **使用する可変フォントが実際にサポートしている必要があります。**
47   * フォントがサポートしていない軸を指定しても効果はありません。
48   * 各フォントがサポートする軸は、フォントのドキュメントや、
49   * [Wakamai Fondue](https://wakamaifondue.com/) のようなツールで確認できます。
50   */
51  font-variation-settings:
52    "wght" 700,  /* 'wght' (weight): ウェイト（太さ）を700に設定 (通常100-900の範囲) */
53    "wdth" 90,   /* 'wdth' (width): 幅を90に設定 (通常50-150の範囲で、100が標準) */
54    "opsz" 36;   /* 'opsz' (optical size): 光学サイズを36に設定 (通常8-144の範囲) */
55
56  /* その他、見栄えを良くするための一般的なCSSプロパティ */
57  padding: 15px;
58  border: 1px solid #e0e0e0;
59  border-radius: 8px;
60  margin: 20px auto; /* 左右中央寄せ */
61  max-width: 600px; /* 最大幅 */
62}

font-variation-settingsは、CSSにおいて可変フォントの様々なデザイン特性、例えばウェイト（太さ）、幅、光学サイズなどを細かく調整するためのプロパティです。引数はなく、複数の設定値をカンマで区切って直接指定することで、フォントの表現を豊かにします。このプロパティ自体に特定の戻り値はありません。

このサンプルコードは、CSS Modules環境でfont-variation-settingsを用いて可変フォントを適用する手順を示しています。もしfont-variation-settingsが意図通りに機能しない場合、主な原因は、使用しているフォントがそもそも可変フォントではないか、フォントファイルが正しく読み込まれていないこと、そして指定したバリエーション軸（例: "wght", "wdth"）がそのフォントに存在しないことです。

コードの最初の部分では、@font-faceルールを使って、外部の可変フォントファイルをウェブページで利用できるように定義しています。ここで指定するfont-family名（例: 'MyCustomVariableFont'）は、後でCSSルールに適用する際に参照されます。srcプロパティには実際のフォントファイルへのパスを記述し、format('woff2-variations')と指定することで、ブラウザにこれが可変フォントであることを伝えます。

次に、.variable-textクラスに対して、@font-faceで定義したフォントファミリーをfont-familyプロパティで指定します。その上で、font-variation-settingsプロパティを記述し、フォントがサポートする軸タグとその値を設定します。例えば、"wght" 700はウェイト（太さ）を700に、"wdth" 90はフォントの幅を90に調整します。これらの軸タグと設定値は、使用する可変フォントが実際にサポートしている範囲内である必要があります。サポートされている軸は、フォントの提供元ドキュメントや専用ツールで確認することが重要です。この手順により、可変フォントの持つ柔軟な表現力を最大限に活用できます。

Copy
1/*
2 * このCSSクラスは、可変フォントの特定の見た目を調整するために使用されます。
3 * 'font-variation-settings' プロパティは、フォントの太さ（wght）、幅（wdth）、
4 * カスタムの見た目（FILLなど）といった様々な軸（設定項目）の値を直接指定します。
5 * これにより、標準の font-weight や font-stretch プロパティだけでは表現できない
6 * 非常に細かなフォントの見た目を制御できます。
7 * CSS Modules で使用されることを想定し、ローカルスコープのクラス名にしています。
8 */
9.variableText {
10  /*
11   * 使用する可変フォントを指定します。
12   * 実際には、事前に @font-face ルールでフォントを読み込む必要があります。
13   * 例: @font-face { font-family: 'CustomVariableFont'; src: url('CustomVariableFont.woff2') format('woff2-variations'); font-weight: 1 999; }
14   */
15  font-family: 'CustomVariableFont', sans-serif;
16
17  /*
18   * 可変フォントの軸（設定項目）とその値を指定します。
19   * 'wght' はフォントの太さ (weight)、'wdth' はフォントの幅 (width)、
20   * 'FILL' はカスタムの軸で、フォントによっては塗りつぶしの量などを制御できます。
21   * 値はフォントによって範囲が異なります。
22   * ここでは、太さを700、幅を120、FILL軸を50に設定しています。
23   */
24  font-variation-settings: 'wght' 700, 'wdth' 120, 'FILL' 50;
25
26  /* テキストの色を指定します */
27  color: #333;
28
29  /* フォントサイズなど、他のスタイルも適用可能です */
30  font-size: 2rem;
31  line-height: 1.5;
32}

このサンプルコードは、CSSのfont-variation-settingsプロパティを使用して、可変フォントの見た目を細かく調整する方法を示しています。font-variation-settingsは、フォントの太さ（wght）や幅（wdth）といった一般的なスタイルだけでなく、フォントが持つ独自の「軸（設定項目）」の値を直接指定できるため、font-weightやfont-stretchといった標準のCSSプロパティだけでは表現できない、より多様で繊細なフォントの表現が可能になります。

このプロパティは、関数のように引数を直接受け取ったり、特定の戻り値を返したりするものではなく、フォントの特定の軸とその値を設定するために使用されます。サンプルコードの.variableTextクラスでは、まずCustomVariableFontという可変フォントを指定し、次にfont-variation-settings: 'wght' 700, 'wdth' 120, 'FILL' 50;と記述しています。

ここで、'wght'はフォントの太さ（weight）を、'wdth'はフォントの幅（width）を制御する軸です。'FILL'は特定の可変フォントが持つカスタム軸の一例であり、フォントの塗りつぶし量などを調整することができます。これらの軸に続く数値は、それぞれの軸に設定したい値を示しています。この設定により、通常のCSSでは難しい独自のフォントスタイルを適用し、デザインの表現力を高めることができます。