今回は、HTMLを使ってWebページに画像を表示する方法を紹介します。

imgタグとは？

<img>タグは、画像をWebページに表示するために使います。このタグは自己閉じタグであり、終了タグは必要ありません。画像のURLや説明文などの属性を使って、画像を正しく表示させることができます。

基本的なimgタグの使い方

最もシンプルな<img>タグの例を見てみましょう。

<img src="path/to/your/image.jpg" alt="画像の説明">

ここで、src属性には表示したい画像のURLを指定し、alt属性には画像の説明文を記述します。alt属性は、画像が表示されないときや、視覚障害者向けのスクリーンリーダーにとって重要です。

画像のサイズを指定する

画像の表示サイズを指定するには、width属性とheight属性を使います。ピクセル単位でサイズを指定できます。

<img src="path/to/your/image.jpg" alt="画像の説明" width="300" height="200">

この例では、画像の幅を300ピクセル、高さを200ピクセルに設定しています。

画像をリンクにする

画像をクリックすると別のページに移動するようにしたい場合、<a>タグと一緒に使います。

<a href="https://www.example.com">
  <img src="path/to/your/image.jpg" alt="画像の説明">
</a>

この例では、画像をクリックするとhttps://www.example.comに移動します。

画像の位置を調整する

画像の位置を調整するには、CSSを使います。例えば、画像を中央に配置する方法は以下の通りです。

<style>
  .centered-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
</style>

<img src="path/to/your/image.jpg" alt="画像の説明" class="centered-image">

この例では、CSSクラスcentered-imageを使って画像を中央に配置しています。

まとめ

今回は、HTMLで画像を表示するための基本的な方法について学びました。<img>タグを使って、画像をWebページに追加してみましょう。