【CSS Modules】overflow-inlineメディア機能の使い方

Copy
1/*
2 * `.overflow-container` クラスは、インライン方向（通常は横方向）に
3 * コンテンツがはみ出す可能性があるコンテナの基本的なスタイルを定義します。
4 * `white-space: nowrap` はテキストの折り返しを防ぎ、
5 * `overflow-x: auto` は必要に応じて横スクロールバーを表示させます。
6 */
7.overflow-container {
8  width: 250px; /* コンテナの幅を制限し、コンテンツがはみ出す状況を作り出します */
9  border: 2px solid #ccc;
10  padding: 10px;
11  margin: 20px;
12  white-space: nowrap; /* テキストが自動で折り返されないようにします */
13  overflow-x: auto; /* 横方向のコンテンツがはみ出した場合にスクロールバーを表示します */
14  background-color: #f0f8ff; /* デフォルトの背景色（水色系） */
15  font-family: sans-serif;
16  color: #333;
17}
18
19/*
20 * `@media (overflow-inline: scroll)` は、CSS Modulesのメディア機能の一つで、
21 * ユーザーエージェント（ブラウザ）がインライン方向のコンテンツのはみ出しに対して
22 * スクロール機構を提供する場合にのみ適用されるスタイルを定義します。
23 *
24 * この例では、ブラウザがインラインスクロールを提供できる環境（ほとんどのデスクトップブラウザ）で、
25 * `.overflow-container` の背景色とボーダーの色を変更します。
26 * これにより、デバイスやブラウザの特性に応じてデザインを調整するのに役立ちます。
27 *
28 * このメディアクエリが適用されるHTMLの例:
29 * `<div class="overflow-container">これは、非常に非常に非常に長いテキストの例です。横スクロールが発生するはずです。</div>`
30 */
31@media (overflow-inline: scroll) {
32  .overflow-container {
33    background-color: #e6ffe6; /* インラインスクロールが利用可能であれば背景色を変更（緑系） */
34    border-color: #28a745; /* ボーダーの色も変更 */
35    color: #1a5e20;
36    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 影を追加 */
37  }
38}

このCSSサンプルコードは、CSS Modulesのメディア機能の一つであるoverflow-inlineを用いて、ブラウザがインライン方向のコンテンツのオーバーフロー（はみ出し）をスクロールで処理できるかどうかに応じてスタイルを適用する方法を示しています。

overflow-inlineはメディアクエリの機能であり、特定の環境条件が満たされた場合にのみスタイルを適用するために使用されます。この機能自体は、引数や戻り値は持ちません。

まず、.overflow-containerクラスは、コンテンツがインライン方向（通常は横方向）にはみ出す可能性のある要素の基本的なスタイルを定義しています。widthプロパティで幅を制限し、white-space: nowrapでテキストの自動折り返しを防ぎ、overflow-x: autoによってコンテンツがはみ出した場合に横方向のスクロールバーが表示されるように設定されています。これにより、スクロールが必要な状態を作り出しています。

次に、@media (overflow-inline: scroll)というメディアクエリブロックが登場します。これは、「ブラウザがインライン方向のコンテンツのはみ出しに対してスクロール機構を提供できる場合に」という条件を表しています。この条件が満たされた環境、例えば多くのデスクトップブラウザなどでは、.overflow-containerの背景色やボーダーの色が変更され、影が追加されるように設定されています。

このようにoverflow-inlineメディア機能を利用することで、ユーザーエージェント（ブラウザ）やデバイスの特性に応じて、コンテンツのはみ出し処理の有無によって表示を切り替えることができ、より柔軟なデザイン調整を実現するのに役立ちます。

