Tailwind CSS でレスポンシブUIを実装
レスポンシブデザインは、大型コンピューター画面から小型スマートフォン画面まで、あらゆるデバイスで適切にUIが表示され機能するウェブサイトを構築する方法です。画面サイズに合わせてレイアウトとコンテンツを調整し、読みやすく操作しやすいものにします。
この記事では、レスポンシブデザインを実現するためにTailwind CSSが提供できる機能について見ていきます。
1. Tailwind CSSのデフォルトブレークポイント
Tailwind CSSは、レスポンシブデザインにモバイルファーストのアプローチを採用し、ブレークポイントクラスで表されるmin-widthメディアクエリを使用します。これらのクラスは、smやmdなどのブレークポイント名を接頭辞として持ち、特定の画面幅でスタイルを適用します。
smブレークポイントは幅640pxを超えるデバイスにスタイルを適用し、mdブレークポイントは幅768pxを超える画面に効果を発揮します。接頭辞がない場合、スタイルは640px未満の画面に適用されます。ブレークポイントはカスケード方式で適用されます。smクラスで定義されたスタイルは640pxから767pxの間で有効です。画面幅が768pxを超えると、mdクラスに関連するスタイルがsmのスタイルを上書きし、以降も同様です。
Tailwindは、一般的なデバイス解像度に基づいた5つのデフォルトブレークポイントを提供しています。それらはsm、md、lg、xl、2xlです。
使用例：
<div className="bg-red-100 sm:bg-red-200 md:bg-red-400">
Example
</div>
2. Tailwind CSSのブレークポイントのカスタマイズ
Tailwind CSSは、レスポンシブデザインを制御する画面サイズのブレークポイントをカスタマイズする柔軟性を提供します。これらのブレークポイントはtailwind.config.jsファイル内で定義されます。
ブレークポイントは様々な方法でカスタマイズできます。
a. デフォルトブレークポイントの上書き：
デフォルトのブレークポイントを完全に独自の値に置き換えるには、themeオブジェクト内のscreensプロパティを変更できます。キーと値のペアを追加する必要があります。ここで、
キーはブレークポイント名を指定します（例："tablet"）。
値は対応する最小幅をピクセル単位で指定します（例："690px"）。
このアプローチはデフォルトのブレークポイントセット全体を上書きし、それらを使用することはできなくなります。
使用例：
/** @type {import('tailwindcss').Config} */
export default {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
screens:{
tablet:"690px",
},
extend: {},
},
plugins: [],
}
b. 特定のブレークポイントの更新：
全体的な構造を維持しながら個別のブレークポイントのみをカスタマイズしたい場合は、themeオブジェクト内のextendプロパティを使用できます。extend内にネストされたscreensオブジェクトを作成し、変更したいブレークポイントを定義します。この方法では、他のブレークポイントに影響を与えずに、ターゲットを絞った変更が可能です。
使用例
/** @type {import('tailwindcss').Config} */
export default {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
screens: {
md: "800px",
},
},
},
plugins: [],
}
c. max-widthブレークポイント範囲の追加
Tailwind CSSは主にmin-widthブレークポイントをレスポンシブデザインに使用します。さらに、より細かい制御のためにmax-widthブレークポイントを組み込むこともできます。これを実現するには、前述のようにtailwind.config.jsファイルのthemeオブジェクト内でscreensプロパティを定義する必要があります。
使用例
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
screens: {
'2xl': {'max': '1535px'},
'xl': {'max': '1279px'},
'lg': {'max': '1023px'},
'md': {'max': '767px'},
'sm': {'max': '639px'},
}
}
}
d. 固定範囲ブレークポイントの追加
Tailwind CSSでは、テーマ設定内で固定範囲ブレークポイントを定義することもできます。これにより、特定の画面サイズ範囲をターゲットにするブレークポイントを作成できます。これを実現するには、上記の方法と同様に、tailwind.config.jsファイルのthemeオブジェクト内のscreensプロパティを以下のように更新します。
各ブレークポイントはキーと値のペアで表され、
キーはブレークポイント名を表します（例："sm"）。
値は"min"と"max"の2つのプロパティを含むオブジェクトを表します。
これらのプロパティは、それぞれ希望する範囲の最小幅と最大幅をピクセル単位で指定します（例："min": "640px", "max": "767px"）。
使用例
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
screens: {
'sm': {'min': '640px', 'max': '767px'},
'md': {'min': '768px', 'max': '1023px'},
'lg': {'min': '1024px', 'max': '1279px'},
'xl': {'min': '1280px', 'max': '1535px'},
'2xl': {'min': '1536px'},
}
}
}
2. min/max修飾子の使用
テーマ内でカスタムブレークポイントを定義せずに、レスポンシブスタイルを作成するショートカットもあります。
テーマオブジェクト内でカスタムブレークポイントを設定する代わりに、minまたはmax修飾子をスタイルに直接使用できます。これにより、ブレークポイントを事前に定義することなく、選択した任意の値に基づいてレスポンシブスタイルを作成できます。このアプローチは、特定のコンポーネントのみにこれらのブレークポイントを使用したい場合に便利です。
使用例
<div class="min-[320px]:text-red-200 max-[600px]:bg-red-400">
Example
</div>
3. メディアクエリの使用
Tailwindはレスポンシブレイアウトに優れていますが、高度にカスタマイズされたレスポンシブ性のために、追加のメディアクエリを使用することもあります。そして、Tailwind CSSでは、通常のCSSと同様にメディアクエリを使用することができます。
使用例
/* This CSS will apply styles only when the screen width is 768px or larger */
@media (min-width: 768px) {
.button {
/* Your styles here */
}
}
4. アスペクト比ボックス
Tailwind CSSを使用すると、アスペクト比ボックスを簡単に作成できます。写真やビデオを想像してみてください - それらはしばしば特定の幅と高さの比率（ワイドスクリーンの場合は16:9など）を持っています。このようなスタイルは、Tailwindのaspectクラスを使用して実現できます。
使用例
<div class="aspect-w-16 aspect-h-9">
<!-- Your content here -->
</div>
この記事は、2024年4月に弊社のエンジニア Anisha Dahal が執筆した内容を日本語に翻訳したものです。
英語版はこちらをご覧ください。
https://articles.wesionary.team/responsive-design-with-tailwind-css-1d37aba04b41
採用情報
私たちはプロダクト共創の仕組み化に取り組んでいます。プロダクト共創をリードするプロダクト・マネージャー、そして、私たちのビジョンを市場に届ける営業メンバーを募集しています！
開発パートナーをお探しの企業様へ
弊社は、グローバル開発のメリットを活かし、高い費用対効果と品質を両立しています。経験豊富で多様性のあるチームが、課題を正しく理解し、最適なシステムと優れた体験を実現します。業務システムの開発、新規事業の開発、業務効率化やDX化に関するお困りごと、ぜひ弊社にご相談ください。