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

PDF形式でダウンロード

PDF形式でダウンロード

この記事には：

ステップ

関連記事

参照

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

ステップ

PDF形式でダウンロード

1. 
   1
   テキストエディタ－でHTMLドキュメントを開きます。WindowsとMacのコンピューターには、メモ帳やテキストエディットのようにHTMLの作成や編集ができるプログラムが初めから付属されています。これらのプログラムからファイルを選択して開くをクリックするか、自分のファイルブラウザーにあるファイルを右クリックしてブログラムから開くを選択します。
2. 
   2
   次のコードを加えます。：<img src="imagefile.jpg" alt="How.com.vn 日本語: Image" height="42" width="42">

   • srcは画像のファイルパスを表します。
   • alt は画像の属性を表します。
   • これらの数値はピクセル単位で示されていることに留意しましょう。
   • また、style のタグを使用することもできます。例えば、テキスト内に<img src="imgfile.jpg" alt="How.com.vn 日本語: Image" style="width:500px;height:600px;">というコードが含まれているとします。styleのタグを使用することで、他のサイズ設定に関わらずその画像のサイズが保たれます。
3. 
   3
   height と width の数値を変えます。例えば、width とheightのコード両方に21と入力すれば、元の画像の半分のサイズに設定されます。
4. 
   4
   ファイルを保存してからインターネットブラウザーで開き、編集を確認します。画像のサイズが気に入らなければ、これまでの手順をくり返して編集し直すことができます。
   広告

ポイント

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

広告