CSS - max-block-sizeプロパティ：初めての人向けのやさしいガイド
こんにちは、将来のCSS魔法使いさんたち！今日は、楽しいCSSの世界へと踏み出し、特にmax-block-sizeプロパティを探求する旅に出ます。新しいことに慣れていない方也不用担心；私はあなたのやさしいガイドとして、ステップバイステップでこのトピックを取り上げます。で、お気に入りの飲み物を手に取り、リラックスして、一緒に潜りましょう！
max-block-sizeとは？
本題に入る前に、まずmax-block-sizeとは何かを理解しましょう。ブロックで塔を建てていると imagine してみてください。max-block-sizeプロパティは、塔の高さに制限を設けるようなものです。CSSの言葉で言うと、ブロック方向の要素の最大サイズを定義します。
「でも、ブロック方向って何？」と疑問に思うかもしれません。素晴らしい質問です！ブロック方向は、水平方向に書かれる言語（英語など）では通常垂直方向、垂直方向に書かれる言語（伝統的な日本語など）では水平方向を指します。
文法と可能な値
それでは、CSSでmax-block-sizeを使う方法を見てみましょう：
.my-element {
max-block-size: value;
}「value」の代わりに何を入れるか？以下の表にすべての可能な値を示します：
| 値 | 説明 |
|---|---|
<length> |
固定の長さ、例：300pxや20em
|
<percentage> |
包含ブロックのサイズの百分率 |
none |
制限なし（デフォルト） |
max-content |
内的な好ましい最大サイズ |
min-content |
内的な最小サイズ |
fit-content |
autoに似ているが、いくつかの違いがある |
auto |
ブラウザが最大サイズを決定 |
対象
すべてのCSSプロパティがすべてのHTML要素に適用されるわけではありません。max-block-sizeプロパティは以下の要素を除くすべての要素に適用されます：
- 非置換型インライン要素
- 表の行
- 行グループ
これらの用語に慣れていない方也不用急いでください。CSSの旅を進む中で、これらに遭遇し、なぜ例外なのかを理解するでしょう。
CSS max-block-size - writing-modeの影響
さて、ここで面白い部分に入ります！max-block-sizeプロパティはテキストのwriting-modeに基づいて振る舞いが変わります。いくつかの例を見てみましょう：
例1：水平書き方向
.box {
writing-mode: horizontal-tb;
max-block-size: 200px;
background-color: lightblue;
padding: 10px;
}<div class="box">
これは水平書き方向でmax-block-sizeが200pxに設定されたボックスです。
</div>この例では、max-block-sizeはボックスの高さを200ピクセルに制限します。なぜなら、水平書き方向ではブロック方向が垂直方向だからです。
例2：垂直書き方向
.box {
writing-mode: vertical-rl;
max-block-size: 200px;
background-color: lightgreen;
padding: 10px;
}<div class="box">
これは垂直書き方向でmax-block-sizeが200pxに設定されたボックスです。
</div>この場合、max-block-sizeはボックスの幅を200ピクセルに制限します。なぜなら、垂直書き方向ではブロック方向が水平方向だからです。
CSS max-block-size - 値
長さ値を使うと、固定された最大サイズを設定します。実際に見てみましょう：
.fixed-size {
max-block-size: 150px;
background-color: lightyellow;
padding: 10px;
}<div class="fixed-size">
このボックスはmax-block-sizeが150pxです。内容がこの高さを超えると、オーバーフローします。
</div>この例では、divにどれだけの内容を入れても、150ピクセルを超えることはありません。
CSS max-block-size - 値
パーセンテージは包含ブロックのサイズに関連しています。以下のように動作します：
.parent {
height: 300px;
background-color: lightgray;
}
.child {
max-block-size: 50%;
background-color: lightpink;
padding: 10px;
}<div class="parent">
<div class="child">
この子divは親の高さの50%のmax-block-sizeを設定しています。
</div>
</div>この場合、子divは親の高さの半分より高くなることはありません。
CSS max-block-size - 値
max-content値は、要素が内容の要求に応じて拡大するが、それを超えないようにしたいときに特に便利です。例を見てみましょう：
.max-content-box {
max-block-size: max-content;
background-color: lightcoral;
padding: 10px;
}<div class="max-content-box">
このボックスは内容に合わせて拡大しますが、それを超えません。
</div>このボックスは内容に合わせて拡大しますが、それを超えることはありません。
CSS max-block-size - 水平および垂直テキストとの組み合わせ
最後に、水平テキストと垂直テキストを組み合わせた例を見てみましょう：
.mixed-text {
max-block-size: 200px;
background-color: lavender;
padding: 10px;
}
.vertical-text {
writing-mode: vertical-rl;
max-block-size: 100px;
background-color: lightsalmon;
margin-top: 10px;
}<div class="mixed-text">
これはmax-block-sizeが200pxの水平テキストです。
<div class="vertical-text">
これはmax-block-sizeが100pxの垂直テキストです。
</div>
</div>この例では、水平テキストのコンテナに最大高さ200pxを設定し、内部には垂直テキストのdivが最大幅100pxを設定しています。
そして、ここまでmax-block-sizeプロパティをさまざまな角度から探求しました。忘れてならないのは、CSSをマスターする鍵は練習です。ですから、これらの例を試し、修正し、何が起こるかを確認する勇気を出してください。ハッピーコーディング、そしてあなたのブロックが常に完璧なサイズでありますように！
Credits: Image by storyset