MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/a3e7b5301fea

inline-size

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

概要

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 設定に隠され、既定で無効化されています。

関連情報

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: Marsf
 最終更新者: Marsf,