CSS - max-inline-size プロパティ: 初心者向けガイド

こんにちは、未来のCSS魔法使いさんたち！今日は、max-inline-size プロパティの面白い世界に飛び込みます。あなたが新人であっても心配しないでください；私はあなたの親切なガイドとしてこのCSS冒険を案内します。コーヒー（またはあなたの好みの茶）を一杯取り、始めましょう！

CSS - Max Inline Size

max-inline-sizeとは？

本題に入る前に、まず max-inline-size について理解しましょう。長い単語を小さな箱に収めることを想像してみてください。これが、CSSで max-inline-size が助けてくれることです。これは要素のインライン方向の最大サイズを設定します。

「でも待って」とあなたは思うかもしれません。「インライン方向って何？」優しい質問です！英語や多くの言語では、インライン方向は水平方向で、左から右です。しかし、アラビア語やヘブライ語などの言語では、右から左です。垂直書き方モードでは、上から下になることもあります！

では、max-inline-size に使用できる異なる値を見てみましょう。以下の便利な表を参考にしてください：

値	説明
`<length>`	固定の長さ、例えば `300px` や `20em`
`<percentage>`	包含ブロックのサイズの百分率
`none`	サイズに制限なし（デフォルト）
`max-content`	内臓的な好みのサイズ
`min-content`	内臓的な最小サイズ
`fit-content`	利用可能なスペースを使用しますが、min-content より小さくも max-content より大きくもなりません

これらの値が今は少し混乱するかもしれませんが、例を交えて詳しく説明します！

max-inline-size プロパティは以下の要素を除くすべての要素に適用されます：

max-inline-size の基本構文は非常に簡単です：

max-inline-size: 値;

簡単ですね！では、具体的な例を見てみましょう！

まずは固定長さのシンプルな例から：

.box {
max-inline-size: 300px;
background-color: lightblue;
padding: 10px;
}

<div class="box">
このボックスの max-inline-size は 300px に設定されています。内容がこの幅を超えると折り返されます。
</div>

この例では、max-inline-size を 300ピクセルに設定しています。これにより、.box に入れた内容がインライン方向（この場合は水平方向）で 300px よりも伸びることがありません。内容が長すぎると次の行に折り返されます。

では、百分率値を使ってみましょう：

.container {
width: 500px;
border: 2px solid black;
}

.box {
max-inline-size: 50%;
background-color: lightgreen;
padding: 10px;
}

<div class="container">
<div class="box">
このボックスの max-inline-size はそのコンテナの幅の 50% に設定されています。
</div>
</div>

この場合、.box はコンテナの幅の 50% までの最大インラインサイズを持つことになります。したがって、コンテナが 500px 幅の場合、ボックスは 250px より幅が広くなることはありません。

max-content 値は特に興味深いものです。これは最大インラインサイズを内容の好みのサイズに設定します。実際に見てみましょう：

.box {
max-inline-size: max-content;
background-color: lightyellow;
padding: 10px;
}

<div class="box">
このボックスは内容に合わせて拡張しますが、強制的に折り返されるまで wrapping しません。
</div>

max-content を使用すると、ボックスは内容をすべて1行に収めるために拡張しますが、強制的に折り返される場合を除き折り返しません。

少し変わったことを試みましょう！垂直テキストでの max-inline-size の動作を見てみましょう：

.vertical-box {
writing-mode: vertical-rl;
max-inline-size: 100px;
background-color: lightpink;
padding: 10px;
}

<div class="vertical-box">
このテキストは垂直で、max-inline-size がその高さを制限します！
</div>

この例では、writing-mode: vertical-rl を使用してテキストを垂直右から左に設定しています。これにより、max-inline-size は実際にはボックスの高さを制限します。なぜなら、垂直書き方モードではインライン方向が垂直になるからです！

そして、皆さん！max-inline-size プロパティについての探求はここまでです（または、インライン開始からインライン終了まで？）。忘れてはならないのは、CSSは実験であることです。これらのプロパティを試してみてください。それで私たちは皆学びました！

あなた们にlittle jokeを残します。なぜCSSプロパティがジムに行ったのか？もちろん、max-inline-sizeを鍛えるためです！

ハッピーコーディング、そしてあなたのレイアウトが常に柔軟で、コンテンツが常に適切に収まることを願っています！

Credits: Image by storyset