【HTML】初心者向け<aタグ>の使い方|HTML&CSS入門講座(11)

HTML&CSS
この記事は約9分で読めます。

はじめに

 HTML&CSS入門講座の第十一弾として、【HTML】初心者向け<aタグ>の使い方ついて紹介します。

 この記事を読むと次の疑問について知ることができます。

●基本のリンクの書き方はどうするの?
・<a>タグの基本中の基本
・別タブで開く、画像のリンクボタン
●リンクのデザインの変更にはどうするの?
・リンクの下線を消す、リンク文字の色を変更する
・カーソルをのせたときのデザインや訪問済みのリンクのデザインを変更する
●ボタン作成例
●ページ内の特定(途中)部分へジャンプする方法
 HTML&CSS入門講座(10)では、色々な文字修飾の仕方?について解説してきました。
 
 HTMLの中の<aタグ>の使い方について深堀していきます。

基本のリンクの書き方

 Web文書でのハイパーリンクには、<a>タグを使います。

<a>タグの基本中の基本

リンクの書き方 : <a href="リンク先のURL">リンクする文字</a>
 簡単な例を上げましょう。
 
<h1>基本のリンクの書き方</h1>
<a href="https://yanai-ke.com/htmlcss10/">【CSS】色々な文字修飾の仕方|HTML&CSS入門講座(10)</a>
<p>
この記事には、<a href="https://yanai-ke.com/htmlcss10/">色々な文字修飾の仕方</a>などについて書いてあります。
</p>
 
 上述の例は、リンク先が「https://yanai-ke.com/htmlcss10/」で、リンク文字が「【CSS】色々な文字修飾の仕方|HTML&CSS入門講座(10)」とした場合と、段落内にリンクをを貼り、リンク先のURLが「https://yanai-ke.com/htmlcss10/」で、リンク文字を「色々な文字修飾の仕方」とした場合です。
 
 実際にどのようにブラウザー上では表示されるか見てみましょう。
 
 
 上述の画像は、ブラウザー上でキャプチャーしたものですので、青文字のアンダーラインの部分をクリックしても記事には飛びませんが、実際に上述のように書いた記事であれば、青文字のアンダーラインの部分をクリックすれれば、その記事に飛んでリンクされていることが分かるはずです。

別タブで開く、画像のリンクボタン

 「<a>タグの基本中の基本」で書いたリンクでは、例えば、あなたが読んでいるブラウザーのタブの部分にリンク先の内容が表示されてしまい、元の記事に戻るには、再度、元の記事を表示させなければなりません。

 リンク文字をクリックしたらブラウザーの別タブで表示させる方法とリンク文字の代りに「画像」を指定して、リンクボタンのようにする方法について紹介します。

別タブで開くリンクを作る方法
<a href="リンク先のURL" target=" blank">リンクする文字</a>

画像をリンクボタンのようにする方法
<a href="リンク先のURL" target=" blank"><img>タグ</a>
 それでは実際に、実例を書いてみましょう。
 
<h1>別タブで開く、画像のリンクボタン</h1>
<a href="https://yanai-ke.com/htmlcss10/" target=" blank">【CSS】色々な文字修飾の仕方|HTML&CSS入門講座(10)</a>
<p>
下のアイコンをクリックしてね!<br>
    ↓ ↓ ↓ <br>
<a href="https://yanai-ke.com/htmlcss10/" target=" blank"><img src="siteaicon.png" width=200 height=200></a>
</p>
 上述のアイコンの画像は、HTMLのファイルと同じファオルダーに入れて下さいね。
 
 そうでない場合は、画像のURLを入れる必要があります。
 
 結果は次の通り。
 

 

 上述の画像は、ブラウザー上でキャプチャーしたものですので、青文字のアンダーラインの部分や画像をクリックしても記事には飛びませんが、実際に上述のようにhtmlで書いた記事であれば、青文字のアンダーラインや画像の部分をクリックすれれば、リンク先に飛んでリンクされていることが分かるはずです。

リンクのデザインの変更

 リンクのデザインを変更するには、CSSを利用します。

リンクの下線を消す、リンク文字の色を変更する

【リンクの下線を消す方法】
リンクの部分に「a {text-decoration: none}」をCSで設定する。

【リンク文字の色を変更】
リンクの部分に「a {color: 色コード or 色名}」をCSSで設定する。
 それでは実際に、実例を書いてみましょう。
 
<h1>リンクの下線を消す、リンク文字の色を変更する</h1>
<p class="ulkesu">
  <a href="https://yanai-ke.com/htmlcss10/" target=" blank">【CSS】色々な文字修飾の仕方|HTML&CSS入門講座(10)</a>
