1. 基本の画像表示(imgタグ)
<img> タグを使うと、Webページに画像を表示できます。よく使う属性は次のとおりです。
src:画像ファイルのURL(パス)alt:画像の代替テキスト(画像が表示できない場合の説明文)width/height:表示する幅・高さ(pxなど)title:画像にマウスを乗せたときに表示されるヒント
サンプルとして、次のような画像を表示してみます。
※ 実際に自分のサイトで使うときは、src に自分の画像ファイルのパスを指定してください。
2. 図(figure)とキャプション(figcaption)
画像に対して、「これは何の画像か」という説明文(キャプション)をセットで表示したいことがあります。
そのような場合は、<figure> と <figcaption> を使うと、1つの意味のかたまりとして表現できます。
このように、<figure> の中に <img> と <figcaption> をまとめて入れます。
3. いろいろなリンクの例
通常のリンク(同じタブで開く)
MDNのimg要素の解説ページ へのリンクです。
新しいタブで開くリンク
外部サイトに移動するときに、target="_blank" を付けると、新しいタブで開くことができます。
※ target="_blank" を使うときは、rel="noopener noreferrer" も一緒に指定しておくのが安全面で推奨されています。
ページ内リンク(このページの別の場所へ移動)
例えば、ページの先頭に戻るリンクは次のように書けます。
4. 画像をリンクにする(バナー風)
画像全体をクリックすると、別のページに移動する「バナーリンク」のような表現もよく使われます。
画像を <a> タグで囲むだけで実現できます。
※ このリンク先URL(https://example.com/html-basic)や画像パスは実際のサイトに合わせて書き換えてください。