【HTML】初心者向け＜aタグ＞の使い方｜HTML＆CSS入門講座（11）

　HTML＆CSS入門講座（10）では、色々な文字修飾の仕方？について解説してきました。

 

　HTMLの中の<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）」とした場合と、段落内にリンクをを貼り、リンク先のＵＲＬが「https://yanai-ke.com/htmlcss10/」で、リンク文字を「色々な文字修飾の仕方」とした場合です。

 

　実際にどのようにブラウザー上では表示されるか見てみましょう。

 

 

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

　それでは実際に、実例を書いてみましょう。

 

<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を入れる必要があります。

 

　結果は次の通り。

 

　それでは実際に、実例を書いてみましょう。

 

<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で書いた記事であれば、青文字や赤文字のアンダーラインの部分をクリックすれれば、リンク先に飛んでリンクされていることが分かるはずです。

 　それでは実際に、実例を書いてみましょう。

 

<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で書いた記事であれば、青文字アンダーラインや画像の部分をクリックすれれば、リンク先に飛んでリンクされていることが分かるはずです。

 

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

　それでは実際に、実例を書いてみましょう。

 

<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文です。