HTMLでサイトやブログを作成した際に、ページ間を行き来する為の機能である『リンク』のコーディング方法について初心者向けに解説します。
今回のポイント
記事を作成した際に、あるページを参照して欲しい場合などに必要不可欠なリンク機能。
このようにウェブページを行き来する機能をハイパーリンクと呼びます。
今回はこのリンクの方法について解説していきます。
リンクを表す要素（a要素）
文章内にリンクを表す要素には、a要素を使用します。
a要素を使って『この文章はリンクだよ』と指定してあげます。
要素について分からない場合は以下のリンクを参照して下さい。
（これもリンクですね。。。）
ここから少しa要素について勉強しておきましょう。
a要素の意味と役割
anchorの略でハイパーリンクを表します。
a要素のカテゴリ
- フロー・コンテンツ
- フレージング・コンテンツ
- インタラクティブ・コンテンツ
a要素のコンテンツ・モデル
トランスペアレント（透明）
a要素を実際に記述してみる
それではここから実際にリンクを作成していくよ。
待ってました！！
今回は以下の図のように「ぱくぱくブログ」にプロフィールのページを作成して、そのページにリンクする前提で解説していきます。
もし図の内容が分からないようでしたら、以下の記事を参考にしてもらえると、index.htmlについては記述しています。
それではindex.htmlのページ内に以下のような記事を作成したとします。
ぱくぱくのプロフィールページを作成しました。
いつものようにこの文章は段落なので、p要素を記述します。
<p>ぱくぱくのプロフィールページを作成しました。</p>
そして今回は”プロフィールページ”の部分にリンクするようにa要素を記述していきたいと思います。
っとその前に、この文章を要素記述しやすいように分割します。
<p>
ぱくぱくの
プロフィールページ
を作成しました。
</p>
それではa要素を記述しましょう。
<p>
ぱくぱくの
<a>プロフィールページ</a>
を作成しました。
</p>
いかがでしょうか。
href属性を使ってのリンク先の書き方
しかしa属性だけでは、どこのページにリンクすれば良いのか分かりません。
そこでこのa要素内にhref（エッチ・レフ）属性を記述してあげる必要があります。
a要素だけでは『どこへのリンク』か分からないので、href属性を使って、『どこへのリンク』かを記述してあげる必要があるよ！
なるほど、地図はあるけど住所が分からないからか。。。
<p>
ぱくぱくの
<a href=”profile.html”>プロフィールページ</a>
を作成しました。
</p>
これでprofile.htmlのページにリンクする設定ができました。
少しhref（エッチ・レフ）属性について解説しておきます。
href=””の””の部分に内部リンクであれば同フォルダ内のhtmlファイル名を指定することでリンクすることができます。
また、外部リンクさせたい場合はそのアドレスを指定することで外部リンクも可能となります。
それでは出来栄えを確認してみましょう。
いかがでしょうか。
リンクを作成することができました。
そしてこのリンクは、リンク先を別ウィンドウで開く設定をすることもできますよ。
別ウィンドウでリンク先を開く設定方法
別ウィンドウで開くってどういう意味ですか？
ブラウザを新たに起動してリンク先を開くってことだよ。
この方法にはtarget属性を使用します。
それでは先程作成した記事にtarget属性を追記してみましょう。
<p>
ぱくぱくの
<a href=”profile.html” target=”_blank”>プロフィールページ</a>
を作成しました。
</p>
どうですか？別ウィンドウ（タブ）で開くことができましたか？
このように記事の中にリンク先を作成して、記事の内容をより濃い内容にしていきましょう。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら
