HTMLで画像を使用する機会は多いと思いますが、元画像のサイズがそのままご自身の作成するWebサイトにぴったりのサイズである可能性はほとんどありません。
そこでHTML上に画像を指定する際には、多くの場合画像のサイズ変更が必要になります。
本記事では、HTMLで画像サイズを変更する方法とサイズ変更時の注意点を合わせてご紹介していきたいと思います。
目次
HTMLで画像サイズを変更する方法
HTMLで画像サイズを変更したい場合、大きく「HTMLタグで調整する」「CSSで調整する」の2つに分けることが出来ます。
HTMLでは通常画像を表示する際「img」タグを利用しますので、以降の説明では全てimgタグを使用する前提で解説していきます。
HTML側で変更する
HTML側で画像サイズを変更する場合、imgタグには「width」属性と「height」属性を指定することが可能で、それぞれ横幅と縦幅を調整することが可能です。
width属性
width属性の基本的な記述方法は下記の通りです。
<img src="画像パス" width="数値">
単位を指定せず例えば「100」と入力した場合には自動で「100px」として認識されます。
ちなみにwidth属性では「px(ピクセル)」と「%(パーセント」でサイズ指定が可能です。
「%(パーセント)」で画像サイズを指定したい場合、「widht=”100%”」のように記述します。
height属性
height属性の記述方法についてもwidth属性と同じです。
基本的な記述方法は下記の通りです。
<img src="画像パス" height="数値">
単位の指定方法についてもwidth属性と全く同じため、説明は割愛します。
CSS側で変更する
上述した方法以外にもCSSで画像サイズを変更することも可能です。
むしろHTML5からはデザインやスクリプト処理はHTMLファイルから切り離して記述するべきとの考え方から、CSSに記述する方が一般的になってきていると言えます。
基本的な記述方法はHTMLファイルにクラスを指定し、CSSでクラスに対してデザインを指定する方法が利用されます。
html側の記述
<img src="画像パス" class="sample">
CSS側の記述
.sample {
width: "100px";
height: "100px";
}
HTML側で画像サイズを変更するサンプル
では実際にHTMLタグの属性を使用して画像サイズを変更するサンプルコードを確認していきたいと思います。
同じ画像を様々なサイズ指定方法で表示するサンプルコード
同じ画像を様々なサイズ指定を記述することでどのように表示されるのかを実際の画面キャプチャで確認していきたいと思います。
index.html
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Image Size Sample</title> </head> <body> <h2>サイズ指定なし</h2> <img src="img/sample1.jpg"> <h2>ピクセル単位でのサイズ指定</h2> <img src="img/sample1.jpg" width="300" height="200px"> <h2>パーセント単位でのサイズ指定</h2> <img src="img/sample1.jpg" width="100%"> <h2>親要素に幅を指定した状態で横幅を100%に指定する</h2> <div style="width: 400px; height: auto"> <img src="img/sample1.jpg" width="100%"> </div> </body> </html>
サンプルコードをブラウザで表示すると下記のようになります。
HTMLから外部CSSファイルを取り込んで画像サイズを変更するサンプル
次にHTMLから外部CSSファイルを読み込んで画像サイズを変更するサンプルコードをご紹介していきます。
外部CSSファイルで画像サイズを変更するサンプルコード
上述したHMTLタグの属性を使用した画像サイズの変更をCSSでの記述に書き直してみたいと思います。
index.html
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Image Size Sample</title> <link rel="stylesheet" href="style.css"> </head> <body> <h2>サイズ指定なし</h2> <img src="img/sample1.jpg"> <h2>ピクセル単位でのサイズ指定</h2> <img src="img/sample1.jpg" class="class1"> <h2>パーセント単位でのサイズ指定</h2> <img src="img/sample1.jpg" class="class2"> <h2>親要素に幅を指定した状態で横幅を100%に指定する</h2> <div class="class3"> <img src="img/sample1.jpg" class="class2"> </div> </body> </html>
style.css
.class1 {
width: 300px;
height: 200px;
}
.class2 {
width: 100%;
}
.class3 {
width: 400px;
height: auto;
}
サンプルコードをブラウザ上で表示すると、HTMLタグの属性で指定した場合と全く同じように表示されていることをご確認頂けます。
HTMLで画像サイズを変更する際の注意点
HTMLで画像サイズを変更する際の注意点について、いくつかご紹介しておきたいと思います。
パーセンテージ指定は親要素のサイズに依存する
サンプルコードでもご紹介しましたが、同じimgタグに「width=”100%”」を指定した場合でも、親要素のサイズによってサイズが変わります。
上記サンプルの場合には、親要素なしのimgタグとdivタグを親要素として設定したimgタグの2つを用意しました。
親要素が存在するimgタグは、横幅が親要素のサイズまでしか拡大されていないことをご確認頂けるかと思います。
元画像よりサイズを大きくすると画像が粗くなる
元画像のサイズよりも大きく表示する場合、どうしても画像の粗さが目立ってきます。
画像の利用用途によっては、最大でも元画像の大きさに留めるなど、Webサイト作成時には考慮しておくことが大切です。
画像を縮小する場合は元画像の比率に合わせるのが基本
画像を縮小する際にも、元画像の比率と異なるサイズで指定すると横伸びや縦伸びするため、画像自体に違和感が生まれやすくなります。
元の画像と同じ見え方でサイズだけを変更したい場合には、縦横の比率を元画像と同じ設定にしておくことが重要です。
画像の大きさを変更しない場合でもサイズ指定しておく
画像のサイズでそのままWebサイトに表示する場合、特にサイズ指定などしない方も多いかと思いますが、あえて画像サイズをそのまま記述しておくことをおすすめします。
サイズ指定しておくことで、画像の読み込みを待たず文書の読み込みが行われるため、体感的にWebページ全体の表示速度が早く感じます。
さいごに：HTMLで画像サイズの調整は必須スキルの1つ
本記事では、HTMLで画像サイズを調整する方法と注意点をご紹介してきました。
HTMLで画像サイズの調整は必須スキルの1つです。
ぜひ今回ご紹介した基本を抑えて、Webサイト作成時には注意点を意識しながら、より見やすいサイト作成に取り組んでみてください。
また当メディアを運営しているポテパンではHTMLにおける解説動画も公開しております。わかりやすく解説しておりますので是非ご覧ください！
