サイトの幅サイズの検討には十分考慮する必要があります。
特に広告を考慮すると、難しいです。
| 通常時のレイアウト | サイドバーがあるレイアウトです。 |
| タブレットモードのレイアウト | サイドバーが通常のサイドではなく、上にくるレイアウトです。 |
| 携帯モードのレイアウト |
PC、スマホ両方のサイト
| サイト全体 | サイドバーの幅 | タブレットモードの幅 | 携帯電話モードの幅 | CSS設定：body { min-width: xxxpx; } |
|---|---|---|---|---|
| 1200px | 320px | 1100px | 400px | なし |
| サイト全体 | サイドバーの幅 | タブレットモードの幅 | 携帯電話モードの幅 | CSS設定：body { min-width: xxxpx; } |
|---|---|---|---|---|
| 1440px | 320px | 1300px | 1000px | 1150px |
| サイト全体 | サイドバーの幅 | タブレットモードの幅 | 携帯電話モードの幅 | CSS設定：body { min-width: xxxpx; } |
|---|---|---|---|---|
| 1700px | 300px | 1000px | 400px | 1150px |
| ベンダー | 機種 | サイズ |
|---|---|---|
| DELL | XPS 13 | 13.3インチ FHD AG (1920 x 1080) |
| Lenovo | ThinkPad X1 Carbon | 14.0型 (2560×1440 or 1920×1080) |
| hp | HP EliteBook 820 G3 | 12.5インチ HD 1366×768 |
| Mac | MacBook Air | 11.6インチ 標準解像度1,366×768ピクセル (16:9) |
| Mac | MacBook Air | 13.3インチ 標準解像度1,440×900ピクセル (16:10) |
| Mac | MacBook Pro | 13.3“ Retina Display 2560 × 1600 |
| リキッドデザイン | webデザインにおいて、ブラウザの横幅を変更した時にコンテンツの表示サイズも変更されるタイプのデザインのこと。サイズ可変デザイン。 |
| レスポンシブ | 単一のHTMLでスマートフォン、タブレットといった画面サイズが異なるデバイスへ対応できるWebサイト制作手法 |