レスポンシブWebデザインとは?
レスポンシブWebデザインは、HTMLとCSSを使用してWebサイトを自動的にサイズ変更、非表示、縮小、または拡大して、すべてのデバイス
（デスクトップ、タブレット、および電話）で見栄えを良くする方法です。:
ノート: Webページはどのデバイスでも見栄えがよいはずです。
ビューポートを設定する
レスポンシブwebページを作成するとき<meta> は、すべてのWebページに次の要素を追加して下さい
例文
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
これはあなたのページのビューポートを設定するでしょう そしてブラウザにページの寸法と拡大縮小を生業する方法についての指示をを与えます。
ヒント: スマホやタブレットでこのページを閲覧している場合は、サムネイルの大きさが調整されます。
レスポンシブ画像
レスポンシブ画像は、ブラウザのサイズに合わせて適切に拡大または縮小される画像です。
widthプロパティを使う
CSS width プロパティが100％に設定されている場合、画像は反応して拡大縮小します。
例文
<img src=”img_girl.jpg” style=”width:100%;”>
上の例では、画像は元のサイズより大きくなるように拡大することができます。より良い解決策は max-width プロパティを使用することです。
max-widthプロパティを使用する
max-width プロパティが100％に設定されている場合、必要に応じて画像は縮小されますが、元のサイズより大きくなるように拡大されることはありません。
例文
<img src=”img_girl.jpg” style=”max-width:100%;height:auto;”>
ブラウザの幅に応じて異なる画像を表示する
HTML <picture> 要素を使用すると、ブラウザウィンドウのサイズごとに異なる画像を定義できます
ブラウザウィンドウのサイズを変更して、幅に応じて下の画像がどのように変化するかを確認します。
例文
<picture>
<source srcset=”img_smallflower.jpg” media=”(max-width:600px)”>
<source srcset=”img_flowers.jpg” media=”(max-width:1500px)”>
<source srcset=”flowers.jpg”>
<img src=”img_smallflower.jpg” alt=”Flowers”>
</picture>
レスポンシブテキストサイズ
テキストサイズは、”viewport width”を意味する”vw”単位で設定できます。
そうすることで、テキストサイズはブラウザウィンドウのサイズに従います。
Hello World
ブラウザウィンドウのサイズを変更して、テキストのサイズがどのように変わるかを確認します。
例文
<h1 style=”font-size:10vw“>Hello World</h1>
ビューポートはブラウザのウィンドウサイズです。1vw =ビューポート幅の1％ビューポートの幅が50cmの場合、1vwは0.5cmです。
メディアクエリ
テキストや 画像のサイズ変更に加えて、レスポンシブWebページでメディアクエリを使用することも一般的です。
メディアクエリを使用すると、ブラウザサイズごとにまったく異なるスタイルを定義できます。
例：ブラウザウィンドウのサイズを変更して、下の3つのdiv要素が大画面では横に表示され、小画面では縦に重ねて表示されるようにします。
例文
<style>
.left, .right {
float: left;
width: 20%; /* The width is 20%, by default */}
.main {
float: left;
width: 60%; /* The width is 60%, by default */
}
/* Use a media query to
add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
.left,
.main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>