ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

HTMLのアンカータグ(aタグ)の使い方を初心者向けに解説

HTML
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
プログラミング学習者にお得なブラックフライデー特集!!

Udemyで1万円以上のプログラミング学習教材が全て1200円の大セール!!

他にもデザイン、機械学習、WordPress、スマホアプリなど、プログラミングに関する教材がお得に購入できるので、めったにないこの機会にぜひチェック!!

セールの詳細はこちら!

AmazonでAdobe製品がセール中!

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

→ セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

今回はWebサイトやWebサービスを作る上で欠かせない<a>タグ(アンカータグ)の使い方やできる事、簡単なカスタマイズまで初心者でも分かり易ように詳しく解説します!

スポンサーリンク

アンカータグ(aタグ)でできる事

ネコ君
ネコ君

アンカー(anchor=いかり⚓️)だから何かを結びつけるのかな?

Hiko
Hiko

その通り!アンカータグはページとページを結びつける役割があります!

アンカータグを使うと「ファインダー越しに世界を散歩」 ←このようにWebサイトでよく見るリンクを作る事ができて、クリックするとそのURLのページに移動する事ができます!

aタグでできる事
  • 文字をリンクに変える事ができる
  • 画像にリンクを割当てることも可能
  • CSS+aタグでボタンの作成が可能
  • 別タブでページを開く事ができる

主にこの4つがありますが、よく使うのは文字をリンクに変えたり、ボタンを作ったりする事でしょう!

HOME

aタグとCSSを上手く使えばこんなボタンも作れてしまいます!

Hiko
Hiko

今回の記事ではこんなかっこいいボタンや、先ほど説明した4ができるように解説しますね!

アンカータグ(aタグ)の基本的な書き方

例えば、

HikoPro Blog TOPページへ

↑このようなリンクを作りたいとします。

<a href="https://hikopro.com">Hiko Pro Blog TOP ページへ</a>

このようにHTMLを書いてあげれば簡単に実装できます。

覚えておくべき事はリンクを付けたい文字を<a>で挟み、hrefを書く事です!

次に、

詳細はこちらをクリック

このような文中にリンクがある場合を解説します。

詳細は<a href="https://hikopro.com">こちら</a>をクリック

”こちら”の部分だけを<a>タグで囲めばいいですね!

別タブでページを表示させる場合

先ほど解説したリンクをクリックすると同じウィンドウタブでリンク先のページが開いたかと思います。

別タブで開く

↑こちらをクリックしてみてください!別タブでページが開いたかと思います。

<a href="https://hikopro.com" target="_blank">別タブで開く</a>

このように aタグの中に target=”_blank” と書くだけで簡単に実装できます!

ネコ君
ネコ君

リンクを付けたい文字を<a>で囲むだけなんだね!とっても簡単!

スポンサーリンク

アンカータグ(aタグ)を使ってボタンを作る

ボタンをクリックすると別のページに飛ばす方法は2つあり、

  • 画像にアンカータグを適用する
  • aタグにCSSを適用する

この2つがあります!

画像にアンカータグを付けてボタンを作る

←この画像をクリックしてみて下さい!

この赤のボタンは画像なのですが、アンカータグを適用させることによってボタンのようになります。

<a href="https://hikopro.com"><img src="https://hikopro.com/wp-content/uploads/2019/06/42f91f8968837b6e9a402aa81c0c8be8.png"  class="wp-image-389"/></a>

HTMLコードはこのようにimgタグを<a>タグで囲むだけです!

画像素材さえあれば簡単にボタンが作れてしまいます!

aタグにCSSを適用しボタンを作る

HOME

次に↑このボタンは画像ではなく<a>タグにCSSを適用させて作成しています。

<a href="https://hikopro.com" class="button">HOME</a>

先ほど解説したようにHTMLを書き、classを付けて

.button{
border-radius:7px;
background:#3490dc;
padding:10px 16px;
color:white;
text-decoration:none;
font-size:15px;
}
.button:hover{
color:white;
background:#227dc7;

CSSでこのようにコーディングすると作れてしまいます。

「CSSボタン カスタマイズ」のようにググれば沢山のテンプレートコードが出てくるので、そのままコピペすれば簡単におしゃれなボタンが作れます!

リンクがホバー(hover)した時の装飾

僕のブログではリンクにカーソルが乗った時(ホバーした時)に文字の色が青→赤に変わるようにCSSを当てています。

リンク

このようにリンクにカーソルが乗った時に色が変わったり、アンダーラインが消えたりするにはCSSでhoverと言うものを使います!

<a href="httpp://google.com">リンク</a>
a{
 color:blue;
}
a:hover{
color:red;
}

このようにa:hoverと書けばリンクにカーソルが乗った時のスタイルを適用する事ができます!

文字を大きくしたり、色を変えたり、様々なカスタマイズができるのでぜひ試してみて下さい!

リンクのアンダーラインをカスタマイズする

お使いのエディタで<a>タグを使ってリンクを作ると、デフォルトでアンダーラインが引かれるようになります。

今回は、アンダーラインを決してカーソルが乗った時にアンダーラインが出現するカスタマイズをご紹介します。

例: hoverするとアンダーラインが出現

a{
text-decoration:none;
{
a:hover{
text-decoration:underline;
}

このようにtext-decorationをCSSに書いてあげるとできます。

ネコ君
ネコ君

aタグの装飾はhoverを使えばいいんだね!

HTML アンカータグ(aタグ)まとめ

Hiko
Hiko

<a>タグとhoverこの2つは必ず押さえておきましょう!

初心者向けにHTMLのaタグの使い方と簡単なカスタマイズをご紹介しました!

Webサイトを作る上では必ず必要な技術なので、何度も自分のエディタで練習しましょう!

最後までご覧いただきありがとうございました!

HikoPro
HikoPro

最後までご覧いただきありがとうございました!

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
HTML
HikoPro Blog

コメント

タイトルとURLをコピーしました