【CSS Modules】overflow-blockプロパティの使い方

overflow-blockプロパティは、要素のブロックフロー方向におけるコンテンツのオーバーフローを制御するプロパティです。このプロパティは、物理的なoverflow-yやoverflow-xプロパティとは異なり、writing-modeプロパティによって定義されるテキストの書き込み方向（例えば、横書きや縦書き）に応じて、コンテンツが流れる論理的なブロック方向のオーバーフローを扱います。具体的には、横書きモード（horizontal-tb）では垂直方向のオーバーフローを制御し、縦書きモード（vertical-lrやvertical-rl）では水平方向のオーバーフローを制御します。

overflow-blockプロパティは、visible、hidden、clip、scroll、autoといった値を指定できます。visibleを指定すると、要素からはみ出したコンテンツもそのまま表示されます。hiddenを指定すると、はみ出したコンテンツは切り取られて表示されません。clipはhiddenに似ていますが、スクロール可能な領域が提供されないことを明示的に示します。scrollを指定すると、コンテンツがはみ出しているかどうかにかかわらず、常にスクロールバーが表示されます。autoを指定すると、コンテンツが要素からはみ出す場合にのみ、スクロールバーが表示されます。

このプロパティは、特に多言語対応や国際化されたウェブサイトにおいて非常に重要です。writing-modeによってレイアウト方向が変化する多様な言語のコンテンツに対して、一貫したオーバーフロー制御を簡潔に実装できます。これにより、柔軟で保守性の高いレイアウトが実現でき、ユーザー体験の向上やアクセシビリティの確保にも貢献する、モダンなCSSレイアウトにおける重要な要素の一つです。

Copy
1selector {
2  overflow-block: auto;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません