概要
block-size CSS プロパティは、要素ブロックの writing-mode に応じた水平または垂直方向のサイズを定義します。これは、writing-mode に指定された値に依存し、width または height プロパティに相当します。
writing-mode が垂直指向の場合、block-size の値は要素の幅に関連付けられ、水平指向の場合は要素の高さに関連付けられます。これは、要素のもう一方の次元を定義する inline-size と関連します。
| 初期値 | auto |
|---|---|
| 適用対象 | same as width and height |
| 継承 | なし |
| パーセンテージ | block-size of containing block |
| メディア | 視覚 |
| 計算値 | same as width and height |
| アニメーションの種類 | 個別 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
/* <length> 値 */ block-size: 300px; block-size: 25em; /* <percentage> 値 */ block-size: 75%; /* キーワード値 */ block-size: 25em border-box; block-size: 75% content-box; block-size: max-content; block-size: min-content; block-size: available; block-size: fit-content; block-size: auto; /* グローバル値 */ block-size: inherit; block-size: initial; block-size: unset; </percentage></length>
値
block-size プロパティは、width や height プロパティと同じ値を取ります。
正式な構文
<'width'>
例
HTML コンテンツ
Example text
CSS コンテンツ
.exampleText {
writing-mode: vertical-rl;
background-color: yellow;
block-size: 200px;
}
仕様
| 仕様書 | 状況 | コメント |
|---|---|---|
| CSS Logical Properties and Values Level 1 block-size の定義 |
編集者草案 | 初期定義 |
ブラウザの実装状況
現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。
この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。
手助けしていただける場合は、こちらから！
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | 未サポート | 41.0 (41.0)[1] | 未サポート | 未サポート | 未サポート |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 未サポート | 41.0 (41.0)[1] | 未サポート | 未サポート | 未サポート |
[1] Gecko 38 以降で利用可能ですが、layout.css.vertical-text.enabled 設定に隠され、既定で無効化されています。
関連情報
- マッピングされた実プロパティ:
widthおよびheight writing-mode