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

Copy
1/*
2 * CSSのfont-stretchプロパティは、フォントの横幅（伸縮）を調整するために使用されます。
3 * キーワード「css font stretch not working」の原因は、主に以下の点が考えられます。
4 * 1. 使用しているフォントがfont-stretchに対応していない（可変フォントではない、または複数のストレッチバリエーションを持っていない）。
5 * 2. `@font-face`ルールでフォントのストレッチ範囲が正しく定義されていない。
6 * 3. フォントファイルが正しくロードされていない。
7 *
8 * このサンプルコードでは、可変フォントを前提とし、`@font-face`ルールで
9 * フォントのストレッチ範囲を定義し、その後、要素に`font-stretch`プロパティを
10 * 適用する一連の流れを示します。
11 */
12
13/* 1. `@font-face`ルールでカスタムフォントを定義し、`font-stretch`ディスクリプタで
14 *    そのフォントがサポートするストレッチ軸の範囲を指定します。
15 *    これは、`font-stretch`プロパティが機能するための前提となります。
16 *    この例では、可変フォント（variable font）を想定しています。
17 */
18@font-face {
19  font-family: 'MyVariableFont'; /* カスタムフォントファミリー名 */
20  src: url('path/to/MyVariableFont.woff2') format('woff2'); /* 可変フォントファイルのパスを指定 */
21  /*
22   * `font-stretch`: このフォントがサポートするストレッチの最小値から最大値。
23   * 例: 50% (Ultra-condensed) から 200% (Ultra-expanded) まで。
24   * この範囲はフォントのメタデータに基づいて設定する必要があります。
25   */
26  font-stretch: 50% 200%;
27  font-weight: 100 900; /* 可変フォントの場合、ウェイト軸も範囲で定義 */
28}
29
30/* 2. 上記で定義したフォントファミリーをHTML要素に適用し、`font-stretch`プロパティで
31 *    具体的な伸縮度を指定します。
32 *    指定する値は、`@font-face`で定義した範囲内である必要があります。
33 *    フォントが`font-stretch`に対応していない場合、このプロパティは効果がありません。 */
34.my-stretched-text {
35  font-family: 'MyVariableFont', sans-serif; /* `@font-face`で定義したフォントを適用 */
36  /*
37   * `font-stretch`プロパティ: フォントの横幅を調整します。
38   * キーワード (例: 'condensed', 'normal', 'expanded') や
39   * 数値 (例: 75%, 125%, 175%) で指定できます。
40   * 「not working」と感じる場合、この値が`@font-face`で定義した範囲外である可能性もあります。
41   */
42  font-stretch: 125%; /* 例: 標準 (100%) よりも少し広めに */
43  font-size: 2.5em; /* サンプルテキストを見やすくするためのサイズ */
44  color: #2c3e50; /* テキストの色 */
45  text-align: center; /* テキストを中央揃えに */
46  border: 1px solid #ccc; /* 境界線を追加 */
47  padding: 15px; /* 内側の余白 */
48  margin: 20px auto; /* 外側の余白と中央配置 */
49  max-width: 600px; /* 最大幅を設定 */
50}

font-stretchは、CSSにおいてフォントの横幅（伸縮）を調整するために使用されるプロパティです。このプロパティは直接的な引数や戻り値を持たず、指定された値に応じてフォントの文字の見た目を変化させます。

「css font stretch not working」と感じる原因の多くは、使用しているフォントがfont-stretchに対応していない（可変フォントではない、または複数のストレッチバリエーションを持っていない）か、@font-faceルールでの設定が正しくない場合です。

この機能を効果的に利用するためには、まず@font-faceルールを用いてカスタムフォントを定義する際に、そのフォントがサポートするfont-stretchの範囲をディスクリプタで指定する必要があります。例えば、font-stretch: 50% 200%;と記述することで、そのフォントが極端に凝縮された状態から拡張された状態まで対応していることを示します。この設定は、font-stretchプロパティが機能するための前提条件となります。

