CSSにおける様々な画面レイアウト入門

現代において、ウェブサイトはさまざまな画面サイズのデバイスで適切に表示される必要があります。

一般的に、デバイスは4つのクラスに分類されます：デスクトップ(desktop)、ノートパソコン、タブレット(tablet)、そしてモバイル(mobile)。

昔、はるか昔は、デバイスの数もそれほど多くなく、人気のある画面サイズはよく知られていました。そして、サイトは既知の解像度リストで正しく表示されるように作られていました。

現在ではデバイスの数が非常に多くなり、サイトを対応させるべき解像度のリストを作ることは不可能です。現在では、レイアウトはどんなサイズの画面でも正しく表示されるべきだと考えられています。

これは、レイアウトのキーポイントでブロックを再構築することで実現されます。これらのキーポイントは特定のデバイスではなく、サイトのコンテンツが良く見えるように選択されます。

キーポイントの間では、要素の幅は画面の幅に適応するよう可変である必要があります。そしてキーポイントで、ブロックが別の位置に再配置されます。

上述のようなレイアウトは、適応型またはレスポンシブ (responsive) と呼ばれます。次のレッスンではこれを学んでいきます。