A property that sets the “height side” of an element no matter the writing direction; it works like height
in horizontal text and stays correct in vertical text, so your layout remains steady across languages.
block-size
は「文章が流れる向きに対して“高さ側(ブロック方向)”の長さ」を決めるプロパティです。横書きなら実質的に height
、縦書きでもそのまま“高さ側”として働くので、多言語や縦書き対応のレイアウトが作りやすくなります。
書字方向に強い(論理)指定なので、writing-mode
が横書き/縦書きのどちらでも意図通りに効きます。
block-size
は要素のブロック方向の使用サイズを指定します。値は auto
、length
、percentage
、fit-content()
などを取れ、パーセントは通常は包含ブロックのブロック方向の大きさを基準に解釈されます。
min-block-size
/ max-block-size
writing-mode
によって決まり、横書きでは上下、縦書きでは左右の物理方向に相当します。横書きのときは block-size
≒ height
、縦書きでは height
と一致しない場合がある点に注意してください。
block-size: 12rem;
のように論理指定で統一すると、横書き/縦書きで見た目が揃います。block-size: 50%;
など。親のブロック方向サイズに対して割合で指定できます。min-block-size
と max-block-size
を併用し、overflow
でスクロール等を許可します。CSS
.card {
box-sizing: border-box;
inline-size: 100%;
block-size: 14rem; /* 書字方向に強い“高さ側” */
max-block-size: 60vh; /* 画面が低いときの上限 */
overflow: auto; /* はみ出したらスクロール */
padding: 1rem;
border: 1px solid #ccc;
}
HTML
<section class="wrap">
<div class="box">Hello, block-size!</div>
<div class="box vertical">縦書きでもOK</div>
</section>
CSS
.wrap {
display: grid;
gap: 1rem;
}
.box {
inline-size: 16rem; /* 横方向(論理)*/
block-size: 8rem; /* 高さ側(論理)*/
padding: 0.5rem;
border: 1px solid #bbb;
background: #f8f8f8;
}
.vertical {
writing-mode: vertical-rl; /* 縦書き */
/* 同じ指定でも“高さ側”が左右の長さに切り替わる */
}
同じ CSS でも、縦書きに切り替えるだけで “高さ側” が自然に回転して解釈されます。
height
と block-size
を同時に指定しない(同じ“高さ側”を指すため、後から書いた方が勝ちます)。overflow
で制御(例:overflow: auto;
)。box-sizing: border-box;
を併用。height
ではなく block-size
を基本にすると保守が楽。CSS
.bio {
/* NG: height と block-size の“二重管理”は避ける */
/* height: 200px; */
block-size: 200px; /* これだけに統一 */
overflow: auto;
}