今回は、他のページへリンクを貼る方法を紹介します。
別のページを作成
index.htmlと同じフォルダに、subpage.htmlを作成して以下のように記述してください。
<p>これはサブページです。</p>a要素の使い方
index.htmlからsubpage.htmlに飛ぶようにします。
他のページへのリンクはa要素を使います。
<p>サブページは<a href="subpage.html">こちら</a></p>a要素で囲んだ部分がリンクになり、クリックするとsubpage.htmlに飛ぶようになりました。
href属性には、リンクさせたいページのパスを指定します。
パスの指定は、以下のように書くこともできます。
<p>サブページは<a href="./subpage.html">こちら</a></p>./は、同じフォルダ（ディレクトリ）を指しており、同じディレクトリの「subpage.html」をリンクするということです。
前述のコードとは同じことをしていますが、このような書き方もあることだけ覚えておいてください。
外部のサイトにリンクさせたい場合は、以下のように記述します。
<p><a href="https://www.google.co.jp/">Google</a>でWeb上の情報を検索できます。</p>URLを入れることで、外部のサイトにリンクできます。
ページのURLはGoogle Chromeのアドレスバーに表示されるので、それをコピペしてください。
“./subpage.html”のような記述を相対パスと言います。index.htmlから見てどこにsubpage.htmlがあるかを指定するので相対パスです。
“https://www.google.co.jp/”のようにURLで指定することを絶対パスと言います。
別のタブで開く
リンク先のページを別タブで開いて欲しい場合、target属性を使います。
<p><a href="https://www.google.co.jp/" target="_blank">Google</a>でWeb上の情報を検索できます。</p>target属性に_blankを指定すると、別タブで開くようになります。
実際にリンクをクリックして別タブで開くか確認してください。
target=”_blank”を指定する際は、セキュリティの観点から以下のように記述することが推奨されています。
<p><a href="https://www.google.co.jp/" target="_blank" rel="noopener noreferrer">Google</a>でWeb上の情報を検索できます。</p>rel=”noopener noreferrer”を追加しました。
画像にリンクを貼る
テキストだけでなく、画像にリンクを貼ることも可能です。
画像は前回のレッスンで保存した画像を使用してください。
<p>
<a href="https://pixabay.com/ja/">
<img src="images/image.jpg" alt="サンプル画像です。">
</a>
</p>画像をクリックすると、https://pixabay.com/ja/に飛ぶのが確認できるはずです。