DAY 2

ギャラリーサイトを作ろう

Day 2: ギャラリーサイトを作ろう

画像の表示、リンクの作成、リストの使い方をマスターして、魅力的なギャラリーサイトを作りましょう！

今日のゴール

  • 画像を表示できる
  • リンクを作成できる
  • リストを使いこなせる
  • ギャラリーサイトを完成させる
1

画像を表示しよう

Webページに画像を表示するには <img> タグを使います。 imgタグは閉じタグが不要な「空要素」です。 

<img src="画像のURL" alt="画像の説明">

重要な属性

属性 意味 必須
src 画像のURL（場所） ⭕ 必須
alt 画像の説明文（画像が表示できない時に表示） ⭕ 必須
width 画像の幅（ピクセル） 任意
height 画像の高さ（ピクセル） 任意
alt属性は必ず書こう！

alt属性は、視覚に障害がある方がスクリーンリーダーで読み上げる際や、画像が読み込めない時に重要です。アクセシビリティの観点から必須です。

やってみよう！

以下のサンプル画像URLを使って、画像を表示してみましょう。

https://picsum.photos/400/300

※ランダムな画像が表示されます

<img src="https://picsum.photos/400/300" alt="サンプル画像">
Lesson 1 of 5
2

リンクを作ろう

他のページへのリンクを作るには <a> タグを使います。 「a」は「Anchor（アンカー＝錨）」の略です。 

<a href="リンク先のURL">リンクテキスト</a>

よく使う属性

属性 意味
href リンク先のURL
target="_blank" 新しいタブで開く
画像をリンクにする

aタグの中にimgタグを入れると、画像をクリックしてリンク先に飛べます！

<a href="https://example.com">
  <img src="image.jpg" alt="説明">
</a>

やってみよう！

Googleへのリンクを作ってみましょう。

<a href="https://www.google.com" target="_blank">
  Googleを開く
</a>
Lesson 2 of 5
3

リストを作ろう

HTMLには2種類のリストがあります。

順序なしリスト（箇条書き）
<ul> - Unordered List
  • 項目1
  • 項目2
順序ありリスト（番号付き）
<ol> - Ordered List
  1. 項目1
  2. 項目2
<!-- 順序なしリスト -->
<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>バナナ</li>
</ul>

<!-- 順序ありリスト -->
<ol>
  <li>最初にこれ</li>
  <li>次にこれ</li>
  <li>最後にこれ</li>
</ol>
liタグ

<li>は「List Item」の略。必ずulまたはolの中で使います。

やってみよう！

あなたの好きなものを3つ、リストにしてみましょう。

<h2>好きな食べ物</h2>
<ul>
  <li>ラーメン</li>
  <li>寿司</li>
  <li>カレー</li>
</ul>

<h2>やりたいことランキング</h2>
<ol>
  <li>旅行に行く</li>
  <li>新しいスキルを身につける</li>
  <li>美味しいものを食べる</li>
</ol>
Lesson 3 of 5
4

組み合わせてみよう

ここまで学んだタグを組み合わせると、リッチなコンテンツが作れます！

リストの中に画像リンク

<ul>
  <li>
    <a href="photo1.html">
      <img src="photo1.jpg" alt="写真1">
    </a>
  </li>
  <li>
    <a href="photo2.html">
      <img src="photo2.jpg" alt="写真2">
    </a>
  </li>
</ul>
サンプル画像URL

練習用に以下のURLが使えます。idを変えると違う画像が表示されます。

  • https://picsum.photos/id/10/200/150
  • https://picsum.photos/id/20/200/150
  • https://picsum.photos/id/30/200/150

やってみよう！

リストを使って、3つの画像を並べてみましょう。

<h2>フォトギャラリー</h2>
<ul>
  <li>
    <a href="https://picsum.photos/id/10/800/600" target="_blank">
      <img src="https://picsum.photos/id/10/200/150" alt="森の風景">
    </a>
    <p>森の風景</p>
  </li>
  <li>
    <a href="https://picsum.photos/id/20/800/600" target="_blank">
      <img src="https://picsum.photos/id/20/200/150" alt="海の風景">
    </a>
    <p>海の風景</p>
  </li>
  <li>
    <a href="https://picsum.photos/id/30/800/600" target="_blank">
      <img src="https://picsum.photos/id/30/200/150" alt="山の風景">
    </a>
    <p>山の風景</p>
  </li>
</ul>
Lesson 4 of 5
✨

【実践】趣味のギャラリーサイトを完成させよう！

Day 2の総まとめです！今日学んだことを使って、ギャラリーサイトを作りましょう。

必須要素チェックリスト

  • タイトル（h1）
  • 画像を3枚以上
  • 画像にリンクを設定
  • リスト（ul または ol）を使用
  • 外部サイトへのリンク
テーマ例
  • ・旅行の写真ギャラリー
  • ・お気に入りの映画・本
  • ・好きな動物図鑑
  • ・推しアーティスト紹介
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>私の旅行ギャラリー</title>
</head>
<body>
  <h1>🌍 私の旅行ギャラリー</h1>
  <p>これまでに訪れた場所の写真を紹介します。</p>
  
  <h2>📸 フォトギャラリー</h2>
  <ul>
    <li>
      <a href="https://picsum.photos/id/10/800/600" target="_blank">
        <img src="https://picsum.photos/id/10/200/150" alt="森の風景">
      </a>
      <p>緑豊かな森</p>
    </li>
    <li>
      <a href="https://picsum.photos/id/15/800/600" target="_blank">
        <img src="https://picsum.photos/id/15/200/150" alt="美しい湖">
      </a>
      <p>静かな湖畔</p>
    </li>
    <li>
      <a href="https://picsum.photos/id/29/800/600" target="_blank">
        <img src="https://picsum.photos/id/29/200/150" alt="山の景色">
      </a>
      <p>雄大な山々</p>
    </li>
  </ul>
  
  <h2>🏆 行きたい場所ランキング</h2>
  <ol>
    <li>北海道</li>
    <li>沖縄</li>
    <li>京都</li>
  </ol>
  
  <hr>
  
  <h2>🔗 おすすめリンク</h2>
  <ul>
    <li><a href="https://www.google.com/maps" target="_blank">Google マップ</a></li>
    <li><a href="https://www.jalan.net" target="_blank">じゃらん</a></li>
  </ul>
</body>
</html>
Lesson 5 of 5 (Final)

Day 2 まとめ

今日学んだタグ

<img> <a> <ul> <ol> <li>

ポイント

  • ✅ img には必ず alt属性を付ける
  • ✅ target="_blank" で新タブで開く
  • ✅ リストは ul/ol + li で構成
  • ✅ タグは組み合わせて使える
Day 3 へ進む