[HTML]簡単!HTMLでアンカータグを使う方法
HTMLでサイトを作成するときに、一番使うことになるのが
アンカータグです。
サイトなどで、クリックすると他のページにリンクするというものです。
主な使い道としては、紹介のためのリンクがほとんどですが、
自分の作成したコンテンツへのリンクをつくるなど、
使用用途は様々なものがあります。
基本的なアンカータグの構文は
1 |
<a href=リンク先のURL”>任意のコメント</a> |
というようになります。
href=”” のところにはURLになります
例えば、Amazon の場合だと http://www.amazon.co.jp/となりますので
href=”http://www.amazon.co.jp/”
となります
なお、任意のコメントにはリンクするときのコメントになります。
これはAmazon ではなく、商品はこちらから
というリンクをつくることもできます。
実際にコードを書いたほうが理解しやすいので、Atom エディタで実践してみましょう。
なお、Emmet パッケージをいれれば簡略記法が使えるようになり、
Preview HTML パッケージをいれることで、エディタからサイトをみることができるようになります。
Emmet の記法については
Emmet チートシートで検索するとでてくるので、
調べてみると良いでしょう。
PreviewHTML は、ショートカットーで
ctrl + shit + h でエディタ右側にプレビューの表示ができます。
Atom パッケージ追加と検索することで、パッケージ追加方法はみつかりますので、
興味があれば試してみると面白いでしょう。
今回は、これらのパッケージをいれてあることを前提としてコードを書いていきます。
ゼロから作成する場合
1 |
html:5 |
として展開すると
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> |
というようにベースのコードが作成されます。
ubuntu の場合、tab キーで展開します。
今回は、Amazon へのリンクを作成します。
1 |
a[href=http://www.amazon.co.jp/]{Amazonヘ Go} |
Emmet 記法の場合、href=”” などのパラメータに関しては [] の中に書きます。
そしてタグの中のテキストについては{} の中に書きます。
これを展開すると
1 |
<a href="http://www.amazon.co.jp/">Amazonヘ Go</a> |
となり、Amazon へ Go というリンクが作成されます。