これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
概要
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 |
| メディア | visual |
| 計算値 | 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 Level 1 block-size の定義 |
勧告改訂案 | 初期定義 |
ブラウザの実装状況
| 機能 | 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