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]
    広告

ポイント

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

広告

関連記事

How to

XMLファイルを開く

How to

画像検索で簡単に人物を特定する

How to

EMLファイルを開く

How to

ワイヤレスマウスを接続する

How to

キズの付いたCDを修復する

How to

VCFファイルを開く

How to

特定のウェブサイトにアクセスできない問題を解決する

How to

DVDプレーヤーを接続する

How to

Chromeでタブを切り替える

How to

DLLファイルを開く

How to

コマンドプロンプトでファイルをコピーする

How to

大容量の動画ファイルをメールで送る

How to

Facebook Messengerでメッセージを削除する

How to

AndroidでSMSを別の端末に移行する
広告

このwikiHow記事について

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

wikiHowのコンテンツ管理チームは、編集チームが編集した記事を細心の注意を払って精査し、すべての記事がwikiHowの高品質基準を満たしているかどうかを確認しています。
このページは 159 回アクセスされました。

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

広告