【HTML入門】width,height属性で画像サイズを指定する方法と注意点

こんにちは!ライターのシホです!

みなさんはHTMLで画像のサイズを変えたいとき、なぜか「画像が粗くなったりページが重くなったりすることはありませんか?」

そこで今回は、HTMLで画像のサイズを指定する方法に加え、これらの画像が粗くなる問題・ページが重くなる問題の解決策を説明していきたいと思います。ぜひ参考にしてみてください!

画像の表示サイズを変える方法

width属性height属性

widthは横の長さを変える属性で、heightは縦の長さを変える属性です。img要素の属性としてタグの中でサイズを指定していきます。

基本構造
<img src="画像ファイル名orURL" alt="画像の内容" width="横幅" height="縦幅">

widthとheightにはピクセルかパーセントで数値を指定します。

ピクセルとパーセントの違い

ピクセルとは

絶対的な指定方法で、スクリーンの1ピクセルの長さを1とした単位です。表示されるサイズは使っているモニタの解像度に依存するので、どのモニタで表示しても同じように表示されません。

次のかわいい犬の画像を使って例をあげてみます。この画像は横が200ピクセル、縦が114ピクセルです。

かわいい犬

画像:サンプル画像

次のサンプルコードは、画像の大きさをピクセルで指定しています。

サンプルコード

<img src="かわいい犬.jpg" 
alt="犬" width="300" height="200">
<img src="かわいい犬.jpg" 
alt="犬" width="100" height="300">
<img src="かわいい犬.jpg" 
alt="犬" width="200" height="100">

スクリーンショット 2018-05-15 14.55.50

画像:ブラウザ表示

パーセントとは

相対的な指定法で、スクリーンの幅と高さを100%と考えたときの比率です。つまり、どのスクリーンに対しても設定した割合で画像が表示されます。次のサンプルコードは、画像の大きさをパーセントで指定しています。

サンプルコード

<img src="かわいい犬.jpg" 
alt="犬" width="30%" height="50%">
<img src="かわいい犬.jpg" 
alt="犬" width="10%" height="80%">
<img src="かわいい犬.jpg" 
alt="犬" width="50%" height="30%">

スクリーンショット 2018-05-15 14.58.24

画像:ブラウザ表示

このように、横の長さと縦の長さのパーセントはスクリーンを100%としたときの割合になっています。

画像の表示サイズを変える際の注意点

画像が粗くなる

お気づきの方もいると思いますが、上のかわいい犬の画像は、横と縦の長さが長すぎると画像が粗くなり、画像として見にくくなっていますよね。このように、小さいデータの画像を無理やり大きくすると粗くなってしまうことがあります。

また、大きいデータの画像を小さいアイコンなどに縮小する場合も画像が粗くなって何を表しているかわからないアイコンになってしまう場合もあります。

画像のサイズを変えて粗くなってしまう場合は、画像サイズが適切ではないので、画像編集ソフトなどを使って元の画像データのサイズを調節してみましょう。

ページが重くなる

画像を挿入したものの、ページが重くなることはありませんか?これは、データの大きい画像をたくさん挿入したことが原因の場合があります。

特に画像の質にこだわらない場合や、データのサイズを小さくしても画像が粗くなることなく表示できる場合は、画像編集ソフトなどを用いてデータを小さくして挿入するようにしましょう。

ウェブサイト制作スキルで自由に働けるようになるには

今回はHTMLにwidthとheightを記載する形で画像サイズを変更する方法を解説しましたが、もしあなたが今後「ウェブサイト制作を個人で請け負い、場所や時間に縛られずに働けるようになりたい」と思っているなら、CSSやJavaScript、WordPressなどのスキルやPhotoshopやIllustratorなどのデザインスキルも必要です。

ウェブサイト制作に必要なスキルと学習手順はプログラミング学習診断アプリで解説していますので、こちらも見てみてください。

実際の案件をこなす過程ではお客様の要望に応えるために幅広いスキルが必要になりますし、スキルの広さによって案件の数も変わってきます。クラウドワークスでも以下のようにプログラミングの知識も入れておくことを推奨しています。

HTML・CSSコーディングは短納期で大量のページを作成する案件も多く見受けられます。クライアントの要求に応えるため、コスト(1ページあたり単価)・スピード・クオリティの優先度を見極めながら進めるバランス感覚も求められる仕事です。複雑な案件ではHTML/CSSだけに留まらず、JavaScript(AJAX)を使った機能実装、WordPressをはじめとするCMSテンプレートの開発を手がけるケースもあります。このような場合にはプログラミング言語の知識も必要となるでしょう。
引用:CrowdWorks

こういった複数の技術を短期間で効率よく身につけるにはプログラミングスクールでの学習がおすすめです。

侍エンジニア塾ではウェブサイト制作希望の場合、特化してオリジナルカリキュラムを作成し、マンツーマンで学習をするため、途中で仕事を獲得してきて受講期間中に仕事を納品するなど、臨機応変に対応が可能です。

実際の仕事を通じてスキルを学べるスクールは稀で、最短で実力をあげたい方はぜひ一度無料体験レッスンへお越しください。オンラインでも受講可能で、以下のボタンよりお申し込みいただけます。

無料体験レッスンへ申し込む

まとめ

いかかでしたでしょうか?HTMLで画像のサイズを変える際は、

  • ピクセルとパーセントのどちらで指定するか
  • 画像が粗くならないように数値を指定する
  • 画像のデータが不必要に大きすぎてページが重くならないか

の点に注意しましょう。ぜひ実践してみてくださいね!

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

シホ

シホ

1990年生まれ。長崎県出身。趣味は歌・登山・暗闇ボクシング。
最近HTMLとCSSの勉強を再スタートしました!
「初心者の方にもわかりやすく」をモットーにライターとして日々精進中です★

おすすめコンテンツ

いまならレッスン期間が2週間延長!この秋、プログラミングを学ぼう

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー