Tailwind CSS サイズ制御

Tailwind CSS は、開発者が HTML 内で要素のサイズを素早く制御できるようにする、シンプルなツールクラスのセットを提供します。

以下は、一般的なサイズ制御ツールクラスとその使用方法です。

---

幅 - w-*

w-*要素の幅を設定するために使用します。

Tailwind は、ピクセル、パーセント、ビューポート単位などをサポートする、いくつかの事前定義された幅を提供します。

クラス名	意味	例
w-1/2	幅を親要素の半分に設定	<div class="w-1/2">Content</div>
w-1/4	幅を親要素の4分の1に設定	<div class="w-1/4">Content</div>
w-full	幅を親要素の100%に設定	<div class="w-full">Content</div>
w-screen	幅をビューポートの幅に設定	<div class="w-screen">Content</div>
w-64	幅を16rem（256px）に設定	<div class="w-64">Content</div>
w-auto	幅はコンテンツに応じて自動調整	<div class="w-auto">Content</div>

要素の固定幅を設定するには、w-px、w-1、w-64 などのツールクラスを使用します。

パーセントベースの要素の幅を設定するには、w-full、w-1/2、w-2/5 などのツールクラスを使用します。

w-screen を使用すると、要素がビューポート全体の幅に広がります。

<div class="w-screen">
  <!-- ... -->
</div>

特定の条件下（特定のブレークポイントなど）で要素の指定された幅を削除する必要がある場合、w-auto ユーティリティが役立つことがあります：

<div class="w-full md:w-auto">
  <!-- ... -->
</div>

高さ - h-*

高さクラスは要素の高さを設定するために使用され、ピクセル、パーセント、ビューポート単位などもサポートしています。一般的な高さツールクラスは次のとおりです：

クラス名	意味	例
h-16	高さを4rem（64px）に設定	<div class="h-16">Content</div>
h-1/2	高さを親要素の半分に設定	<div class="h-1/2">Content</div>
h-screen	高さをビューポートの高さに設定	<div class="h-screen">Content</div>
h-auto	高さはコンテンツに応じて自動調整	<div class="h-auto">Content</div>

要素の固定高さを設定するには、h-px、h-1、h-64 などのツールクラスを使用します。

h-full を使用すると、親要素に定義された高さがある場合、要素の高さを親要素の100%に設定できます。

<div class="h-48">
  <div class="h-full ...">
    <!-- 这个元素的高度将是 `12rem`（h-48） -->
  </div>
</div>

h-screen を使用すると、要素がビューポート全体の高さに広がります。

<div class="h-screen">
  <!-- ... -->
</div>

h-dvh を使用すると、要素がビューポート全体の高さに広がります。ブラウザのユーザーインターフェースが拡張または縮小すると、高さもそれに応じて変化します。

ビューポート内で上下にスクロールして、ブラウザのユーザーインターフェースを非表示/表示にします：

h-lvh を使用すると、要素の高さがビューポートの最大可能高さに設定されます。これは 100vh と同じ動作です。

ビューポート内で上下にスクロールして、ブラウザのユーザーインターフェースを非表示/表示にします：

h-svh を使用すると、要素の高さがビューポートの最小可能高さに設定されます。

<div class="h-svh">
  <!-- ... -->
</div>

---

Size ツールクラス

Tailwind CSS では、sizeツールクラスを使用すると、要素の幅（width）と高さ（height）を同時に設定できます。これらのツールクラスは通常、正方形、円形、または特定の固定比率を持つコンテナを作成するなど、固定の幅と高さの比率が必要なシナリオで使用されます。

size-* 类

Tailwind はいくつかのsizeツールクラスを提供しており、要素の幅と高さを同じ値に設定できます。

一般的なツールクラスは次のとおりです：