Copy
1/*
2 * システムエンジニアを目指す初心者向けCSSサンプルコード
3 *
4 * このコードは、CSSのメディア特性 `overflow-inline` の基本的な使い方と、
5 * `display: inline-block` および `overflow` プロパティの関連性を示します。
6 *
7 * `overflow-inline` は、ブラウザやデバイスがコンテンツのインライン方向のオーバーフローを
8 * どのように処理するか（スクロール可能か、ページ送りされるかなど）を検出するために使用されます。
9 */
10
11/*
12 * 共通スタイル:
13 * `display: inline-block` で、インライン要素のように並びつつ、
14 * ブロック要素のように幅や高さを設定できるコンテナを作成します。
15 * `white-space: nowrap` でテキストの折り返しを禁止し、オーバーフローを発生しやすくします。
16 * デフォルトでは、オーバーフローしたコンテンツを非表示にします (`overflow: hidden`)。
17 */
18.overflow-container {
19  display: inline-block; /* インライン要素のように並び、ブロック要素のプロパティを適用可能にする */
20  width: 250px;          /* コンテナの幅を固定 */
21  height: 60px;          /* コンテナの高さを固定 */
22  border: 1px solid #0056b3; /* 境界線を追加 */
23  margin: 10px;          /* 外側の余白 */
24  padding: 5px;          /* 内側の余白 */
25  background-color: #e0f7fa; /* 背景色 */
26  white-space: nowrap;   /* テキストがコンテナの幅を超えても折り返さず、インライン方向に伸びるようにする */
27  overflow: hidden;      /* デフォルトでは、はみ出した内容を非表示にする */
28  text-overflow: ellipsis; /* はみ出したテキストの末尾を「...」で示す（hiddenと併用） */
29  line-height: 25px;     /* テキストの行高 */
30  font-family: sans-serif;
31  font-size: 14px;
32}
33
34/*
35 * @media (overflow-inline: scroll)
36 *
37 * このメディアクエリは、ユーザーエージェント（Webブラウザなど）が
38 * インライン方向のオーバーフローをスクロール可能として処理する環境に適用されます。
39 * このような環境では、必要に応じてスクロールバーを表示するように `overflow` プロパティを変更します。
40 */
41@media (overflow-inline: scroll) {
42  .overflow-container {
43    overflow: auto; /* 必要に応じて水平スクロールバーを表示する */
44    border-color: #28a745; /* スタイルが適用されたことを示すために境界線の色を変更 */
45    color: #28a745;       /* テキストの色も変更 */
46    text-overflow: clip;  /* スクロール可能なので、テキストの切り詰めをしない */
47  }
48}
49
50/*
51 * @media (overflow-inline: none)
52 *
53 * このメディアクエリは、ユーザーエージェントがインライン方向のオーバーフローを
54 * スクロール可能としない（またはページ送りの対象としない）環境に適用されます。
55 * 例として、コンテンツが完全に収まることを想定した特殊な表示環境などが考えられます。
56 * この場合、デフォルトの `hidden` のままか、別の方法で処理することを想定します。
57 */
58@media (overflow-inline: none) {
59  .overflow-container {
60    overflow: hidden;      /* スクロールできない環境では、はみ出した内容は非表示にするのが一般的 */
61    border-color: #dc3545;  /* スタイルが適用されたことを示すために境界線の色を変更 */
62    color: #dc3545;        /* テキストの色も変更 */
63  }
64}
65
66/*
67 * @media (overflow-inline: paged)
68 *
69 * このメディアクエリは、ユーザーエージェントがインライン方向のオーバーフローを
70 * ページ送り（例: 電子書籍リーダーや印刷媒体）として処理する環境に適用されます。
71 * このような環境では、はみ出したコンテンツは自動的に次のページに送られるため、
72 * `overflow: visible` などが妥当な場合があります。
73 */
74@media (overflow-inline: paged) {
75  .overflow-container {
76    overflow: visible;    /* ページ送り環境では、はみ出しても次のページに送られるため可視にする */
77    border-color: #ffc107; /* スタイルが適用されたことを示すために境界線の色を変更 */
78    color: #ffc107;       /* テキストの色も変更 */
79    font-size: 1.1em;     /* フォントサイズも少し大きくする */
80    white-space: normal;  /* ページ送りの場合は通常折り返しを許可する */
81    text-overflow: clip;
82  }
83}

CSSのoverflow-inlineメディア特性は、Webブラウザやデバイスがインライン方向（主に横方向）のコンテンツのはみ出し（オーバーフロー）をどのように扱うかを検出するために使用されます。この特性には引数も戻り値もありませんが、ユーザーエージェントがオーバーフローを処理する方法に応じて、scroll、none、pagedのいずれかの値が内部的に評価されます。

このサンプルコードでは、まずdisplay: inline-blockによって、インライン要素のように並びつつ、幅や高さといったブロック要素の特性を持つoverflow-containerを定義しています。white-space: nowrapと固定幅の組み合わせで意図的にテキストをはみ出させ、デフォルトではoverflow: hiddenではみ出し部分を非表示にし、text-overflow: ellipsisで末尾に「...」を表示しています。

@media (overflow-inline: scroll)のメディアクエリは、インライン方向のオーバーフローをスクロール可能として扱う環境に適用されます。ここではoverflow: autoを設定し、必要に応じて水平スクロールバーを表示させ、スクロールできるためtext-overflow: clipで省略表示を解除しています。

@media (overflow-inline: none)は、オーバーフローをスクロールもページ送りもしない環境に適用され、はみ出した内容はoverflow: hiddenのままで非表示にします。

最後に@media (overflow-inline: paged)は、インライン方向のオーバーフローをページ送りとして扱う環境（電子書籍リーダーや印刷時など）に適用されます。この場合、overflow: visibleを設定することでコンテンツがはみ出しても表示され、次のページへ自動的に送られることを想定しています。また、white-space: normalでテキストの折り返しも許可しています。

このように、overflow-inlineメディア特性を利用することで、様々な表示環境に合わせてコンテンツのオーバーフロー処理を最適化できることをこのサンプルコードは示しています。