備忘録的プログラミングリファレンス

<img>エレメント

 <img>エレメントは、画像を web ページに取り込むためのエレメントです。
 扱える画像は、JPG、GIF、PNG、APNG、AVIF、SVG、WebP形式です。

 <img>エレメントのsrc属性で画像ファイルの場所を指定します。そのファイルデータをブラウザが読み込みこむことで、あたかもページ内にあるように表示します。

<img>エレメント
<img src="url_" />
詳しくはタグの編集を参照してください。

 ブラウザにおいては、ワードのような文章編集ソフトのように画像などのメディアを手軽に埋め込むことができません。表示したい箇所にその取り込み元(URL)を <img> エレメントで指定します。
 例えば、ページのある場所と同じディレクトリ内で img ディレクトリの example.jpg という画像を取り込むには以下のようにします。

img ディレクトリ内のファイルを参照
<img src="./img/example.jpg" />

 画像ファイルはimgimageといった名称でサイト内の適当なディレクトリに保存しておくことが多いです。

 <img> エレメントは HTMLImageElement インターフェイスで定義されています。

右寄せ、左寄せ

 画像ファイルの表示は、文章の段落や章の中で右寄せ左寄せで表示することができます。詳しくは以下の右寄せ、左寄せを参照してください。

ユーザビリティ(usability)

 モバイル ユーザビリティといった画面の大きさによって画像も替えるには<picture>エレメントを使います。

属性

AttributeValueExtra information
idcssにも使えます。エレメントをユニークとします。
classcssに使います。同名のclassは同じスタイルが適応されます。
src取り込み元URLです。
height高さ。ピクセル単位です。
width幅。ピクセル単位です。
altもし画像が表示されなかった時の代替テキストです。
titleその他の情報。マウスオーバー時に表示されます。
styleHTMLでスタイルを適用します

タグの編集

タグの編集

右寄せ、左寄せ

 画像ファイルの表示は、文章の段落や章の中で右寄せ左寄せといった回り込み表示をすることができます。

 右寄せ左寄せのやり方は、CSS スタイルの float: left / right ; を使います。
 さらに、この回り込みは適当な位置で終了させなければなりません。終了するには、clear: right | left | both;です。

Example