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

block-sizeプロパティは、CSSレイアウトにおいて、要素のブロック方向のサイズを保持するプロパティです。このプロパティは、要素が配置されるレイアウトの進行方向（ブロック軸）に沿った寸法を制御します。

Webページで一般的に使用される、上から下へ文章が流れる書字方向（writing-mode: horizontal-tb）の場合、block-sizeプロパティは要素の高さ（heightプロパティ）と同じ役割を果たします。しかし、日本語の縦書きのように、右から左へ文章が流れる書字方向（writing-mode: vertical-rl）の場合、block-sizeプロパティは要素の幅（widthプロパティ）に対応します。

このようにblock-sizeは、writing-modeプロパティの値によって参照する物理的な寸法（高さまたは幅）が自動的に切り替わる「論理プロパティ」の一つです。従来のheightやwidthといった物理的なプロパティを使用すると、書字方向が変わるたびにCSSを修正する必要がありましたが、block-sizeを使用することで、書字方向の変化に対して柔軟に対応できる汎用的なスタイルを記述することが可能になります。

これは、多言語対応や異なる書字システムに対応するWebサイトやアプリケーションを開発する際に非常に有効です。block-sizeの値には、ピクセル（px）やem、remといった具体的な長さ、親要素に対する割合を示すパーセンテージ（%）、コンテンツのサイズに合わせて自動調整するautoなどが設定できます。システムエンジニアを目指す上で、このような論理プロパティの理解は、国際化されたユーザーインターフェースを効率的に構築するための重要な基礎知識となります。

Copy
1.element {
2  block-size: <length> | <percentage> | auto | max-content | min-content | fit-content;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません