[HTML]簡単！HTMLでアンカータグを使う方法　

• 更新：2017/12/05
• ライター：IBC

Tweet

HTMLでサイトを作成するときに、一番使うことになるのが
アンカータグです。

サイトなどで、クリックすると他のページにリンクするというものです。
主な使い道としては、紹介のためのリンクがほとんどですが、
自分の作成したコンテンツへのリンクをつくるなど、
使用用途は様々なものがあります。

基本的なアンカータグの構文は

というようになります。

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 パッケージ追加と検索することで、パッケージ追加方法はみつかりますので、
興味があれば試してみると面白いでしょう。

今回は、これらのパッケージをいれてあることを前提としてコードを書いていきます。

ゼロから作成する場合

として展開すると

というようにベースのコードが作成されます。

ubuntu の場合、tab キーで展開します。

今回は、Amazon へのリンクを作成します。

Emmet 記法の場合、href=”” などのパラメータに関しては [] の中に書きます。
そしてタグの中のテキストについては{} の中に書きます。

これを展開すると

となり、Amazon へ Go というリンクが作成されます。

この記事を書いた人：IBC

IBC

ITブートキャンプ運営事務局です。 随時ブログを更新していきます。