HTML alt属性マスター9のステップ！初心者も簡単に理解できる徹底解説

HTML alt属性マスターの画像HTML
2023.04.05
この記事は約5分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

○1. alt属性とは？

HTMLで画像を表示する際に使用する<img>タグの中にある、alt属性は画像が表示できない場合に代替テキストを表示する機能です。

SEO対策やアクセシビリティの向上のために重要な役割を果たします。

○2. alt属性の作り方

alt属性は、<img>タグ内にalt属性を追加するだけで作成できます。

例えば、下記のように記述します。

<img src="example.jpg" alt="ここに代替テキストを入力">

○3. alt属性の使い方

alt属性は、主に下記の2つの用途で使用されます。

  1. 画像が表示できない場合の代替テキスト
  2. SEO対策のためのキーワード

例えば、下記のように記述することで、画像が表示できない場合やSEO対策として役立ちます。

<img src="dog.jpg" alt="かわいい子犬の画像">

○4. alt属性の対処法

画像が表示できない場合の対処法としては、下記のようにCSSを使ってデザインを調整することができます。

img[alt] {
  font-size: 14px;
  color: #333;
}

○5. alt属性の注意点

  1. 代替テキストは短くてわかりやすいものにする
  2. 必要な画像には必ずalt属性を設定する
  3. 不要な画像や装飾的な画像には空のalt属性を設定する
  4. キーワードを詰め込みすぎないように注意する

○6. alt属性のカスタマイズ

alt属性は、下記のようにJavaScriptやCSSを使ってカスタマイズすることができます。

例1: JavaScriptを使って、画像にマウスオーバーしたときにalt属性を表示する。

<script>
document.querySelectorAll("img[alt]").forEach(img => {
  img.addEventListener("mouseover", () => {
    alert(img.getAttribute("alt"));
  });
});
</script>

例2: CSSを使って、画像が表示されない場合にalt属性を表示する。

img[alt]::before {
  content: attr(alt);
}

○7. サンプルコード

下記は、alt属性を使ったHTMLのサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Alt属性のサンプル</title>
</head>
<body>
  <h1>かわいい犬の画像</h1>
  <img src="dog.jpg" alt="かわいい子犬の画像">
</body>
</html>

○8. 応用例とサンプルコード

下記は、alt属性の応用例とそのサンプルコードです。

例1: スライドショーでalt属性を活用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スライドショーのサンプル</title>
  <style>
    .slideshow img {
      display: none;
    }
    .slideshow img.active {
      display: block;
    }
  </style>
  <script>
    window.addEventListener("DOMContentLoaded", () => {
      const images = document.querySelectorAll(".slideshow img");
      let currentIndex = 0;

      setInterval(() => {
        images[currentIndex].classList.remove("active");
        currentIndex = (currentIndex + 1) % images.length;
        images[currentIndex].classList.add("active");
      }, 3000);
    });
  </script>
</head>
<body>
  <h1>かわいい犬の画像スライドショー</h1>
  <div class="slideshow">
    <img src="dog1.jpg" alt="白い子犬の画像" class="active">
    <img src="dog2.jpg" alt="黒い子犬の画像">
    <img src="dog3.jpg" alt="茶色い子犬の画像">
  </div>
</body>
</html>

9. まとめ

この記事では、HTMLのalt属性の作り方、使い方、対処法、注意点、カスタマイズについて、初心者でも簡単に理解し実践できるように徹底解説しました。

また、サンプルコードや応用例も紹介しました。

これらを参考に、alt属性を活用して、SEO対策やアクセシビリティを向上させましょう。