#概要
レスポンシブWebデザインについて説明します。様々なブラウザで表示する際に必要となります。
目次
- レスポンシブWebデザインとは
- viewportの設定
- メディアクエリーとは
- ブレークポイント
#レスポンシブWebデザインとは
レスポンシブWebデザインとは、表示領域に合わせ見え方が変わるようにデザインされたWebサイトのこと。
例えば、パソコンとスマートフォンだとデバイスの表示領域が違い、パソコン用の表示領域のWebサイトをスマートフォンで見ると文字が小さく見にくかったりする。このような場合に、レスポンシブWebデザインを使うと、コンテンツは変更せずにWebの見え方を変えることが出来る。
#viewportの設定(HTML)
レスポンシブWebデザインを適用するのに必要な手順①
viewportとは、様々なデバイスにおける表示領域のこと。これを設定しないと、上記に記載したようにスマートフォンで見た際に文字が小さくなったりする。
HTML内のhead内に< meta >タグを記述して表示領域の横幅を合わせる。
<meta name="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だと考えた。
以上です。様々なデバイスでの最適なサイズに調整出来ます。最後まで見てくださりありがとうございました。