CSS - min-inline-size プロパティ：入門ガイド

こんにちは、将来のCSSの達人たち！今日は、エキサイティングなCSSの世界へと踏み出し、特に min-inline-size プロパティを探求する旅に出ます。初めての方も安心してください；私はあなたの親切なガイドとして、このトピックをステップバイステップで取り上げます。このチュートリアルの終わりには、このプロパティをプロのように操れるようになるでしょう！

CSS - Min Inline Size

min-inline-sizeとは？

まず、min-inline-size が実際に何を意味するかを理解しましょう。旅行のために荷物を詰める時、 expand可能なスーツケースがあるとします。min-inline-size は、そのスーツケースの主要な寸法の最小サイズを設定することに似ています。ウェブデザインの言葉では、要素のインライン方向の最小サイズを設定します。

さて、あなたはおそらく「インライン方向って何？」と疑問に思っているかもしれません。多くの場合、英語や類似の言語では、それは水平方向です。でも、心配しないでください；後ほど詳しく説明します！

可能な値

まず、min-inline-size で使用できる異なる値を見てみましょう：

値	説明
`<length>`	固定長、例えば `100px` や `2em`
`<percentage>`	親コンテナのサイズの百分率
`max-content`	内在的な好みのサイズ
`min-content`	内在的な最小サイズ
`auto`	ブラウザが最小サイズを決定

今のところ混乱するかもしれませんが、例を交えてそれぞれを探求しましょう！

適用可能な要素

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

インラインで置き換えられていない要素
テーブル行
行グループ

文法

min-inline-size の基本文法は非常にシンプルです：

min-inline-size: <value>;

実際の例を見て、これがどのように動作するかを確認しましょう！

CSS min-inline-size - 値

まず、固定長のシンプルな例から始めます：

<div class="box">このボックスの min-inline-size は 200px に設定されています。</div>

.box {
  min-inline-size: 200px;
  background-color: lightblue;
  padding: 10px;
}

この例では、ブラウザに「このボックスを200ピクセル未満にしないでください」と伝えています。ブラウザのウィンドウをリサイズすると、ボックスが200pxの最小幅を維持することがわかります。

CSS min-inline-size - 値

次に、百分率の値を試みます：

<div class="container">
  <div class="box">このボックスの min-inline-size は 50% に設定されています。</div>
</div>

.container {
  width: 400px;
  background-color: lightyellow;
  padding: 10px;
}

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

この場合、親コンテナのサイズの半分にする、「このボックスは常に親コンテナのサイズの半分以上にする」と言っています。ボックスは少なくとも200px幅（400pxの50%）ですが、必要に応じて更大きくなることができます。

CSS min-inline-size - max-content 値

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

<div class="box max-content">このボックスは内容に合わせて拡張されます。</div>
<div class="box fixed">このボックスには固定幅 150px があります。</div>

.box {
  background-color: lightpink;
  padding: 10px;
  margin-bottom: 10px;
}

.max-content {
  min-inline-size: max-content;
}

.fixed {
  width: 150px;
}

max-content ボックスはすべての内容を1行に収めるために拡張され、固定幅のボックスはテキストが折り返される可能性があります。

CSS min-inline-size - 垂直テキストとの使用

ここで、非常に興味深い部分に移ります！インライン方向が通常水平方向であることを言いましたが、それは常にそうではありません。垂直テキストの例を見てみましょう：

<div class="vertical-text">このテキストは垂直です！</div>

.vertical-text {
  writing-mode: vertical-rl;
  min-inline-size: 100px;
  background-color: lavender;
  padding: 10px;
}

この場合、writing-mode を垂直に変更したため、min-inline-size は実際にはボックスの最小高さを制御するのではなく、最小幅を制御します！

結論

それでは、皆さん！min-inline-size プロパティについて、上から下まで（または左から右まで？）探求しました。忘れてはならないのは、CSSは実験することだということです。これらのプロパティを試してみてください。それが私たちが学んだ方法です！

最後に、私が多年間教えてきたことですが、デザインが異なるスクリーンサイズでどのように振る舞うかを常に考えることです。min-inline-size プロパティは、スマートフォンからワイドスクリーンモニターまでのすべてのデバイスで素晴らしいデザインを作成するための強力なツールになることができます。

練習を続け、探索を続け、最も重要なのは、CSSを楽しむことです！誰もが min-inline-size で実験した結果、素晴らしいウェブサイトデザインが生まれるかもしれません！

Credits: Image by storyset