HTMLを使って画像の幅と高さを設定する方法

HTMLの width属性と height属性は、画像の大きさをピクセル単位で指定します。HTML 4.01では、heightはピクセルか、含む要素の%で定義できました。HTML5では、値はピクセルでなければなりません。このWikiHowでは、HTMLコードで画像のサイズを指定する方法を説明します。

1

HTML文書をテキストエディタで開きます。WindowsやMacのコンピュータには、メモ帳やテキストエディットのようなデフォルトのテキストエディタプログラムが付属しており、HTMLの作成や編集に使用できます。プログラム内の「ファイル」タブで「開く」をクリックしてHTML文書を開くか、ファイルブラウザでファイルを右クリックして「...で開く」をクリックします。

2

次の行をスクリプトに追加します： <img src="imagefile.jpg" alt="画像" height="42" width="42">

• srcは画像のファイルパスです。
• altは画像のタグです。
• これらの数値はピクセル単位であることに注意してください。
• styleタグも使えます。たとえば、次のようなコードをテキストに記述します。 <img src="imgfile.jpg" alt="画像" style="width:500px;height:600px;">.styleタグは、画像がそのサイズを維持することを保証し、それ以上の画像サイズのコマンドを上書きします。

3

高さと幅の数値を変更します。例えば、widthに21、heightに21を入力すると、元の画像の半分の大きさになります。

4

ファイルを保存し、任意のブラウザで効果を確認する。画像の大きさが気に入らない場合は、前の手順を繰り返してください。

この記事は、CC BY-NC-SAの下で公開されている「 HTMLを使って画像の幅と高さを設定する方法 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。