HTML・CSS

「aタグ(アンカータグ)」についてカンタン解説【応用あり】

こんにちは、Autumn(オータム)です。
今回は、HTML超初心者向けに「aタグ(アンカータグ)」の解説をしていきます。
基本的な使い方から、実践的な部分まで解説していきますので一緒に勉強していきましょう!

aタグ(アンカータグ)の基本

「aタグ(アンカータグ)」は、ホームページ内の別ページや外部サイトのページに飛べるようリンクを貼ることができるタグです。

また、基本的に使う属性はこの2種類なので合わせて覚えておきましょう。

・href:移動したいページのURLを入力する
・target:移動先のページをどのように表示するか

実例を見てみます。


このように上のpタグと違い、デフォルトで下線が入り青い色になっており、クリックするとリンク先に飛べるようになります。

aタグのアンダーラインを消す

実際のWEB制作の現場では、aタグの下線はデザインの邪魔になるので先に消しておくことが多いです。
その場合はCSSで下記のように記述すると消すことができます。

タブ別表示にしたいときは「target=”_blank”」

ホームページによっては外部のサイトをリンク先として指定することも少なくありません。そんな時今のページとは別タブで見たい!と思うシーンがありますよね。
その時はaタグに「target」属性を指定してあげます。


パッと見は変化はありませんが、この状態でクリックすると、


このように、新しいタブで表示されました(今回リンク先が指定されてないので同じページが別タブに表示されてます)。

電話をかけることもできます

スマホで番号をタップすればすぐに電話をかけれるようにしたい!という時はhref属性に「tel: 電話番号」を記述すればOKです。
仮に「123-4567-890」という電話番号だとすると、コードはこうなります。

今回はパソコン上でクリックしたので、skypeなどの電話ツールにつながりました。
ホームページ制作をしているとお問い合わせ先として電話番号を記載することが少なくありませんので、覚えておいて損はないです!

応用編:ボタンを作ってみよう

最後に応用編としてボタンを作成してみます。ただのリンクよりボタンの方がユーザーも押しやすくなりますし、デザインとしてもよく出てくるので合わせて覚えておきましょう!

では、先ほどの電話番号のaタグをボタンにカスタマイズしていきます。
ソースコードはこちら。

aタグはインライン要素ですので、そのままでは幅・高さ・余白を指定することはできません。なのでインラインブロック要素に変換してあげます。

この辺りの話は別の記事で解説しているので、よかったら覗いてみてください。
【HTML・CSS勉強】ブロック要素とインライン要素の違いまとめ

まとめ

最後に今回のポイントをおさらいします。

– href属性でリンク先のURLを添付したり、電話をかけれるようにできる
– target=”_blank”で違うタブに表示することも可能
– インラインブロック要素に変換してボタンも作成できる

aタグ(アンカータグ)はWEB制作で必ず使うタグですので、今回の内容はバッチリマスターしておきましょう!

今回も読んでいただきありがとうございました!

ABOUT ME
Autumn
元は文系卒・知識ゼロの住宅営業マン。半年のプログラミング完全独学でフロントエンドエンジニアに転職。現在はWEB制作・WEBマーケティングを社内で担当。田舎で自然と共に暮らしてます。