こんにちは、かつコーチです。
僕は現在、プログラミングを学習していて、その学習の中で理解したことを、
毎回テーマを絞ってリアルタイムで発信しています。
今回で10回目ですが、HTMLだけで10回とはめちゃくちゃ勉強になります。
プログラミングとブログ最強！
まだまだアウトプットしたいことが山盛りなので、自身の勉強にもなるので、
今後も続けていこうと思います。
今回は、aタグを使ってリンクを貼る方法をご紹介します。
aタグとは？
「a」タグの「a」は「anchor」（アンカー）の略です。
href属性を指定して、別のWebページやファイル、メールアドレス先などへのハイパーリンクを作成できます。
まさにHTMLの本領が発揮するところだと言えます。
使用するタグと属性一覧
| 要素 | タグ | 概要 |
| a | <a></a> | リンクを作成できる |
属性は、たくさんあるのですが、よく使うものをまとめました。
| 属性 | 概要 |
| href | リンク先を指定するための属性 |
| name | リンクの到達点にするための名前を指定します。 |
| rel | この文書から見たリンク先文書との関係を記述します。 |
| target | リンク先の文書を表示させる方法を指定します。 |
aタグは、href属性を指定して、開始タグと終了タグを使って以下のように書きます。aタグの使い方
<a href="https//google.co.jp">Googleへ</a>
<br>
<a href="https//yahoo.co.jp">Yahooへ</a>このようにすると、「a」タグの中身がブラウザ上に表示されます。
リンクの部分は色が変わっていて、下線がつきます。
デザイン的にはCSSで調整します。
最近のサイトでは下線を見せないようにしているものが多いですが、
使う側からしたら、どこがリンクか分からなくなりそうなので、注意が必要です。
このリンクををクリックすると、外部のサイトへ行きます。
また、imgタグを囲ってあげると、画像の中にリンクを配置することもできます。
<a href="https//google.co.jp"><img src="img/img1.jpg" alt="与論島の百合ヶ浜">
Googleへ
</a>その他にもhref属性にメールアドレスを指定することで、クリックすると、
使用しているメールのフォームを表示することもできます。
「a」タグは、HTMLの凄さがわかるものだと言えます。
aタグの注意点
ただ、2点「a」タグを使う際に注意しなければいけないことがあります。
「a」タグの中に「a」タグを入れてはいけない
1つ目は、 「a」タグの中に「a」タグを入れてはいけない！ことです。
これをしてしまうと、どこがリンクなのかHTMLが判断できず、表示も崩れます。
僕も知らなくて、結構ハマったので、どこかおかしいのかなって思ったら、
これを疑ってみることをおすすめします。
よくナビゲーションの中で「a」タグの中に、さらにリストを書いちゃったりしますね。
アクションを起こすのに使ってはいけない
2つ目は、何かアクションを起こすのに使ってはいけないことです。
具体的にどういうことかというと、あくまでリンクなので、
ボタンをクリックしたら、メールが送信されるとか、データを送るとか、
そういう何かリンク以外でアクションを起こすのに使用してはいけないということです。
「a」タグを使う際には、この2点には注意したいですね。
まとめ
以上、今回はaタグを使ってリンクを貼る方法をご紹介しました。
aタグって簡単だけど、HTMLの凄さがわかるので、初めて作成したときは感動ものです。
たったこれだけで、クリックすると他のページへいっちゃうなんてすごいと思いませんか(笑)？
普段何気なく使ってますが、こうして学習すれば、「なるほど！」って思っちゃいますよね。
プログラミング学習において参考になれば幸いです。
学習の参考になるサイト
今やプログラミングの学習はネットで学ぶことができます。
僕もここから始めています。
ネット上にはたくさんの学習サイトがありますが、おすすめとしては、
この2つが圧倒的にわかりやすく、どちらも無料で学べるので、超便利です！
無料範囲から始めて、もっと気になったり、もっと勉強したいと思ったら、
有料プランへ変更すれば良いと思います。
有料プランはどちらも月額980円（税込）です。
まだ、プログラミングをやったことがない人も、いきなり書籍から入って失敗するよりは、
こちらからやってみることをおすすめします。
初心者へおすすめの入門書籍（※2020年5月13日追記）
ある程度、動画で学んだら、もっとしっかり学びたくなるもの。
そう思ったら、書籍を利用してもっと理解を深めるのも良いでしょう。
僕のおすすめの書籍は、以下の2冊めちゃくちゃわかりやすいです。
それぞれご紹介します。
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
まずは、今や鉄板のプログラミングの1冊目の本です。
知識ゼロから体系的に学べる本で、最近のWebサイトの作り方も学べて、
最後には1つのサイトを構築するまで網羅しています。
僕は後になって購入しました。
学習していて迷っている時、書籍でも勉強してみるかと思い手に取ると、
「もっと早く手にしておけば良かった。」そう思わせてくれた本です。
難しい内容がなく、3日くらいで一気に読んでしまいました。
勿論、コードを打ちながらですが、楽しくてすぐに終わりました（笑）。
その後も3周くらいして、一通り基礎を学べた本です。
プログラミング学習者で初心者の方には絶対におすすめします！
世界一わかりやすいHTML5&CSS3コーディングとサイト制作の教科書
2冊目のこちらは、もう少し詳細まで書かれてあり、ステップアップされたい方に向いています。
とは言っても、初心者向けですので、無理なく読めます。
知識なくとも十分に学べますが、やはり楽しいという感覚が大切だと思うので、
動画などで勉強した後に、もっと詳しく勉強する際には、この本がおすすめです。
こちらも最後には1つのサイトを作成するまでを学べます。
