レスポンシブデザイン

レスポンシブユーティリティバリアントを使用して、適応型ユーザーインターフェイスを構築します。


Overview

Tailwindのすべてのユーティリティクラスは、さまざまなブレークポイントに条件付きで適用できます。これにより、HTMLを離れることなく、複雑なレスポンシブインターフェイスを構築することが簡単になります。

一般的なデバイスの解像度に触発された、デフォルトで4つのブレークポイントがあります。

/* Small (sm) */
@media (min-width: 640px) { /* ... */ }

/* Medium (md) */
@media (min-width: 768px) { /* ... */ }

/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }

/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }

ユーティリティを追加し、特定のブレークポイントでのみ有効にするには、ユーティリティの前にブレークポイント名を付け、その後に:文字を付けるだけです。

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">

これはフレームワーク内のすべてのユーティリティクラスで機能します。つまり、文字間隔やカーソルスタイルなど、特定のブレークポイントで文字通り何でも変更できます。

これは、小さな画面ではスタックレイアウトを使用し、大きな画面ではサイドバイサイドレイアウトを使用するマーケティングページコンポーネントの簡単な例です(ブラウザのサイズを変更して実際の動作を確認してください)

Woman paying for a purchase
Marketing
Finding customers for your new business

Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" width="448" height="299" alt="Woman paying for a purchase">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
    <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
    <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
  </div>
</div>

上記の例の仕組みは次のとおりです。

  • デフォルトでは、外側のdivdisplay:blockですが、md:flexユーティリティを追加すると、中規模以上の画面ではdisplay:flexになります。
  • 親がフレックスコンテナの場合、画像が縮小しないようにする必要があるため、中規模以上の画面で縮小しないようにmd:flex-shrink-0を追加しました。 技術的には、小さい画面では何もしないのでflex-shrink-0を使用することもできますが、それはmd画面でのみ重要なので、クラス名でそれを明確にすることをお勧めします。
  • 小さな画面では、画像はデフォルトで自動的に全幅になります。中程度の画面以上では、md:w-56を使用してその幅を固定サイズに制限しました。
  • 小さな画面では、コンテンツセクションはmt-4を使用して、コンテンツと画像の間にマージンを追加します。このマージンは水平レイアウトでは必要ないため、md:mt-0を使用してそのマージンを元に戻し、代わりにmd:ml-6を使用して左マージンを追加しました。

この例ではブレークポイントを1つだけ使用しましたが、sm,lgまたはxlレスポンシブプレフィックスを使用して、このコンポーネントを他のサイズに簡単にカスタマイズできます。


Mobile First

デフォルトでは、Tailwindは、BootstrapまたはFoundationで慣れているものと同様に、モバイルファーストブレークポイントシステムを使用します。

つまり、接頭辞なしのユーティリティ(大文字など)はすべての画面サイズで有効になりますが、接頭辞付きのユーティリティ(md:uppercaseなど)は指定されたブレークポイント以上でのみ有効になります。

これは、異なるブレークポイントでいくつかの背景色を循環する簡単な例です(背景色の変化を確認するためにブラウザのサイズを変更します)

<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500"></div>

Throughout the documentation, you'll often see this interactive widget which we use to quickly demonstrate how some code would look on different screen sizes without forcing you to resize the browser — simply click the device icons at the top to see how the code below would render at that breakpoint:

<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500"></div>

このような例は、意図的にブラウザのサイズの変更に反応しません。これは仕様によるものです。小さな画面でドキュメントを読んでいる人でも、デスクトップディスプレイでコードがどのように表示されるかをプレビューできます。

Targeting mobile screens

このアプローチが人々を最も驚かせるのは、モバイル向けに何かをスタイル設定するには、sm:プレフィックス付きバージョンではなく、プレフィックスなしバージョンのユーティリティを使用する必要があるということです。 sm:を「小さな画面上」を意味するものとは考えないでください。「小さなブレークポイント」として考えてください。

モバイルデバイスをターゲットにするためにsm:を使用しないでください

<!-- This will only center text on screens 640px and wider, not on small screens -->
<div class="sm:text-center"></div>

接頭辞のないユーティリティを使用してモバイルをターゲットにし、より大きなブレークポイントでそれらを上書きします

<!-- This will center text on mobile, and left align it on screens 640px and wider -->
<div class="text-center sm:text-left"></div>

このため、最初にデザインのモバイルレイアウトを実装してから、sm画面に意味のある変更を重ねてから、md画面などを重ねることをお勧めします。

Targeting a single breakpoint

Tailwindのブレークポイントにはmin-widthのみが含まれ、max-widthは含まれません。つまり、小さいブレークポイントで追加したユーティリティは、大きいブレークポイントにも適用されます。

1つのブレークポイントにのみユーティリティを適用する場合、解決策は、ユーティリティを打ち消す別のユーティリティを追加して、そのユーティリティをより大きなサイズで元に戻すことです。

これは、mdブレークポイントでは背景色が赤で、他のすべてのブレークポイントでは青緑色である例です。

<div class="bg-teal-500 md:bg-red-500 lg:bg-teal-500"></div>

smブレークポイントまたはxlブレークポイントの背景色を指定する必要がないことに注意してください。ユーティリティを有効にするタイミングを指定するだけで、停止するタイミングは指定できません。


Customizing breakpoints

tailwind.config.jsファイルでブレークポイントを完全にカスタマイズできます。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

詳細はcustomizing breakpoints documentationをご覧ください。


Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!