④【応用編】画像とリンクを追加して、一気にWebサイトらしくしよう！

HTMLで骨組みを作り、CSSで色をつけたら、次は「画像」と「リンク」です。 これらを追加するだけで、見た目は一気にプロっぽくなります。今回もコピペで試せるコード付きで解説します。

1. 画像を表示させる：imgタグ

Webサイトに写真やイラストを表示するには、img（イメージ）タグを使います。 このタグは少し特殊で、終了タグ（</img>）が必要ありません。

記述例： <img src=”画像のURL” alt=”画像の説明”>

・src（ソース）：表示したい画像がどこにあるか、住所を指定します。
・alt（オルト）：画像が表示されなかった時に出る説明文です。

2. 他のページへ飛ばす：aタグ

クリックすると別のページに移動する「リンク」は、a（アンカー）タグを使います。

記述例： <a href=”飛ばしたい先のURL”>表示する文字</a>

・href（エイチレフ）：移動先のURLを指定します。

3. まとめて実践！画像とリンクのあるページ

前回のコードをさらに進化させてみましょう。以下のコードを index.html に上書きして保存してみてください。

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>画像とリンクの練習</title>
    <style>
      body {
        text-align: center; /* 全体を真ん中寄せに */
        padding: 50px;
      }
      img {
        width: 300px;       /* 画像の幅を調整 */
        border-radius: 15px; /* 角を丸くする */
        box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 影をつける */
      }
      .my-link {
        display: inline-block;
        margin-top: 20px;
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        text-decoration: none; /* 下線を消す */
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>お気に入りの画像を紹介</h1>
    
    <img src="https://picsum.photos/300/200" alt="サンプル画像">

    <br>

    <a href="https://www.google.com" class="my-link">Googleで検索する</a>
  </body>
</html>

4. 今回のポイント

・画像にCSS（widthやborder-radius）をかけると、大きさを揃えたり角を丸くしたりできます。 ・リンクに背景色をつけると、クリックしやすい「ボタン」に変身します。

これだけで、ただのメモ書きだった画面が「Webサイト」らしくなりましたね！

まとめ

・画像は img タグで、場所（src）を指定する。
・リンクは a タグで、飛び先（href）を指定する。
・CSSを使えば、リンクをボタンのような見た目に変えられる。

コメント

PAGE TOP