レスポンシブとは

こんにちは。エンジニアインターン生の佐藤です！今回はレスポンシブサイトについて解説していきます！

そもそもレスポンシブとは何なのか。英語でresponsive（反応する、対応する）という意味のある単語で、webサイト制作においては、そのサイトに訪れた人が使用する端末の画面のサイズにより表示の仕方を適応するサイトのことを指します。スマホとパソコンでは明らかに画面のサイズや縦横比が違うため、このような対応がされていると見やすさが全然違います！是非この技術を身につけて、きれいなレイアウトで表示できるようにしましょう！

メリット

• 同じHTMLファイルを使うので、更新するときにパソコン版とスマホ版が同時に更新することができる。
• パソコン版とスマホ版でURLを分ける必要がない
• Googleからの評価を得ることができる
• 比較的簡単に表示を変更することができる

デメリット

• CSSが多少複雑になる
• レイアウトが複雑だと作業に時間がかかる
• スマホ版を考えてのデザインになるので、デザインの自由度は少し下がる

初心者のための必要な知識

• viewport

まず必要な処理としてHTMLのheadタグ内でレスポンシブにする際にお決まりのコードを記述します。それが下記のコードでレスポンシブにするときに書かなきゃいけないと覚えておけば良いと思います！

• ブレークポイント

CSSを画面のサイズにより変更する際の変更点を指します。例えば画面幅が600px以下はスマホ版として切り替えるのであれば600pxがブレークポイントです。

• メディアクエリ

上記のブレークポイントを指定するためにCSSファイルに記述するコードのことです。

上記のようなコードで表されます。andの左側の部分は画面表示に使うという指定、andの右側は適用する横幅を指定しています。上のコードだと820px以下の物に対しては、その中に記述したCSSが適用されます。

実際にやってみよう

これらの知識があれば、とりあえずのレスポンシブサイトは作ることが可能です。画面幅をいろいろ変えて崩れていないかを検証しながら直していくことが、レスポンシブサイト制作の基本です。あとは中のCSSの記述を変えることで、より見やすいレスポンシブサイトを作りましょう！Chromeのディヴィロッパーツールでは画面表示を、スマホ版やパソコン版に変更しながら確認できるのでおすすめです。次回の投稿で実際に少しだけレスポンシブサイトを制作した例を紹介したいと思います！