HTMLで画像の高さと幅を設定する方法

共同執筆者 wikiHow編集チーム

HTMLでは、画像の幅と高さをピクセル単位で示してサイズを表します。HTML 4.01では、要素のピクセルまたは%で高さを示します。HTML5では、数値はすべてピクセルで示します。この記事では、HTMLコードを使って画像のサイズを設定する方法を紹介します。

ステップ

  1. 1
    テキストエディタ-でHTMLドキュメントを開きます。WindowsとMacのコンピューターには、メモ帳やテキストエディットのようにHTMLの作成や編集ができるプログラムが初めから付属されています。これらのプログラムからファイルを選択して開くをクリックするか、自分のファイルブラウザーにあるファイルを右クリックしてブログラムから開くを選択します。
  2. 2
    次のコードを加えます。<img src="imagefile.jpg" alt="Image" height="42" width="42">
    • srcは画像のファイルパスを表します。
    • alt は画像の属性を表します。
    • これらの数値はピクセル単位で示されていることに留意しましょう。
    • また、style のタグを使用することもできます。例えば、テキスト内に<img src="imgfile.jpg" alt="Image" style="width:500px;height:600px;">というコードが含まれているとします。styleのタグを使用することで、他のサイズ設定に関わらずその画像のサイズが保たれます。[1]
  3. 3
    heightwidth の数値を変えます。例えば、widthheightのコード両方に21と入力すれば、元の画像の半分のサイズに設定されます。
  4. 4
    ファイルを保存してからインターネットブラウザーで開き、編集を確認します。画像のサイズが気に入らなければ、これまでの手順をくり返して編集し直すことができます。[2]
    広告

ポイント

  • 必ず画像の高さと幅を明記しましょう。高さと幅を指定すれば、ページを読み込む際に必要なスペースが確保されます。しかしこの指定がないと画像のサイズがわからないため、ブラウザー側で必要なスペースを確保することができなくなってしまいます。そのため、画像を読み込む間にページのレイアウトが変わってしまいます。
  • サイズの大きい画像は、高さと幅を変えて表示させると、ページ上では小さく見えても、ユーザーは大きな画像をダウンロードすることになります。そうならないよう、プログラムで画像のサイズを変えてからページで使用しましょう。
広告

このwikiHow記事について

共著:
wikiHowスタッフ編集者
この記事は、経験豊富なwikiHowの編集者と調査員から成るチームによって執筆されています。調査員チームは内容の正確性と網羅性を確認しています。

この記事は役に立ちましたか?

はい
いいえ
広告