デザイン基本対応表
1. レスポンシブ対応
| デバイス | 大きさ | Tailwind CSS |
|---|---|---|
| スマートフォン縦 | 320px ~ 639px | なし |
| スマートフォン横 | 640px ~ 767px | sm |
| タブレット縦 | 768px ~ 1023px | md |
| タブレット横 | 1024px ~ 1279px | lg |
| PC小 | 1280px ~ 1535px | xl |
| PC大 | 1536px ~ | 2xl |
2. 文字の大きさ
| タグ | スマートフォンの場合の大きさ | Tailwind CSS | PCの場合の大きさ | Tailwind CSS |
|---|---|---|---|---|
| h1 | 1.25rem, bold | text-xl, font-bold | 1.5rem, bold | text-2xl, font-bold |
| h2 | 1.125rem, bold | text-lg, font-bold | 1.25rem, bold | text-xl, font-bold |
| h3 | 1rem, bold | text-base, font-bold | 1.125rem, bold | text-lg, font-bold |
| p | 1rem | text-base | 1.125rem | text-lg |
3. 余白の大きさ
| 余白の場所 | スマートフォンの場合の大きさ | Tailwind CSS | PCの場合の大きさ | Tailwind CSS |
|---|---|---|---|---|
| ヘッダーと初期コンテンツの間 | 2rem | mt-8 | 4rem | mt-16 |
| タイトルとコンテンツの間 | 1rem | mt-4 | 2rem | mt-8 |
| コンテンツの中の要素の間 | 2rem | mt-8 | 2rem | mt-8 |
| コンテンツとコンテンツの間 | 4rem | mt-16 | 8rem | mt-32 |
