レッスン 4: リンクと画像を追加してみよう

この記事の概要

ウェブページにリンクと画像を追加することで、内容がさらに豊かになり、他のページへ誘導したり視覚的に情報を伝えたりすることができます。このレッスンでは、リンクと画像をHTMLに追加する基本的な方法を学びます。初心者向けに、リンクの属性や画像サイズの指定についてもわかりやすく解説します。

リンクを追加する

リンクは、<a>タグを使ってHTMLに追加します。<a>タグには「href属性」を使い、リンク先のURLを指定します。

基本的なリンクの書き方

以下のように、href属性でリンク先URLを指定し、表示するテキストをタグで囲みます。

<a href="https://www.example.com">Exampleサイトへ行く</a>

新しいタブでリンクを開く方法

リンクをクリックしたときに新しいタブで開くようにするには、target="_blank"属性を追加します。

<a href="https://www.example.com" target="_blank">新しいタブで開くリンク</a>

画像を追加する

画像をHTMLに追加するには、<img>タグを使用します。<img>タグには「src属性」と「alt属性」が必要です。

src属性：画像のURLやパスを指定します。
alt属性：画像が表示されないときの代替テキストを指定します。

基本的な画像の書き方

<img src="https://www.example.com/image.jpg" alt="サンプル画像">

画像のサイズを指定する

画像のサイズを調整するには、「width」や「height」属性を使用します。ピクセル数（例：width="200"）で指定することが一般的です。

<img src="https://www.example.com/image.jpg" alt="サンプル画像" width="200">

実践：リンクと画像を組み合わせたHTML

以下のコードをテキストエディタに入力し、リンクと画像が表示されることを確認してみましょう。

<!DOCTYPE html>
<html>
<head>
    <title>リンクと画像を追加する</title>
</head>
<body>
    <h1>お気に入りのウェブサイト</h1>
    <p>こちらは私のお気に入りのサイトへのリンクです：</p>
    <a href="https://www.example.com" target="_blank">Exampleサイト</a>

    <h2>おすすめの写真</h2>
    <p>以下の画像は私のお気に入りです：</p>
    <img src="https://www.example.com/image.jpg" alt="美しい風景" width="300">
</body>
</html>