HTML

HTML基礎講座 リンクを張りましょう

リンクは、クリックすることで別のページに飛ばす役割があります。

リンクでWebサイトを広げていきましょう。

aタグ

リンクを張るにはaタグを使います。

例えばこんな感じで使います。

<a href="https://sugawaya-blog.com/">スガワヤブログ</a>はこちら!

表示は次のようになります。

リンク先は、href属性で指定したURLのページになります。

画像にリンクを張る

次に、画像をクリックしたら違うページに飛ぶようにしたいと思います。

書き方は次のように書きます。

<a href="https://sugawaya-blog.com/"><img src="../image/SUGAWAYA.png" alt="sugawayaLogo"></a>

aタグの間にimgタグを入れ子にする形になります。

表示はこうなります。

マウスを画像の上にのせると、人の指のマーク(ポインター)になります。

まとめ

まとめとして、リンクはaタグにhref属性でリンク先を指定して、○○へなどの文言を挟んで作成することが分かりました。

画像も同じくaタグで挟むことでリンクにできることが分かりました。

簡単にできますので活用していきましょう。