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

Copy
1/*
2 * font-style プロパティは、テキストのフォントスタイル（例: 通常、イタリック体、斜体）を設定します。
3 * システムエンジニアを目指す初心者向けに、font-styleの主な値を一覧で示します。
4 */
5
6/*
7 * font-style: normal;
8 * 標準のフォントスタイルです。通常、デフォルト値として適用されます。
9 */
10.font-style-normal {
11  font-style: normal;
12}
13
14/*
15 * font-style: italic;
16 * テキストをイタリック体（斜体）で表示します。
17 * フォントにイタリック体が存在する場合に適用されます。
18 */
19.font-style-italic {
20  font-style: italic;
21}
22
23/*
24 * font-style: oblique;
25 * テキストを斜体で表示します。
26 * フォントにイタリック体が存在しない場合、フォントの通常の形を傾けて表示します。
27 * 角度を指定することも可能です（例: oblique 10deg;）。
28 */
29.font-style-oblique {
30  font-style: oblique;
31}
32
33/*
34 * font-style: oblique 10deg;
35 * obliqueに具体的な角度（degは「度」を意味します）を指定することで、
36 * その角度でテキストを傾けることができます。
37 * 対応するフォントが必要です。
38 */
39.font-style-oblique-angled {
40  font-style: oblique 10deg;
41}
42
43/*
44 * font-style: inherit;
45 * 親要素からfont-styleプロパティの値を継承します。
46 */
47.font-style-inherit {
48  font-style: inherit;
49}
50
51/*
52 * font-style: initial;
53 * このプロパティの初期値（デフォルト値）に設定します。
54 * 通常は 'normal' になります。
55 */
56.font-style-initial {
57  font-style: initial;
58}
59
60/*
61 * font-style: unset;
62 * 親要素から値を継承できる場合は 'inherit' のように動作し、
63 * そうでない場合は 'initial' のように動作します。
64 */
65.font-style-unset {
66  font-style: unset;
67}

font-styleプロパティは、ウェブページ上のテキストのフォントスタイル、例えば通常表示やイタリック体、斜体などを設定するためのCSSプロパティです。このプロパティには引数や戻り値はありません。

主な値として、normalは標準のフォントスタイルを指定し、ほとんどの場合デフォルト値として適用されます。テキストをイタリック体で表示したい場合はitalicを指定します。これは、そのフォントがイタリック体を持っている場合に適用される値です。

obliqueを指定するとテキストは斜体で表示されます。italicと異なり、フォントにイタリック体が存在しない場合でも、通常のフォントの形を傾けて表示するという特徴があります。さらに、oblique 10degのように具体的な角度（degは「度」を意味します）を指定することで、その角度でテキストを傾けることも可能です。

その他に、親要素のスタイルを継承するinherit、プロパティの初期値（通常はnormal）を設定するinitial、そして親から継承できる場合はinheritのように、そうでない場合はinitialのように動作するunsetといった値も利用できます。これらの値は、スタイルシート全体での一貫性や特定の状況での挙動を制御する際に役立ちます。

Copy
1/*
2 * システムエンジニア初心者向けCSSサンプルコード
3 * このスタイルは、HTML要素にクラス名 "myText" を適用することで、
4 * テキストを斜体（italic）で太字（bold）に設定します。
5 */
6.myText {
7  /*
8   * font-style プロパティは、テキストを斜体にするかどうかを指定します。
9   * 'normal': 標準のスタイル (斜体ではない)
10   * 'italic': フォントのイタリック体を使用します。
11   * 'oblique': フォントの傾斜体を使用します。
12   */
13  font-style: italic;
14
15  /*
16   * font-weight プロパティは、テキストの太さを指定します。
17   * 'normal' (400): 標準の太さ
18   * 'bold' (700): 太字
19   * 100から900までの数値でより細かい太さを指定することもできます。
20   */
21  font-weight: bold;
22}

このCSSサンプルコードは、Webページ上のテキストに特定の見た目を適用する方法を示しています。myTextというクラス名を持つHTML要素にこのスタイルが適用されると、そのテキストが斜体で太字に表示されます。

まず、font-styleプロパティは、テキストを斜体にするかどうかを指定するために使用します。このプロパティ自体にプログラミング言語の関数のような引数や戻り値の概念はありませんが、italic、normal、obliqueといった値を指定することで、テキストの表示スタイルを制御します。例えば、font-style: italic;と記述することで、フォントが持つイタリック体（斜体）が適用されます。normalは標準のスタイル（斜体ではない）を指定し、obliqueは傾斜体を使用します。

次に、font-weightプロパティは、テキストの太さを指定します。こちらも引数や戻り値はありませんが、boldやnormalといった値、あるいは100から900までの数値で太さを設定できます。サンプルコードではfont-weight: bold;と記述されており、これによりテキストは太字で表示されることになります。normalは標準の太さ（数値の400に相当）です。

このように、font-styleとfont-weightプロパティを組み合わせることで、テキストの見た目を細かく調整し、ユーザーインターフェースのデザイン要件を満たすことができます。