概要

レスポンシブWebデザインについて説明します。様々なブラウザで表示する際に必要となります。

目次

• レスポンシブWebデザインとは
• viewportの設定
• メディアクエリーとは
• ブレークポイント

レスポンシブWebデザインとは

レスポンシブWebデザインとは、表示領域に合わせ見え方が変わるようにデザインされたWebサイトのこと。
例えば、パソコンとスマートフォンだとデバイスの表示領域が違い、パソコン用の表示領域のWebサイトをスマートフォンで見ると文字が小さく見にくかったりする。このような場合に、レスポンシブWebデザインを使うと、コンテンツは変更せずにWebの見え方を変えることが出来る。

viewportの設定(HTML)

レスポンシブWebデザインを適用するのに必要な手順①
viewportとは、様々なデバイスにおける表示領域のこと。これを設定しないと、上記に記載したようにスマートフォンで見た際に文字が小さくなったりする。
HTML内のhead内に< meta >タグを記述して表示領域の横幅を合わせる。

<metaname="viewport"content="width=device-width,initial-scale=1">

この処理により、スマートフォンで見た時も文字が大きくなっており、見やすくなる。
ただし、この設定だけではレイアウトが崩れていたりするので、調整が必要。この調整で利用するのがメディアクエリー

メディアクエリーとは(css)

レスポンシブWebデザインを適用するのに必要な手順②
Webページが表示される画面の表示領域に合わせてCSSを切り替える機能。
メディアクエリーをCSSに記載することでレスポンシブWebデザインの細かい設定が可能となる。
書き方：@mediaとCSSに記述し、その後ろに画面の表示領域サイズを記述する

/* レスポンシブWebデザイン(モバイル版)
-------------------------------------------------------------------*/@media(max-width:600px){.title{font-size:3px;}

上記の場合、max-width: 600pxなので画面の表示領域幅が最大600pxの時、{}の中のスタイルが適用される。(今回の場合はフォントサイズを3pxにするという設定)
このmax-width: 600pxの画面サイズの切り替えポイントをブレークポイントという。

ブレークポイント

画面のサイズによってCSSを切り替える際の切り替えポイントをブレークポイントという。スマートフォンの画面幅の大きさも機種によって様々、また都度変わるために、このブレークポイント！という決まったサイズはない。大体のスマートフォンの画面幅をカバーしているのが600pxだと考えた。

以上です。様々なデバイスでの最適なサイズに調整出来ます。最後まで見てくださりありがとうございました。