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

Copy
1/*
2 * CSS Modulesにおけるpaddingプロパティの基本的な使用例。
3 * このファイルは通常、例として 'MyComponent.module.css' のように命名されます。
4 * CSS Modulesでは、定義されたクラス名は自動的にスコープ化され、
5 * 他のCSSファイルとの衝突を防ぎます。
6 */
7
8.contentWrapper {
9  /* 背景色と境界線を設定し、paddingの効果を視覚的に分かりやすくします。 */
10  background-color: #f0f0f0; /* 薄いグレーの背景 */
11  border: 1px solid #ccc;    /* 境界線 */
12  margin: 10px;              /* 外部余白（要素の外側） */
13  width: 250px;              /* 要素の幅 */
14  min-height: 100px;         /* 要素の最小高さ */
15  box-sizing: border-box;    /* paddingとborderをwidth/heightに含める */
16
17  /*
18   * paddingプロパティは、要素のコンテンツと境界線の間の内側の余白を設定します。
19   * 値は、ピクセル(px)、パーセンテージ(%)、em、remなど、様々な単位で指定できます。
20   */
21
22  /* paddingの最も一般的な指定方法（上下左右すべて同じ値） */
23  padding: 20px; /* 上下左右の内側余白を20ピクセルに設定 */
24
25  /*
26   * 必要に応じて、個別の方向や異なる値を指定することも可能です。
27   *
28   * 例1: 4つの値の指定 (上、右、下、左)
29   * padding: 10px 20px 30px 40px;
30   *
31   * 例2: 2つの値の指定 (上下、左右)
32   * padding: 15px 25px;
33   *
34   * 例3: 個別プロパティでの指定
35   * padding-top: 10px;
36   * padding-right: 20px;
37   * padding-bottom: 30px;
38   * padding-left: 40px;
39   */
40}
41
42/*
43 * padding プロパティは、UIのレイアウトや要素間のスペース調整に不可欠です。
44 * 特に、ボタン、カード、テキストブロックなどのコンポーネントで頻繁に使用されます。
45 */

このサンプルコードは、CSS Modulesの環境下でpaddingプロパティを使用する基本的な方法を示しています。paddingプロパティは、HTML要素のコンテンツ（中身）と、その要素の境界線（ボーダー）との間に設ける「内側の余白」を設定するために利用されます。これにより、要素の内部に適切な空間を作り出し、要素内のテキストや画像などの配置を調整し、視覚的に整ったレイアウトを実現します。

サンプルコード中の.contentWrapperクラスでは、padding: 20px;と指定されています。この記述は、このクラスが適用される要素の上下左右すべての内側余白を、均等に20ピクセルに設定することを意味します。paddingプロパティは、1つの値で全方向の余白を、2つの値で上下と左右の余白を、または4つの値で上、右、下、左の順に異なる余白を設定するなど、柔軟な指定が可能です。また、padding-topやpadding-leftのように、特定の方向のみを個別に設定することもできます。

CSS Modulesは、それぞれのCSSファイル内で定義されたクラス名が自動的に固有のスコープを持つため、他のCSSファイルとのクラス名の衝突を気にすることなく、安全にスタイルを定義できる特徴があります。これにより、開発者は安心して.contentWrapperのような簡潔なクラス名を使用できます。

paddingプロパティは、関数のように特定の引数を取るわけではなく、20pxや10%といった余白の「値」を設定します。これらの値に基づいてブラウザが要素のレイアウトを計算し、視覚的な空間を生成します。また、CSSプロパティには関数のような「戻り値」の概念は通常なく、設定された値が直接要素の見た目に影響を与える形で機能します。paddingは、UIの見た目を効果的に調整するために非常に重要なプロパティです。

Copy
1/*
2 * paddingプロパティは要素の内側の余白（パディング）を設定します。
3 * 値の指定数によって、適用される辺の順序が変わるため、理解が重要です。
4 * （このコードはCSS Modulesの環境でも通常のCSSとして機能します。）
5 */
6
7/*
8 * 1つの値を指定した場合:
9 * 上下左右すべてのパディングに同じ値が適用されます。
10 */
11.elementPadAll {
12  padding: 20px;
13  background-color: #f0f8ff; /* パディングを視覚化するための背景色 */
14  border: 1px solid #add8e6; /* パディング範囲を明確にする境界線 */
15  margin-bottom: 10px; /* 各要素間のスペースを確保 */
16}
17
18/*
19 * 2つの値を指定した場合:
20 * 1番目の値が上下のパディングに、
21 * 2番目の値が左右のパディングに適用されます。
22 */
23.elementPadVerticalHorizontal {
24  padding: 10px 30px;
25  background-color: #f5f5dc;
26  border: 1px solid #deb887;
27  margin-bottom: 10px;
28}
29
30/*
31 * 3つの値を指定した場合:
32 * 1番目の値が上のパディングに、
33 * 2番目の値が左右のパディングに、
34 * 3番目の値が下のパディングに適用されます。
35 */
36.elementPadTopSidesBottom {
37  padding: 5px 25px 15px;
38  background-color: #e0ffff;
39  border: 1px solid #afeeee;
40  margin-bottom: 10px;
41}
42
43/*
44 * 4つの値を指定した場合:
45 * 値は上、右、下、左の順（時計回り）に適用されます。
46 * (例: padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px;)
47 */
48.elementPadTopRightBottomLeft {
49  padding: 10px 20px 30px 40px;
50  background-color: #ffe4e1;
51  border: 1px solid #cd5c5c;
52  margin-bottom: 10px;
53}
54
55/*
56 * 参考: 各辺に個別のプロパティでパディングを設定することもできます。
57 * これは4つの値を指定するのと同様の結果になります。
58 */
59.elementPadIndividual {
60  padding-top: 5px;
61  padding-right: 10px;
62  padding-bottom: 15px;
63  padding-left: 20px;
64  background-color: #f0fff0;
65  border: 1px solid #90ee90;
66  margin-bottom: 10px;
67}

CSSのpaddingプロパティは、HTML要素の内側にある余白、つまりパディングを設定するために用いられます。このプロパティは値を指定することで要素の見た目を調整し、一般的なプログラミング言語の関数のように引数を受け取ったり、結果を返したりするものではありません。そのため、リファレンス情報にある「引数」や「戻り値」といった概念は直接適用されません。

paddingプロパティに指定する値の数によって、その値が要素のどの辺（上、右、下、左）に適用されるかの順序が変わるため、理解しておくことが重要です。

値を一つだけ指定した場合、その値は要素の上下左右すべてのパディングに同じように適用されます。例えばpadding: 20px;と記述すると、要素の上下左右に一律20ピクセルの余白が生まれます。

次に、値を二つ指定した場合、最初の値が上下のパディングに、二番目の値が左右のパディングに適用されます。padding: 10px 30px;では、上下に10ピクセル、左右に30ピクセルの余白が設定されます。

三つの値を指定した場合、一つ目の値は上のパディングに、二つ目の値は左右のパディングに、三つ目の値は下のパディングに適用されます。例えばpadding: 5px 25px 15px;では、上が5ピクセル、左右が25ピクセル、下が15ピクセルとなります。

最後に、四つの値を指定した場合、値は上、右、下、左の順で、時計回りにそれぞれのパディングに適用されます。padding: 10px 20px 30px 40px;では、上が10ピクセル、右が20ピクセル、下が30ピクセル、左が40ピクセルの余白となります。

また、padding-topやpadding-rightのように、各辺に個別のプロパティを使ってパディングを設定することも可能で、これは四つの値を指定する方法と同じ結果を得られます。