レスポンシブとブレークポイント
Marcotte（2010）は流動グリッド・柔軟な画像・メディアクエリでレスポンシブを提案しました。画面サイズで読み方が変わるため（Chae & Kim, 2004; Kim et al., 2015）、伸縮だけでは不十分です。
端末ではなくコンテンツ
コンテンツが崩れる点で決めます。Wroblewski（2011）に従い小画面を基本にmin-widthで拡張し、モバイルファーストとCore Web Vitalsに貢献します（Mozilla, n.d.）。
コンテナクエリとテスト
部品の再利用問題（Nebeling & Norrie, 2013）はコンテナクエリで解決できます。視覚的階層の維持を確認し、横向き・文字拡大・折りたたみ端末でも試します。
よくある質問
- いくつ必要？
- コンテンツ基準で2〜4個が多いです。
- min-widthかmax-widthか？
- モバイルファーストのmin-widthが管理しやすいです。
出典確認日：2026-10-27
参考文献
- Marcotte, E. (2010, May 25). Responsive web design. A List Apart. 流動グリッドとメディアクエリでレスポンシブを定義した記事です。
- Marcotte, E. (2011). Responsive web design. A Book Apart. レスポンシブ手法を体系化した本です。
- Wroblewski, L. (2011). Mobile first. A Book Apart. min-width順の根拠となるモバイルファースト戦略です。
- Mozilla. (n.d.). Using media queries. MDN Web Docs. メディアクエリの構文の技術文書です。
- Nebeling, M., & Norrie, M. C. (2013). Responsive design and development: Methods, technologies and current issues. In Web Engineering: ICWE 2013 (pp. 510–513). Springer. レスポンシブ開発の方法と課題をまとめています。
- Kim, J., Thomas, P., Sankaranarayana, R., Gedeon, T., & Yoon, H.-J. (2015). Eye-tracking analysis of user behavior and performance in web search on large and small screens. Journal of the Association for Information Science and Technology, 66(3), 526–544. 画面サイズで読み方が変わる研究です。
- Chae, M., & Kim, J. (2004). Do size and structure matter to mobile users? An empirical study of the effects of screen size, information structure, and task complexity on user activities with standard web phones. Behaviour & Information Technology, 23(3), 165–181. 小画面では構造を単純にすべきという実証研究です。