max-block-size
max-block-size
は CSS のプロパティで、 writing-mode
で指定された書字方向とは逆の向きの要素の最大寸法を指定します。すなわち、書字方向が水平 (横書き) であれば、 max-block-size
は max-height
と等価になります。書字方向が垂直 (縦書き) であれば、 max-block-size
は max-width
と同じになります。
もう一方の方向の最大長は、 max-inline-size
プロパティを使用して指定します。
max-width
は常に水平方向の寸法に使われ、 max-height
は常に垂直方向の寸法に使われるため、このプロパティはテキストコンテンツの寸法に基づいて寸法を設定する必要がある場合、書字方向を意識して指定する必要がある場合に便利です。
ふつう max-height
または max-width
を使用する場面でいつでも、代わりに max-block-size
をコンテンツの最大の「高さ」を設定するために使用し (これは垂直の値ではない可能性がありますが)、 max-inline-size
をコンテンツの最大の「幅」を設定するために使用してください (これが横書きではなく縦書きである場合であっても)。様々な書字方向を表す例 in writing-modeをご覧ください。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
構文
/* <length> 値 */
max-block-size: 300px;
max-block-size: 25em;
/* <percentage> 値 */
max-block-size: 75%;
/* キーワード値 */
max-block-size: auto;
max-block-size: max-content;
max-block-size: min-content;
max-block-size: fit-content(20em);
/* グローバル値 */
max-block-size: inherit;
max-block-size: initial;
max-block-size: unset;
値
max-block-size
プロパティの値は、 max-width
および max-height
プロパティで有効なすべての値を取ることができます。
<length>
max-width
を絶対的な値で定義します。<percentage>
max-width
を包含ブロックの幅に対するパーセント値で定義します。auto
- ブラウザーは指定された要素の
max-width
を計算して選択します。 none
- ボックスの寸法を制限しません。
max-content
- 内容物が推奨する
max-width
です。 min-content
- 内容物の最小の
max-width
です。 fit-content(
<length-percentage>
)- 利用可能な空白を指定された引数で置き換えた
fit-content
式を使用します。すなわち、min(max-content, max(min-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 で復活する可能性があります。
公式定義
初期値 | 0 |
---|---|
適用対象 | width および height と同じ |
継承 | なし |
パーセント値 | 包含ブロックの block-size |
計算値 | max-width および max-height と同じ |
アニメーションの種類 | length または パーセント値, calc(); |
形式文法
例
Setting max-block-size with horizontal and vertical text
この例では、同じテキスト (Herman Melville の小説 Moby-Dick の冒頭部分) が horizontal-tb
および vertical-rl
の両方の書字方向で表示されます。
二つのボックスついてそれ以外の部分はすべて、 max-block-size
に使われている値を含めて同じです。
HTML
この HTML では、単純に二つの <div>
ブロックを作成し、それぞれの writing-mode
を horizontal
および 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 の定義 |
編集者草案 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 対応する物理的プロパティ:
max-width
とmax-height
- 他の方向の最大寸法の設定:
max-inline-size
writing-mode