block-size プロパティ
block-size プロパティは、ブロックエレメントにおける横書きでは高さ、縦書きでは幅を指定する CSS のプロパティです。
writing-mode との組み合わせが有用です。
writing-mode はその指定値によって横書きや縦書きができます。
block-size プロパティで指定されたサイズは、横書きでは高さに、縦書きでは幅として設定されます。
.contents {
inline-size: 30em;
block-size : 8em;
}
詳しくは Example を参照してください
block-size プロパティのみでも機能します。エレメントの height の代用としても利用ができます。
高さ、block-size に対して垂直方向の長さは inline-size プロパティです。詳しくは、 inline-size プロパティを参照してください。
block-size は横書きにおいてはその高さ、縦書きにおいてはその幅になります。 inline-size は横書きではその幅、縦書きではその高さになります。
ページ内 Index
構文(Syntax)
CSS
block-size: auto | length | % | keyword ;
DOM ( JavaScript )
＊以下は試す必要があります。
String = object.style.blockSize;
object.style.blockSize=" auto | length | % | keyword ";
値（Values）
| Value | 摘要 |
|---|---|
| auto | デフォルト値。多くの場合は親エレメントの横幅 |
| length | CSS の長さ |
| % | 割合 |
| keyword | max-content、min-content、fit-content( ) |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | auto |
| 継承（Inherited） | No |
| CSS Animation | Yes |
Example
block-size プロパティの例です。 横書きと縦書き同じ値を指定しています。横書きの場合は高さとして、縦書きの場合は幅として設定されます。
関連する CSS プロパティ
以下のような block-size に関連する CSS プロパティがあります。
| プロパティ名 | 概要 |
|---|---|
| border-block | 横書きでは上下、縦書きでは左右の border （枠線） |
| border-inline | 横書きでは左右、縦書きでは上下の border （枠線） |
| block-size | 横書きでは高さ、縦書きでは幅に設定される |
| inline-size | 横書きでは幅、縦書きでは高さに設定される |
| direction | テキストの右寄せ、左寄せ |
| unicode-bidi | Unicodeの記述方向を指定する |
| text-orientation | 縦書きテキストにおけるフォントの向き |
| writing-mode | テキストの記述方向 |