【CSS Modules】widthメディア機能の使い方

Copy
1/*
2 * このクラスは、要素の幅をそのコンテンツに合わせて自動調整します。
3 * 親要素の幅より大きくなることはなく、最小限のコンテンツ幅も保証します。
4 * これにより、テキストの長さに応じてボックスの幅が変わる柔軟なレイアウトを作成できます。
5 */
6.fit-content-box {
7  /* 幅をコンテンツのサイズに合わせ、親要素の幅を超えないようにします */
8  width: fit-content;
9
10  /* サンプルを見やすくするための追加スタイル */
11  border: 1px solid #ccc; /* 境界線を追加 */
12  padding: 10px;           /* 内側の余白 */
13  margin: 10px auto;       /* 外側の余白と中央寄せ */
14  background-color: #f9f9f9; /* 背景色 */
15  color: #333;             /* 文字色 */
16  font-family: sans-serif; /* フォント */
17  max-width: 80%;          /* 親要素に対する最大幅の目安 */
18  text-align: center;      /* テキストを中央寄せ */
19}

CSSのwidthプロパティは、HTML要素の横幅を指定するために使用されます。特にwidth: fit-contentという指定は、要素の幅をそのコンテンツのサイズに合わせて柔軟に自動調整するための、非常に便利な値です。

fit-contentが指定された要素は、まずその内部に含まれるコンテンツ（テキスト、画像など）の幅を計測します。そして、そのコンテンツの幅に合わせて要素自身の幅を決定します。例えば、短いテキストが入っていればボックスの幅は狭くなり、長いテキストが入っていればそのテキスト全体が収まるように幅が広がります。

このfit-contentには、コンテンツに合わせるだけでなく重要な特性があります。一つは、親要素の利用可能な幅を超えないという点です。もしコンテンツの幅が親要素の幅よりも大きくなる場合でも、fit-contentは親要素の幅に収まるように調整されます。これにより、要素が親要素からはみ出すことなく、レイアウトの崩れを防ぎます。もう一つは、コンテンツが非常に短い場合でも、その内容の最小限の幅（min-content）を保持するという点です。これにより、意図しないほど幅が狭くなりすぎることを防ぎます。

fit-contentはwidthプロパティに設定する特殊なキーワード値であり、特定の引数を取ったり、値を返したりするものではありません。その役割は、要素の幅の計算方法を動的に定義することにあります。サンプルコードでは、.fit-content-boxクラスにwidth: fit-content;を適用することで、内部のコンテンツ量に応じて自動的に幅が調整される、柔軟なボックスが作成されています。

Copy
1/*
2  このCSSは単体で動作します。
3  CSS Modules環境で使用する場合、クラス名は自動的にスコープ化されます。
4*/
5
6/*
7  デフォルトスタイル: デスクトップなど広い画面での表示。
8  要素の最大幅を制限し、中央に配置します。
9*/
10.responsive-container {
11  max-width: 960px; /* コンテンツの最大幅を960pxに制限 */
12  margin: 20px auto; /* 上下20pxの余白、左右は自動で中央寄せ */
13  padding: 15px;
14  background-color: #f0f8ff; /* 優しい水色の背景 */
15  border: 1px solid #add8e6; /* 薄い青色のボーダー */
16  border-radius: 8px; /* 角を丸くする */
17  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
18  box-sizing: border-box; /* パディングとボーダーを幅に含める */
19  font-family: sans-serif;
20  color: #333;
21  text-align: center;
22}
23
24/*
25  メディア特性 'width' を使用したメディアクエリの例。
26  画面（ビューポート）の幅が768px以下の場合は、スタイルを上書きします。
27  これにより、狭い画面での「自動調整」された幅の挙動を実現します。
28*/
29@media (max-width: 768px) {
30  .responsive-container {
31    /*
32      画面幅が768px以下の場合、親要素の利用可能な幅いっぱいに広がる。
33      これはブロックレベル要素における 'width: auto;' が
34      「親の利用可能な幅を占める」という挙動に似ています。
35    */
36    width: 100%; /* 幅を100%に設定して、画面いっぱいに広げる */
37    max-width: none; /* デフォルトの最大幅設定を解除 */
38    margin: 10px 0; /* 上下10pxの余白、左右は端に寄せる */
39    padding: 10px;
40    border-radius: 0; /* 角の丸みを解除して、よりシンプルな見た目に */
41  }
42}

このCSSサンプルコードは、ウェブサイトをパソコン、タブレット、スマートフォンなど、様々な画面サイズに適切に対応させる「レスポンシブデザイン」の基本的な考え方を示しています。特に、CSSのメディア特性である「width」を使い、表示される画面の幅に応じてデザインを自動で切り替える方法を紹介します。

まず、.responsive-containerというクラスを持つ要素は、デフォルトでmax-width: 960px;により最大幅が960ピクセルに制限され、margin: 20px auto;によって画面の中央に配置されます。これは主にデスクトップなどの広い画面での見やすさを考慮したスタイルです。

次に、@media (max-width: 768px)という記述を用いて、画面（ビューポート）の幅が768ピクセル以下の場合にのみ適用されるスタイルを定義しています。この(max-width: 768px)の部分が、メディア特性のwidthを利用して「画面の最大幅が768ピクセルまで」という条件を指定している箇所です。

この条件が満たされると、.responsive-containerのスタイルが上書きされます。具体的には、width: 100%;と設定することで、要素は親要素の利用可能な幅いっぱいに広がるようになります。また、max-width: none;でデフォルトの最大幅制限を解除し、margin: 10px 0;で左右の自動中央寄せを解除して、画面の端から端までフィットさせます。このwidth: 100%の挙動は、ブロックレベル要素でwidth: auto;を指定した際に、親要素の利用可能な幅を自動的に占める挙動と非常によく似ています。

このように、widthメディア特性は特定の引数や戻り値を持つわけではありませんが、(min-width: 値)や(max-width: 値)のように具体的な幅の値を条件として指定することで、その条件に合致した場合にのみスタイルを適用させ、ウェブページのレイアウトを柔軟に調整することを可能にします。これにより、ユーザーの利用環境に応じた最適な表示を提供できるようになります。