クエスト6：属性値（href・src・alt）を取得

今回の課題

商品一覧の HTML から、各商品の href・img の alt・商品名を取得して出力しよう！

📖 解説を見る

🔗 リンクや画像の属性を取得しよう

• tag["href"]：属性値を取得（なければ例外）
• tag.get("alt")：属性値を取得（なければ None）
• tag.attrs：全属性を辞書で取得

href・src・alt・data-* 属性など何でも取れます！

ヒントを見る

card.find("a")["href"] でリンクを取得。card.find("img").get("alt") でaltテキストを取得しよう

期待する出力

ワイヤレスヘッドホン: /products/1 (ワイヤレスヘッドホン)
Bluetoothスピーカー: /products/2 (Bluetoothスピーカー)
ノイズキャンセリングイヤホン: /products/3 (ノイズキャンセリングイヤホン)

📄 見本

「答えを見る」を押すと、お手本のコードが出ます。クリックでコピーできます。

💻 コードエディタ

from bs4 import BeautifulSoup

html_content = """
<html>
<body>
  <div class="product-list">
    <div class="product">
      <a href="/products/1">
        <img src="/images/headphone.jpg" alt="ワイヤレスヘッドホン">
      </a>
      <p class="name">ワイヤレスヘッドホン</p>
    </div>
    <div class="product">
      <a href="/products/2">
        <img src="/images/speaker.jpg" alt="Bluetoothスピーカー">
      </a>
      <p class="name">Bluetoothスピーカー</p>
    </div>
    <div class="product">
      <a href="/products/3">
        <img src="/images/earphone.jpg" alt="ノイズキャンセリングイヤホン">
      </a>
      <p class="name">ノイズキャンセリングイヤホン</p>
    </div>
  </div>
</body>
</html>
"""

soup = BeautifulSoup(html_content, 'html.parser')

# TODO: .product クラスを全て取得してループ処理してください
for product in soup.select("???"):
    # TODO: <a> の href 属性を取得してください（tag["属性名"] または tag.get("属性名")）
    link =
    # TODO: <img> の alt 属性を取得してください
    name =
    # TODO: .name クラスのテキストを取得してください（product.find で絞る）
    product_name =
    print(f"{product_name}: {link} ({name})")

あなたの出力

実行すると結果がここに表示されます

このクエストはプレミアム限定です

クエスト6：属性値（href・src・alt）を取得

クエスト6：属性値（href・src・alt）を取得

れんしゅうもんだい