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

overflow-inlineプロパティは、ユーザーエージェントがビューポートのインライン方向におけるコンテンツのオーバーフロー処理に関する特性を保持するプロパティです。これはCSS Media Queries Level 5で定義されるメディア特性の一つであり、ウェブサイトやアプリケーションが動作する環境が、インライン方向にはみ出したコンテンツをどのように扱うかを判定するために用いられます。

このプロパティを使用することで、例えば、左右に長いコンテンツや、右から左へ記述する言語（RTL）のコンテンツが、画面幅に収まらない場合に、その表示方法に応じてスタイルを柔軟に変更することが可能になります。overflow-inlineプロパティが取りうる値は主に以下の3つです。

まず、「none」は、インライン方向のオーバーフローコンテンツがスクロール可能ではないことを示します。コンテンツは単に切り取られるか、ビューポートからはみ出して見えなくなる状態です。次に、「scroll」は、インライン方向のオーバーフローコンテンツがユーザーの操作によってスクロール可能であることを示します。これは、通常、スクロールバーが表示されるか、またはフリック操作などでスクロールできる状態を指します。そして、「paged」は、インライン方向のオーバーフローコンテンツがページ分割されたビューで扱われることを示します。これは、電子書籍リーダーのようにコンテンツが複数の「ページ」に分割されて表示される環境で特に適用されます。

このメディア特性は、@media (overflow-inline: scroll)のようにメディアクエリ内で条件として記述し、その条件に合致する環境に対してのみ特定のCSSスタイルを適用する際に利用します。これにより、様々なデバイスやユーザー設定、アクセシビリティ要件に対応した、より高度なレスポンシブデザインやアダプティブデザインを実現できます。コンテンツが多岐にわたる環境や、多様な言語に対応するシステムにおいて、ユーザー体験を損なわずに情報を効果的に提供するための重要なツールとなります。

Copy
1@media (overflow-inline: scroll) {
2  /* ここにスタイルを記述 */
3}

引数なし

引数はありません

戻り値なし

戻り値はありません