Yugien - 遊戯苑
テーマ

CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

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

やさしい説明

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 でも、縦書きに切り替えるだけで “高さ側” が自然に回転して解釈されます。

よくあるつまずき（注意点）

CSS

.bio {
	/* NG: height と block-size の“二重管理”は避ける */
	/* height: 200px; */
	block-size: 200px;      /* これだけに統一 */
	overflow: auto;
}