ゼロからはじめるWEB制作 LV.11

では「ゼロからはじめるWEB制作 LV.11」を進めていきましょう。
今回から、レスポンシブサイトの作り方に入ります。

レスポンシブサイトという言葉自体は、これまでも何度か出てきましたので、なんとなく内容を把握されているかなと思うのですが、簡単に言えば、画面の大きさに応じてレイアウトが可変するサイトのことです。

近年、スマートフォンやタブレットをはじめ、WEBサイトを閲覧するためのデバイスが、かなり増えました。

なので、よりWEBサイトを様々なデバイスで閲覧できるようにするため、従来のレイアウトが固定された状態から柔軟にレイアウトが可変するレスポンシブサイトが生まれました。

例えば下記のサイトをパソコンで見てみてください。
https://quadrajapan.com/

すると、画面がある程度広ければ、パソコンのディスプレイに最適化されたレイアウトが表示されると思います。

しかし、ブラウザのウィンドウ幅を縮めると、どんどんレイアウトが可変し、ウィンドウの幅にあったレイアウトに変化します。

■ タブレットサイズ

■ スマホサイズ

このように、画面幅に応じて、どんな幅でも、どんなディスプレイサイズでも見やすく表示するように、元のレイアウトを可変させていくのが、レスポンシブレイアウトと呼ばれる形式です。

といっても、基本的にはCSSなので、コーディングをある程度できるようになった人にとっては、それほど難しいことではありません。

では、進めていきましょう。