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
メディア視覚
計算値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 and Values Level 1
inline-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 設定に隠され、既定で無効化されています。

関連情報

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

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