備忘録的プログラミングリファレンス

block-size プロパティ

 block-size プロパティは、ブロックエレメントにおける横書きでは高さ、縦書きでは幅を指定する CSS のプロパティです。
 writing-mode との組み合わせが有用です。 writing-mode はその指定値によって横書きや縦書きができます。 block-size プロパティで指定されたサイズは、横書きでは高さに、縦書きでは幅として設定されます。

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デフォルト値。多くの場合は親エレメントの横幅
lengthCSS の長さ
%割合
keywordmax-content、min-content、fit-content( )
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)auto
継承(Inherited)No
CSS AnimationYes

Example

 block-size プロパティの例です。 横書きと縦書き同じ値を指定しています。横書きの場合は高さとして、縦書きの場合は幅として設定されます。