</p>
<p class="linkmojihenkou">
  <a href="https://yanai-ke.com/htmlcss10/" target=" blank">【CSS】色々な文字修飾の仕方|HTML&CSS入門講座(10)</a>
</p>
.ulkesu a {
text-decoration: none;
}
.linkmojihenkou a {
color: red;
}
 結果は次の通り。
 
 
 上述の画像は、ブラウザー上でキャプチャーしたものですので、青文字や赤文字のアンダーラインの部分をクリックしてもリンク先の記事には飛びませんが、実際に上述のようにhtmlで書いた記事であれば、青文字や赤文字のアンダーラインの部分をクリックすれれば、リンク先に飛んでリンクされていることが分かるはずです。

カーソルをのせたときのデザインや訪問済みのリンクのデザインを変更する

 リンクの文字や画像にカーソルを持って行った際に、リンク文字や画像のデザインが変わるとクリックしたくなります。

a: hover {リンク文字や画像に対する変更後のデザインの指定}

a: visited {リンク文字や画像に対する訪問後のデザインの指定}
  それでは実際に、実例を書いてみましょう。
 
<h1>カーソルをのせたときのデザインを変更</h1>
<p id="mojidezainhenkou">
<a href="https://yanai-ke.com/htmlcss10/" target=" blank">【CSS】色々な文字修飾の仕方|HTML&CSS入門講座(10)</a>
</p>
<p class="gazouwaku">
<a href="https://yanai-ke.com/htmlcss10/" target=" blank"><img src="siteaicon.png" width=200 height=200></a>
</p>
<p id="gazouwaku">
<a href="https://yanai-ke.com/htmlcss10/" target=" blank"><img src="siteaicon.png" width=200 height=200></a>
</p>
#mojidezainhenkou:hover {
font-size: 2em;
font-weight: bolder;
}
.gazouwaku:hover img {
border: 3px double blue
}
#gazouwaku:hover img {
filter: opacity(50);
-moz-opacity: 0.5;
opacity: 0.5;
}
 
 結果は次の通り。(訪問済みの方は省略)
 
 
 上述の画像は、ブラウザー上でキャプチャーしたものですので、青文字のアンダーラインや画像の部分をクリックしてもリンク先の記事には飛びませんが、実際に上述のようにhtmlで書いた記事であれば、青文字アンダーラインや画像の部分をクリックすれれば、リンク先に飛んでリンクされていることが分かるはずです。

ボタンの作成

 文書中にボタンがあると、クリックしたくなりますすよね。

 ボタンを作成してみましょう。

See the Pen a-tag01 by Eyanai (@yeiji72) on CodePen.

 
 上述の画像は、ブラウザー上でキャプチャーしたものですので、ボタンの部分をクリックしてもリンク先の記事には飛びませんが、実際に上述のようにhtmlで書いた記事であれば、ボタンの部分をクリックすれれば、リンク先に飛んでリンクされていることが分かるはずです。

ページ内の特定(途中)部分へジャンプする方法

 普通は、ジャンプすると記事のトップにジャンプします。

 これを、記事の途中にある見出しの所にジャンプしたい時などに利用します。

<a href="#飛びたい所のid名">ここをクリック!</a>
htmlのセレクタ#id名 : 記事の途中の飛びたい見出しにid名を付ける。
 それでは実際に、実例を書いてみましょう。
 
<h1>ページの途中へジャンプ</h1>
<h3>このページの見出し「基本のリンクの書き方」にid名="jump1"を付けます。</h3>
<a href="#jump1" target=" blank"> ここをクリックすると「基本のリンクの書き方」に飛びます。</a>
<h3>HTML&CSS入門講座(10)の「文字に影を付ける」の見出しにid名="jump2"を付けます。</h3>
<a href=https://yanai-ke.com/htmlcss10#jump2 target=" blank">ここをクリックするとHTML&CSS入門講座(10)の「文字に影を付ける」に飛びます。</a>
 最初の例は、同じページの見出し「基本のリンクの書き方」へジャンプするhtml文です。
 二番目の例は、HTML&CSS入門講座(10)の見出し「文字に影を付ける」へジャンプするhtml文です。

おわりに

 如何だったでしょうか?

 基本のリンクの書き方はどうするの?、<a>タグの基本中の基本、別タブで開く、画像のリンクボタン、リンクのデザインの変更にはどうするの?、リンクの下線を消す、リンク文字の色を変更する、カーソルをのせたときのデザインや訪問済みのリンクのデザインを変更する、ボタン作成例、ページ内の特定(途中)部分へジャンプする方法などについて解説してきました。

 この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。

コメント

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