画像サイズの指定

サイト内に画像を載せる場合、あらかじめ画像のサイズを調整しておけばその通りのサイズで表示されますが、大きいサイズの画像はスマートフォンなどの画面サイズに合わせて見やすく表示させる必要があります。（これを「レスポンシブデザイン」といいます）

★headタグ内にCSSを記述する

画像サイズをレスポンシブデザインに適用させる場合、headタグ内に《例》のように記述することで、《表示結果》のように表示されます。

《例》


<style>

img {

width: 100%;

height: auto;

max-width: 450px

}

</style>

《表示結果》

widthは画面サイズいっぱいに表示されるよう100% 、heightはそれに合わせて変化するようauto、max-widthはパソコンなどの大画面では最大450pxで表示されるように指定しています。max-widthの数値は任意で変更してかまいませんが、大体このくらいのサイズがよいでしょう。
なお、このときCSSのタイプを指定しておく必要があるため、<meta http-equiv="Content-Type" content="text/css; charset=shift_jis"> と記述しておきます。