max-block-size

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

CSSmax-block-size プロパティは、 writing-mode で指定された書字方向とは逆の向きの要素の最大寸法を指定します。すなわち、書字方向が水平 (横書き) であれば、 max-block-sizemax-height と等価になります。書字方向が垂直 (縦書き) であれば、 max-block-sizemax-width と同じになります。

もう一方の方向の最大長は、 max-inline-size プロパティを使用して指定します。

max-width は常に水平方向の寸法に使われ、 max-height は常に垂直方向の寸法に使われるため、このプロパティはテキストコンテンツの寸法に基づいて寸法を設定する必要がある場合、書字方向を意識して指定する必要がある場合に便利です。

ふつう max-height または max-width を使用する場面でいつでも、代わりに max-block-size をコンテンツの最大の「高さ」を設定するために使用し (垂直の値でなくても)、 max-inline-sizeをコンテンツの最大の「幅」を設定するために使用してください (これが横書きではなく縦書きである場合であっても)。様々な書字方向を表す in writing-modeをご覧ください。

構文

/* <length> 値 */
max-block-size: 300px;
max-block-size: 25em;

/* <percentage> 値 */
max-block-size: 75%;

/* キーワード値 */
max-block-size: none;
max-block-size: max-content;
max-block-size: min-content;
max-block-size: fit-content;
max-block-size: fill-available;

/* グローバル値 */
max-block-size: inherit;
max-block-size: initial;
max-block-size: unset;
初期値0
適用対象same as width and height
継承なし
パーセンテージblock-size of containing block
メディア視覚
計算値same as max-width and max-height
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

max-block-size プロパティの値は、 max-width および max-height プロパティで有効なすべての値を取ることができます。

none
要素幅に上限値を設定しない事を示す指定
<length>
指定可能な単位については <length> を参照して下さい。
<percentage>
包含ブロックの幅に対する <percentage> を指定します。
max-content
コンテンツにあわせた最適な幅
min-content
コンテンツにあわせた最小の幅
fill-available
包含ブロックの幅から、それぞれ水平方向のマージン、ボーダー、パディングを取り除いたサイズです。一部のブラウザは、このキーワードの旧称である available を実装しています。
fit-content
max-content と同じもの

書字方向が方向にどう影響するのか

writing-mode の値は次のように max-block-size から max-width または max-height への対応付けに影響します。

writing-mode の値 max-block-size が等価になるもの
horizontal-tb, lr , lr-tb , rl , rb , rb-rl max-height
vertical-rl, vertical-lr, sideways-rl , sideways-lr , tb , tb-rl max-width

writing-mode の値のうち sideways-lr および sideways-rl は設計プロセスの後期に CSS Writing Modes Level 3 仕様書から削除されました。これらは Level 4 で復活する可能性があります。

書字方向の lr, lr-tb, rl, rb, rb-tlHTML のコンテキストでは許可されなくなりました。 SVG 1.x コンテキストでのみ利用できる可能性があります。

形式文法

<'max-width'>

この例では、同じテキスト (Herman Melville の小説 Moby-Dick の冒頭部分) が horizontal-tb および vertical-rl の両方の書字方向で表示されます。

二つのボックスついてそれ以外の部分はすべて、 max-block-size に使われている値を含めて同じです。

HTML

この HTML では、単純に二つの <div> ブロックを作成し、それぞれの writing-modehorizontal および vertical クラスを用いて設定しています。両方のボックスで standard-box クラスを共有しており、こちらで単純に色、パディング、それぞれの max-block-size の値を設定しています。

<p>Writing mode <code>horizontal-tb</code> (the default):</p>
<div class="standard-box horizontal">
  Call me Ishmael. Some years ago—never mind how
  long precisely—having little or no money in my
  purse, and nothing particular to interest me on
  shore, I thought I would sail about a little and see
  the watery part of the world. It is a way I have of
  driving off the spleen and regulating the
  circulation.
</div>

<p>Writing mode <code>vertical-rl</code>:</p>
<div class="standard-box vertical">
  Call me Ishmael. Some years ago—never mind how
  long precisely—having little or no money in my
  purse, and nothing particular to interest me on
  shore, I thought I would sail about a little and see
  the watery part of the world. It is a way I have of
  driving off the spleen and regulating the
  circulation.
</div>

CSS

この CSS では3つのクラスを定義しています。最初は standard-box で、両方のボックスに適用され、上にあるものです。これはブロックの最小および最大の寸法、フォントの大きさ、などを指定します。

その後にくるクラス horizontal および vertical は、ボックスに writing-mode プロパティを追加し、値を使われるクラスに応じて horizontal-tb または vertical-rl に設定します。

.standard-box {
  padding: 4px;
  background-color: #abcdef;
  color: #000;
  font: 16px "Open Sans", "Helvetica", "Arial", sans-serif;
  max-block-size: 160px;
  min-block-size: 100px;
}

.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}

結果

二つのボックスは最終的にこの様に見えます。

仕様書

仕様書 状態 備考
CSS Logical Properties and Values Level 1
max-block-size の定義
編集者草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
max-block-sizeChrome 完全対応 57Edge 未対応 なしFirefox 完全対応 41
完全対応 41
未対応 38 — 51
無効
無効 From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 44Safari 完全対応 12.1WebView Android 完全対応 57Chrome Android 完全対応 57Firefox Android 完全対応 41
完全対応 41
未対応 38 — 51
無効
無効 From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 43Safari iOS 完全対応 12.2Samsung Internet Android 完全対応 5.0
fit-contentChrome 完全対応 57Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 44Safari 完全対応 12.1WebView Android 完全対応 57Chrome Android 完全対応 57Firefox Android 未対応 なしOpera Android 完全対応 43Safari iOS 完全対応 12.2Samsung Internet Android 完全対応 5.0
代替名
完全対応 5.0
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
max-contentChrome 完全対応 57Edge 未対応 なしFirefox 完全対応 66
完全対応 66
完全対応 41
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 44Safari 完全対応 12.1WebView Android 完全対応 57Chrome Android 完全対応 57Firefox Android 完全対応 66
完全対応 66
完全対応 41
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 43Safari iOS 完全対応 12.2Samsung Internet Android 完全対応 5.0
min-contentChrome 完全対応 57Edge 未対応 なしFirefox 完全対応 66
完全対応 66
完全対応 41
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 44Safari 完全対応 12.1WebView Android 完全対応 57Chrome Android 完全対応 57Firefox Android 完全対応 66
完全対応 66
完全対応 41
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 43Safari iOS 完全対応 12.2Samsung Internet Android 完全対応 5.0

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報