inline-size

ジャンプ先:
  1. 概要
  2. 構文
  3. 例
  4. 仕様
  5. ブラウザの実装状況
  6. 関連情報

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

概要

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
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* <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 and Values Level 1
inline-size の定義		 勧告改訂案 初期定義

ブラウザの実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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,