レスポンシブデザインとは?メリットと作り方

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

PC、タブレット、スマホなど、異なる画面サイズに合わせて端末ごとに見やすいように最適化されたサイトのことです。 Googleでは「モバイルフレンドリー」としてWebサイトのレスポンシブ化を推奨しているため、レスポンシブ化されたサイトは、SEO評価が高くなります。

レスポンシブデザインのメリット

・1つのHTMLファイルなので、保守管理がしやすい
・「モバイルフレンドリー」としてSEO評価が高くなる。
・URLが統一できるので、ユーザビリティを高められる。

レスポンシブデザインの作り方

①ヘッダーにmeta viewportタグを入れる
HTMLファイルのhead内に、【viewport】タグを記述します。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
②各デバイスごとのCSS指定を記述する

■PC表示用CSS
@media screen and (min-width: 767px) { /*ウィンドウ幅が767px以上の場合に適用*/
#haikei {ここにPC表示に適用させるCSSを記述
}
}
■タブレット表示用CSS
@media screen and (max-width: 767px) { /*ウィンドウ幅が最大767pxまでの場合に適用*/
#haikei {
ここにタブレット表示に適用させるCSSを記述
}
}
■スマホ表示用CSS
@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
#haikei {
ここにスマホ表示に適用させるCSSを記述
}
}

レシポンシブ化のポイント

画像の横幅サイズを100%にする
@media screen and (max-width: 480px) {
img {

width: 100% ;

}
}
部分的に非表示にする
@media screen and (max-width: 480px) {

img {

display:none ;

}
}
右側に余白ができてしまった時
・ラッパー要素の #container に「overflow: hidden;」を指定してみる。