クラス名	意味	例
size-0	幅と高さを0	<div class="size-0">Content</div>
size-1	幅と高さを0.25rem	<div class="size-1">Content</div>
size-2	幅と高さを0.5rem	<div class="size-2">Content</div>
size-4	幅と高さを1rem	<div class="size-4">Content</div>
size-8	幅と高さを2rem	<div class="size-8">Content</div>
size-16	幅と高さを4rem	<div class="size-16">Content</div>
size-32	幅と高さを8rem	<div class="size-32">Content</div>
size-64	幅と高さを16rem	<div class="size-64">Content</div>
size-auto	幅と高さを自動調整に設定	<div class="size-auto">Content</div>

これらのsizeツールクラスは、要素の幅と高さに同時に同じ値を設定します。通常、幅と高さを同じにする必要があるシナリオで使用されます。例：

• 円形の画像
• カードコンポーネント
• ボタンなどの固定サイズの要素

要素の固定幅と高さを同時に設定するには、size-px、size-1、size-64 などのツールクラスを使用します。

size-full を使用すると、要素の幅と高さを親コンテナの幅と高さの100%に設定できます。

<div class="h-56 p-2 ...">
  <div class="size-full ...">size-full</div>
</div>

特定の条件下（特定のブレークポイントなど）で要素の指定された幅と高さを削除する必要がある場合、size-auto ユーティリティが役立つことがあります：

<div class="size-full md:size-auto">
  <!-- ... -->
</div>

size-auto クラスは、サイズが固定されておらず、コンテンツのサイズに応じて自動調整される要素に非常に適しています。

Tailwind CSS はレスポンシブデザインもサポートしており、異なる画面サイズで異なるsizeツールクラスを使用できます。異なる画面幅で、要素に異なる幅と高さを設定できます。

<div class="size-16 md:size-32 lg:size-64">
  This box's size will change based on the screen size.
</div>

上記のコードでは、size-16 がデフォルトサイズで、中画面（md:）では size-32 に、大画面（lg:）では size-64 に変わります。

---

最小幅 - min-w-*

min-w-*要素の最小幅を設定するために使用し、コンテンツが不足している場合でも要素が指定された幅より小さくならないようにします。

クラス名	意味	例
min-w-full	最小幅を100%に設定	<div class="min-w-full">Content</div>
min-w-0	最小幅を0に設定	<div class="min-w-0">Content</div>
min-w-max	最小幅をコンテンツの最大幅に設定	<div class="min-w-max">Content</div>

---

最小高さ - min-h-*

min-h-*要素の最小高さを設定するために使用し、要素の高さが指定された値より小さくならないようにします。

クラス名	意味	例
min-h-0	最小高さを0に設定	<div class="min-h-0">Content</div>
min-h-full	最小高さを親要素の100%に設定	<div class="min-h-full">Content</div>
min-h-screen	最小高さをビューポートの高さに設定	<div class="min-h-screen">Content</div>

---

最大幅（Max Width） - max-w-*

max-w-*要素の最大幅を設定するために使用します。要素のコンテンツ幅がこの値を超えても、要素の幅はそれ以上増加しません。

クラス名	意味	例
max-w-xs	最大幅を20rem（320px）	<div class="max-w-xs">Content</div>
max-w-sm	最大幅を24rem（384px）	<div class="max-w-sm">Content</div>
max-w-full	最大幅を親コンテナの100%に設定	<div class="max-w-full">Content</div>

---

最大高さ（Max Height） - max-h-*

max-h-*要素の最大高さを設定するために使用します。要素のコンテンツ高さがこの値を超えても、要素の高さはそれ以上増加しません。

クラス名	意味	例
max-h-32	最大高さを8rem（128px）	<div class="max-h-32">Content</div>
max-h-screen	最大高さをビューポートの高さに設定	<div class="max-h-screen">Content</div>

---

自動サイズ（Auto） - auto

w-autoとh-autoクラスは、要素の幅または高さをコンテンツに応じて自動調整させるために使用します。

クラス名	意味	例
w-auto	幅を自動調整	<div class="w-auto">Content</div>
h-auto	高さを自動調整	<div class="h-auto">Content</div>

その他の拡張