これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
概要
inline-size CSS プロパティは、要素ブロックの writing-mode に応じた水平または垂直方向のサイズを定義します。これは、writing-mode に指定された値に依存し、width または height プロパティに相当します。
writing-mode が垂直指向の場合、inline-size の値は要素の高さに関連付けられ、水平指向の場合は要素の幅に関連付けられます。これは、要素のもう一方の次元を定義する block-size と関連します。
| 初期値 | auto |
|---|---|
| 適用対象 | same as width and height |
| 継承 | 不可 |
| 相対値の基準 | inline-size of containing block |
| メディア | visual |
| 計算値 | same as width and height |
| アニメーションの可否 | 不可 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
/* <length> 値 */ inline-size: 300px; inline-size: 25em; /* <percentage> 値 */ inline-size: 75%; /* キーワード値 */ inline-size: 25em border-box; inline-size: 75% content-box; inline-size: max-content; inline-size: min-content; inline-size: available; inline-size: fit-content; inline-size: auto; /* グローバル値 */ inline-size: inherit; inline-size: initial; inline-size: unset;
値
inline-size プロパティは、width や height プロパティと同じ値を取ります。
正式な構文
<'width'>
例
HTML コンテンツ
<p class="exampleText">Example text</p>
CSS コンテンツ
.exampleText {
writing-mode: vertical-rl;
background-color: yellow;
inline-size: 110px;
}
仕様
| 仕様書 | 状況 | コメント |
|---|---|---|
| CSS Logical Properties Level 1 inline-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