HTML Images

最終更新日
金曜日 27日 5月 2022

html 画像

画像は、Web ページのデザインと外観を向上させることができます。html ファイルで画像を使用する場合は、 タグを使用してこれを行うだけです <img>

src 属性

必須の src 属性は、イメージへのパス (URL) を指定します。

  • タグの最初の属性 <img>src または source 属性と呼ばれます。
  • <img> タグとアンカー <a> タグの両方を比較すると、src 属性はリンクで使用した href 属性のように動作します。
  • src 属性は、画像ファイルを指定する場所です。
  • このセクションでは、ファイルは「images」というフォルダにあります。
  • 画像ファイルは、アンカータグと同様に、相対パスと絶対パスを使用してロードできます。

HTML に画像を挿入する

	<img src="./two.png" />
	

これは、ブラウザに ./two.pngという名前の画像を見つけるように指示しているため、相対パスです。../は、ブラウザに同じディレクトリ/フォルダまたは現在のディレクトリ/フォルダを調べるように指示していることを意味します。

alt 属性

  • 必須の alt 属性は、イメージの代替テキストを提供します。
  • 画像のもう一つの重要な属性は、代替テキストを表す「alt」と呼ばれます。
  • このテキストは、使用している画像が何であるかを説明するために使用されます。
  • ブラウザが画像を読み込めない場合、代替テキストがブラウザに表示されます。
	<img
  src="./img/2.png"
  width="300"
  height="300"
  alt="Some Alternative Text"
  title="Some Wonderful Title for Image"
/>
	

画像 title 属性

また、画像にタイトル属性を追加して、必要に応じてさらに補足情報を提供することもできます。

	<img src="./img/2.png" width="300" height="300" alt="Some Alternative Text" />
	

画像サイズ – Width と Height

style 属性を使用して、画像の widthheight を指定できます。

	<img
  src="./img/2.png"
  alt="Some Alternative Text"
  style="width:300px;height:300px;"
/>
/>
	

html 挿入画像

width 属性と height 属性を使用できます。

	<img src="./img/2.png" width="300" height="300" alt="Some Alternative Text" />
	

手記:常に画像の幅と高さをピクセル単位で定義します。

画像をリンクとして使用する

画像をリンクとして使用するには、<img> タグの中に <a> タグを入れます。

	<a href="url">
  <img src="/2.png" alt="CJ" />
</a>
	

いくつかの一般的に使用される画像形式

略称 ファイルフォーマット ファイル拡張子
APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg

警告: ほとんどの画像は著作権で保護されています。次の場合を除き、Web ページに画像を表示しないでください。

  • あなたは画像を所有しています。
  • イメージの所有者からアクセス許可を得ている。
html 画像
html 画像埋め込み
html 画像 埋め込み
html写真
画像 html
html 写真
画像表示 html