レスポンシブデザイン

◎viewportとは

　・スマートフォン対応にさせる場合は必ず入れたほうが良い

　・head要素内にあるmeta name="viewport"は、スマートフォン向けのviewportの設定。スマートフォンのブラウザーの多くは
「viewport」と呼ばれる仮想ウィンドウサイズが設定されていて、標準ではWebサイトを下の表のように縮小して表示する。

　・viewportはHTMLドキュメントにmeta要素でhead要素内へ記述する。viewportの指定方法は、下記のように非常にシンプル。

<meta name="viewport" content="width=device-width ">

　・width="content-width"は、「viewportの幅をデバイスのスクリーンの幅に合わせる」という意味。widthには数字を直接指定しても大丈夫だが、device-widthを指定すると、解像度が異なるさまざまデバイスに対応できる。