imgタグの使い方

imgタグとは？

imgタグはHTMLで画像を表示するために使われる基本的な要素です。ウェブデザインやコンテンツ制作において、視覚的な情報を伝える際に欠かせないものです。画像はサイトを魅力的にし、ユーザーエクスペリエンスを向上させる重要な要素の一つです。

<img>は HTML の要素で、文書に画像を埋め込みます。

参考：mdn web docs

imgタグの基本的な使い方

img タグの書き方と、src 属性の役割

HTMLで画像を表示するためには、<img> タグを使用します。

<img src="画像のファイルパス" alt="代替テキスト">

• <img>: 画像を表示するための要素。
• src: 画像のファイルパスやURLを指定する属性。
• alt: 画像が読み込めない場合やスクリーンリーダーでの利用時に表示される代替テキスト。

例）

<img src="path/to/your/image.jpg" alt="Beautiful Landscape">

src 属性を使用して画像を読み込む手順

src 属性には画像のファイルパスやURLを指定します。相対パスや絶対パスを使用して、プロジェクト内の画像や外部の画像を指定することができます。

相対パスの例:

<img src="images/picture.jpg" alt="A Picture">

絶対パスの例:

<img src="https://example.com/images/picture.jpg" alt="A Picture">

代替テキスト: 画像が読み込めない場合やスクリーンリーダーでの利用を考慮した alt 属性の使い方

alt 属性は画像が読み込めない場合に表示されるテキストであり、スクリーンリーダーを使用するユーザーにとっても重要です。適切な代替テキストを提供することで、アクセシビリティが向上します。

例）

<img src="path/to/your/image.jpg" alt="A happy family enjoying a picnic">

画像のスタイリング

サイズの指定: width や height 属性を使用して画像サイズを指定する方法

画像のサイズを制御するために、width と height 属性を使用します。これらの属性にはピクセル数やパーセンテージを指定できます。

例）

<img src="path/to/your/image.jpg" alt="A Beautiful Sunset" width="300" height="200">

上記の例では、画像の幅が300ピクセル、高さが200ピクセルに設定されています。ただし、これは画像がそのまま表示されることを意味し、画像のアスペクト比が変わる可能性があります。

CSSスタイリング: CSSを用いて画像にスタイルを適用する手法

画像に対してCSSを使用してスタイルを適用することができます。これにより、影、角丸の設定、回転など、様々なスタイリングオプションが利用できます。

例）

<style>
  .styled-image {
    width: 100%;
    max-width: 500px; /* 画像の最大幅を制限 */
    border: 2px solid #ddd; /* ボーダーの追加 */
    border-radius: 10px; /* 画像の角を丸くする */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影の追加 */
  }
</style>

<img src="path/to/your/image.jpg" alt="A Stylish Image" class="styled-image">

上記の例では、styled-image というクラスが画像に追加され、そのクラスに対してCSSでスタイルが定義されています。これにより、画像に影、ボーダー、角の丸みなどが追加されます。

画像の応用的な操作

レスポンシブデザインへの適用: さまざまなデバイスに適した画像表示の実現

レスポンシブデザインでは、異なる画面サイズのデバイスに適した画像を表示することが求められます。max-width: 100% を設定することで、画像は親要素に合わせて自動的に縮小され、レスポンシブな表示が可能となります。

例）

<style>
  .responsive-image {
    max-width: 100%;
    height: auto;
  }
</style>

<img src="path/to/your/image.jpg" alt="A Responsive Image" class="responsive-image">

上記の例では、.responsive-image クラスが画像に適用され、画像は親要素に合わせて自動的にサイズが調整されます。

遅延読み込み: ページの読み込みを最適化するための遅延読み込みの実装

遅延読み込みは、ページが読み込まれてから画像が読み込まれるまでの遅延を意味します。これにより、初期読み込み時間を短縮し、ユーザーエクスペリエンスを向上させることができます。

例）

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var lazyImages = document.querySelectorAll('.lazy-image');

    lazyImages.forEach(function(img) {
      img.src = img.dataset.src;
      img.onload = function() {
        img.classList.add('loaded');
      };
    });
  });
</script>

<img data-src="path/to/your/image.jpg" alt="A Lazy-loaded Image" class="lazy-image">

上記の例では、data-src 属性に画像のパスがあり、JavaScriptによってページが読み込まれた後に実際の src 属性に設定されます。これにより、画像が実際に表示されるまでの読み込みを遅らせることができます。

imgタグのまとめ

imgタグを解説してみました。

HTMLを勉強し始めて最初の方に覚えるタグのひとつだと思います。
コーダーではないwebに携わる人でも画像のタグはimgと知っている人も多いタグの一つです。

適切にマークアップして情報を正確に読み取ってもらいましょう。