はいどうもこんにちは、双極くんです。
今回は世界中の情報をハイパーリンクでつなぎ合わせるアンカータグ<a>について学びます！
これまで11回にわたって、あなたと共にHTMLの学習を行ってきました。
ここまでのプログラミング学習は基本的にテックアカデミーさんの「はじめてのHTML入門講座」を参考にこのブログを作成させて頂いていました。
でも、ここからはテックアカデミーさんの「はじめてのHTML入門講座」と同じ順ではありながらも、あなたにとってより分かりやすい入門講座とするための付加的な情報を盛り込み、より見やすいものとした双極くんオリジナルなプログラミング学習ブログを作成して行きたいと思います。
では、このpart12からリニューアルした双極くんのプログラミング学習HTML後編を共に学んで行きましょう！
ところで、あなたがいろいろなウェブページを見ていると、必ずと言っていいほど何らかのリンクが貼ってありますよね。
今回はそんなリンクに関係するHTMLのアンカータグ<a>・href属性・id属性について学んで行きましょう。
アンカータグ<a>・href属性・id属性
アンカー<a>とは
アンカーとは船をとどめる錨という意味合いがあります。
錨は通常、鎖などの先につけて船上から水底に落し，その重さと爪で泥や砂をひっかけることにより，船の移動を防ぐものですよね。
ウェブ上におけるアンカー（錨）は、それをどこかに引っかけて置くことで、そこにたどり着けるようにするリンクの飛び先というイメージです。
つまり、アンカータグはWebにおいてはリンク可能な特定ポイント、目印という意味で使います。
通常「リンク」というと、Webページと Webページをつなぐもので、リンクをクリックするとページのトップが表示されます。
しかし、アンカー<a>タグを用いた場合、リンク先の特定箇所を最初に表示することも可能です。
つまりユーザーがスクロールしなくても、見せたいポイントを表示できるということになります。
アンカー<a>タグの二つの属性
一般的にHTMLでアンカータグ属性は以下の２つです。
- href属性
- id属性
href属性とは
href属性のhref（読み方はエイチレフ）とは Hypertext Referenceの略です。直訳すると「ハイパーテキストの参照」となります。
つまり、「hrefとはハイパーテキスト上で参照機能として用いられる属性である」ということができます。
という訳でhref属性はリンクの飛び先がどこであるのかを伝えるものということが出来ます。
id属性とは
id属性とはページの中のある特定の部分（要素*1）に名前、固有の識別名IDを付けることが出来るものです。
このIDは、スタイルシート*2のセレクタ*3として使用されるほか、スクリプト*4やリンクなどの参照先として使用されることになります。
今回も具体例を見て行くことで分かってくることとなりますので、これからこの２つの属性を実際にプログラムに書いてファイルを作って行きましょう！
実際にやってみましょう
今回は次のようなファイルを用意しておきました。
これをブラウザで開いても何も表示されませんよね。
たとえば、このbodyの中にアンカー<a>タグを次のように書いてみます。
これを保存して更新します。
するとこのようになりました。
My Linkと表示されましたが、どこに飛べばいいのか指定していないので、これをクリックしても何も変わりません。
ではたとえば、このMy LinkからGoogleに飛ぶようにしてみたいと思います。
そのために今回学んでいるhref(エイチレフ)属性を使ってみましょう。
href属性を使ってみよう
それではMy LinkからGoogleに飛ぶためにhrefの後ろに＝(イコール)を付けて""(ダブルクォーテーション)の中にGoogleのURLを入れて、次のようにファイルを書き換えてみましょう。
これを保存して更新してみます。
My Linkと青文字でアンダーラインのあるリンクの見た目になりました。
では、これをクリックしてみましょう。
すると、このようにGoogleが表示されました！
指定したURLにアクセス出来ましたね。
このように
<a href="飛ばしたい先のURLを書く" >任意の名前(今回はMy Link)を書く*5</a>
という形でhref属性を使うことが出来る、という事を学ぶことが出来ました。
これに対してid属性はどのように使用するのかを実際に見て行きましょう。
id属性を使ってみよう
ここではid属性がどのような働きをするのか、シミュレーションをしてみましょう。
まずは、先ほどのファイルを使ってa要素の下に多く（一列に<br>を14個の4段）の改行brを書いた後に
<p>ここはindexというidがついた場所です</p>
というパラグラフを用意しましょう。
実際にはこのように書きました。
まずはこの状態のファイルを保存して更新して確認してみましょう。
このようになりました。
これを下にスクロールして行くと
だいぶ下の方までスクロールした場所にやっとpタグの中に記入した内容
ここはindexというidがついた場所です
が表示されました。
このように ここはindexというidがついた場所です がMy Linkと表示したのと同じ画面には表示されないようにファイルを作成しています。
それでは、このpタグの中でidにindexと名前を付けてあげましょう。
<p id="index">ここはindexというidがついた場所です</p>
と書きます。
こうして<p>タグとid属性によってindexというID名が付けることが出来ました。
次に、アンカータグ<a>のhrefの後ろに#index（ハッシュインデックス）と書きましょう。
このように、indexの先頭に#をつけることで「index」というIDのついた箇所を指定することができます。
次のように書いてみてください。
<a href="#index">My Link</a>
実際のファイルにはこのように書きました。
このファイルを保存して更新します。
まずこのように表示されました。
次にこのブラウザの画面のMy Linkをクリックすると……
このようにスクロールしなくても ここはindexというidがついた場所です に飛ぶことが出来ました。
このようにid属性を使って同じページの中でもこのようにしてリンクを飛ばすという機能がありますので是非覚えておきましょう！
まとめ 双極くんの感想
わたくし双極くんは今回の学習を通して
- アンカータグのhref属性によって別の場所のリンクへ飛ばせること
- アンカータグのid属性で同じページの中の指定した所に飛ばせること
- href、id属性どちらも<a href＝" ">を使うということ
を学んだな、という感想です。
Web上で文書や画像を表示させるだけでなく、ハイパーリンクによって様々な情報をつなぎ合わせる機能を持つ点がHTMLの大きな特徴です。
次から次へと移動しながら得たい情報を自由に得られるハイパーリンク機能により、インターネットはまたたく間に世界中に広がっていったようです。
アンカー<a>タグは世界中の情報をハイパーリンクでつなぎあわせる重要なタグなんですね。
学び
世界には多くの種類の言葉がありますが、意味のないものはありません。
聖書 コリント一14:10
*1:ここから（＜）、ここまで(/＞）がこういう内容（要素）
*2:スタイルシートとは、文書データの見栄えに関する情報のみを記録・定義したデータやファイルなどのこと。スタイルシートの入れ替えや編集により、文書自体の内容はそのままに見栄えだけを変更することができる。一般的にはCSS（Cascading Style Sheets）と呼ばれる専用の言語によりスタイルシートを記述する。
*3:セレクタとはCSSによるデザイン指定をどこの部分に対して適用するか、を決めるもの
*4:スクリプトとは、台本、脚本、原稿、手書き、筆記体などの意味を持つ英単語。ITの分野では簡易なコンピュータプログラムをスクリプトと呼ぶことが多い。
*5:ブラウザでは青色下線で表示される文字
