HikoPro Blog

IT・テクノロジーで生活と仕事をもっと豊かに

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

約6分
About|HikoPro

About|HikoPro

1998年生まれ|ITライフクリエイター
Webクリエイター|YouTuber|Blogger

学生時代は、タイピングのテストでクラス最下位レベルのパソコン音痴。
もっと自分の市場価値を高めたいと思い、、、
▷バンコク不動産▷インドIT留学▷ベトナムIT企業エンジニアを経て
Web系のフリーランスとして独立。

その後もっと大きい市場でインパクトのあることをしたいと思い、
ITメガベンチャーに就職。

#GoProAwards受賞 #14ヵ国渡航 #Z大学創業者 #ネコ好き

YouTube

I make videos of computer hack information and useful applications that
enrich people's work and life.


PC Hack

Web Create

Life Style

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

こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していますHikoProです! 最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています!

今回は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

Leave A Reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)