最近のウェブサイトは、パソコンだけでなくモバイルデバイスからのアクセスも視野に入れなければなりません。以前はパソコン/モバイル用の2種類のサイトを用意してユーザーエージェントで切り替え、表示対応させる方法が主流でした。 これに加えて近年は、パソコン/モバイル用でHTMLを変えずに表示領域の横幅に合わせてCSSを自動的に切り替える方法が増えています。これは「レスポンシブ」デザインのMediaQuery切り替え型と呼ばれるもの。このように普段目にしているウェブサイトは、レイアウトによって基本的に4つのパターンに分けられます。 ソリッド ウェブレイアウトの基本にして王道の固定幅デザイン
![レスポンシブデザインって何? ウェブレイアウトの種類を詳しく解説|Mac - 週刊アスキー](https://cdn-ak-scissors.b.st-hatena.com/image/square/85b716dfb384fbd3a55a107ea22f793b305f1e9b/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2020%2F02%2F26%2F2317427%2Fl%2F3daef838a30edfbe.png)