はじめに
Tailwind CSSの公式ドキュメントを最近読み始めて少しずつ自身の学んだことや注意したいことを少しずつまとめていきたいのでメモ書きのようにまとめられればと思って書く。
本日は公式のコアコンセプトにあるレスポンシブルデザインの中のモバイルファーストについて書く。
レスポンシブルデザイン
レスポンシブルデザインとはデバイスによってスタイルが変更される。
Tailwind CSSでは以下のクラスを定義することで簡単にレスポンシブルインターフェースを構築できる。
| ブレークポイントのプレフィックス | 最小値 | CSS |
|---|---|---|
| sm | 640px | @media (min-width: 640px) { ... } |
| md | 768px | @media (min-width: 768px) { ... } |
| lg | 1024px | @media (min-width: 1024px) { ... } |
| xl | 1280px | @media (min-width: 1280px) { ... } |
| 2xl | 1536px | @media (min-width: 1536px) { ... } |
以下のようにブレークポイント名と条件を付けるだけで使用でき、複数追加することで複数の画面サイズに対応できる。。
<!-- w is width. 16 is width setting value -->
<img class="w-16 md:w-32 lg:w-48 ..." src="...">
モバイルファーストの取り組み
Tailwind CSSではモバイルファーストのブレークポイントシステムを使用しており、ブレークポイントのプレフィックスは最小値より大きいサイズでのみ有効になる設計となっている。
モバイル画面のターゲッティング
上記にあるようにブレークポイントの最小値より多きサイズでのみ有効となるため画面サイズの小さいスマホなどにはsmを使いたくなるかもしれないがsmは小さい画面という意味ではないため例1のようにsmでモバイルをターゲットとしてスタイルしない。
<!-- 例1 -->
<div class="sm:text-center"></div>
以下の例２のようにプレフィックスのないユーティリティを使用してモバイルをターゲットとして、より大きなブレークポイントで以下のものをオーバーラップして実装する。
<!-- 例2 -->
<div class="text-center sm:text-left"></div>
上記のことから初めにモバイルをターゲットとしたユーティリティを書いた後に特定してスタイルしたいサイズのユーティリティを実装する必要がある。
まとめ
今回はTailwind CSSのレスポンシブルスタイルのモバイルファーストについて学べた。
ユーティリティを使用する際は初めにモバイルをターゲットとしたプレフィックスのないユーティリティを指定した後に特定のデバイスや画面サイズに合わせた特定のプレフィックスを付けたユーティリティを用いる。
これからまた少しずつ学んだことや作ったものについてのメモを残していければと考えている。