その後、スタイルを適用したいHTML要素に、@font-faceで定義したフォントファミリーを指定し、font-stretchプロパティで具体的な伸縮度を設定します。この際に指定する値は、@font-faceで定義した範囲内である必要があります。例えば、font-stretch: 125%;と指定することで、標準よりも少し広めのフォント幅に調整できます。もし指定する値がフォントの対応範囲外であれば、効果は現れません。

このように、@font-faceでフォントの伸縮範囲を適切に定義し、その範囲内でfont-stretchプロパティを使用することで、フォントの横幅を柔軟に制御できるようになります。

Copy
1/*
2 * font-stretchプロパティのサンプルコード
3 *
4 * このプロパティは、フォントファイルが複数の幅（condensed, normal, expandedなど）をサポートしている場合に、
5 * その表示幅を水平方向に伸縮させるために使用します。
6 * 対応するフォントが指定されていない場合、視覚的な効果は現れません。
7 * (例として、"Arial Narrow"のようなフォントは 'condensed' バリアントを持つことがあります。)
8 */
9
10/* 通常のフォント幅を適用する例 */
11.font-stretch-normal {
12  font-family: "Arial", sans-serif; /* サンプル用に一般的なフォントを指定 */
13  font-stretch: normal; /* フォントの標準的な幅を適用 */
14  /* HTMLへの適用例: <p class="font-stretch-normal">これは通常の幅のテキストです。</p> */
15}
16
17/* 非常に圧縮されたフォント幅を適用する例 */
18.font-stretch-ultra-condensed {
19  font-family: "Arial Narrow", sans-serif; /* 圧縮バリアントを持つ可能性のあるフォント */
20  font-stretch: ultra-condensed; /* 可能な限り最も狭い幅を適用 */
21  /* HTMLへの適用例: <p class="font-stretch-ultra-condensed">これは非常に圧縮されたテキストです。</p> */
22}
23
24/* 拡張されたフォント幅を適用する例 */
25.font-stretch-expanded {
26  font-family: "Arial", sans-serif;
27  font-stretch: expanded; /* 広い幅を適用 */
28  /* HTMLへの適用例: <p class="font-stretch-expanded">これは拡張された幅のテキストです。</p> */
29}
30
31/* フォント幅をパーセンテージで調整する例 */
32.font-stretch-percentage {
33  font-family: "Arial", sans-serif;
34  font-stretch: 125%; /* フォントの通常の幅の125%に伸縮 (対応フォントが必要) */
35  /* HTMLへの適用例: <p class="font-stretch-percentage">これは125%の幅に設定されたテキストです。</p> */
36}

font-stretchはCSSのプロパティで、ウェブページに表示されるテキストのフォントの幅を水平方向に伸縮させるために使用されます。このプロパティの主な役割は、フォントファイル自体が複数の幅（例えば、condensed、normal、expandedなど）のバリアントをサポートしている場合に、その中からどの幅で表示するかを選択することです。

具体的な値としては、normalを指定することでフォントの標準的な幅が適用されます。ultra-condensedやexpandedといったキーワードを使用すると、それぞれ非常に圧縮された幅や拡張された幅でフォントが表示されます。また、125%のようにパーセンテージで指定することで、フォントの通常の幅に対する伸縮率を細かく調整することも可能です。

このプロパティは一般的なプログラミング言語のように引数を直接受け取るわけではなく、指定するキーワードやパーセンテージがその「値」として機能します。また、プロパティが適用されると、その結果はブラウザによって視覚的なスタイルとして要素に反映されるため、特定の戻り値を持つわけではありません。

重要な点として、font-stretchプロパティは、適用しようとしているフォント自体が複数の幅バリアントをサポートしている場合にのみ視覚的な効果を発揮します。もし対応するバリアントがないフォントにこのプロパティを適用しても、見た目の変化は現れないため、フォントの選択が非常に重要です。システムエンジニアを目指す初心者の方も、この特性を理解して利用してください。