【CSS Modules】overflow-inlineプロパティの使い方
overflow-inlineプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
overflow-inlineプロパティは、要素のインライン方向におけるコンテンツのオーバーフローを制御するための値を保持するプロパティです。このプロパティはCSS Modulesで使用される論理プロパティの一つであり、テキストの書き込みモード（writing-mode）やテキストの方向（direction）に依存して動作します。
具体的には、要素の内容がインライン方向（例えば、横書きのウェブページでは通常は水平方向）に親要素の境界からはみ出した場合に、そのはみ出した部分をどのように表示するかを決定します。従来のoverflow-xやoverflow-yといった物理的な方向を指定するプロパティとは異なり、overflow-inlineは言語の書字方向に応じてその意味が変化するため、多言語対応のウェブサイトや、縦書きレイアウトなど、さまざまな書き込みモードに対応したデザインを柔軟に構築する際に非常に役立ちます。
設定できる値としては、visible（はみ出した内容も表示する）、hidden（はみ出した内容は切り詰めて表示しない）、scroll（はみ出したらスクロールバーを表示する）、auto（必要に応じてスクロールバーを表示する）などがあります。これらの値を適切に設定することで、レイアウトの崩れを防ぎながら、ユーザーが必要な情報にアクセスできるように制御することが可能です。このプロパティを理解し活用することで、国際化されたWebアプリケーションのユーザーインターフェースをより堅牢かつ使いやすく設計できるようになります。
公式リファレンス: overflow-inline
構文(syntax)
1.element { 2 overflow-inline: auto; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません