WEBサイトのデザインを作るときに、レスポンシブの各ブレークポイントで設定する「コンテンツ幅」「左右の余白」についてまとめました。
いくつかパターンがありますが、この記事では一般的なものを紹介します。
目次
スマートフォン
| 項目 | 設定値の目安 |
|---|---|
| デバイスの画面幅 | 767px以下 |
| ブレークポイント | 767px |
| 左右の余白 | 20px｜20-40px｜7.3% |
| 上下のセクション間余白 | 上：60px 下：80px |
| フォントサイズ | 本文：14-16px H1見出し：24-32px｜32px H2見出し：20-24px｜28px(文字数が少ない場合) H3見出し：16-20px｜18px |
タブレット
| 項目 | 設定値の目安 |
|---|---|
| デバイスの画面幅 | 768-1023px |
| ブレークポイント | 1023px |
| 左右の余白 | 40px｜40-80px｜7.3% |
| 上下のセクション間余白 | 上：120px 下：110px |
| フォントサイズ | 本文：14-18px H1見出し：28-40px H2見出し：22-28px H3見出し：18-22px |
PC（ノート型）
| 項目 | 設定値の目安 |
|---|---|
| デバイスの画面幅 | 1024-1279px |
| ブレークポイント | 1279px |
| コンテンツ幅 | max 1200px（目安） |
| 左右の余白 | 60px｜40-80px｜6% |
| 上下のセクション間余白 | 上：120px 下：110px |
| フォントサイズ | 本文：16-18px H1見出し：32-48px｜48px H2見出し：24-32px｜32px H3見出し：18-24px｜24px |
PC（大画面）
| 項目 | 設定値の目安 |
|---|---|
| デバイスの画面幅 | 1280px以上 |
| ブレークポイント | 1280px |
| コンテンツ幅 | max 1200px（目安） |
| 左右の余白 | 60px｜40-80px｜6% |
| 上下のセクション間余白 | 上：120px 下：110px |
| フォントサイズ | 本文：16-18px H1見出し：32-48px｜48px H2見出し：24-32px｜32px H3見出し：18-24px｜24px |
