はじめに
HTML&CSS入門講座の第十一弾として、【HTML】初心者向け<aタグ>の使い方ついて紹介します。
この記事を読むと次の疑問について知ることができます。
・<a>タグの基本中の基本
・別タブで開く、画像のリンクボタン
●リンクのデザインの変更にはどうするの?
・リンクの下線を消す、リンク文字の色を変更する
・カーソルをのせたときのデザインや訪問済みのリンクのデザインを変更する
●ボタン作成例
●ページ内の特定(途中)部分へジャンプする方法
基本のリンクの書き方
Web文書でのハイパーリンクには、<a>タグを使います。
<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>
別タブで開く、画像のリンクボタン
「<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で書いた記事であれば、青文字のアンダーラインや画像の部分をクリックすれれば、リンク先に飛んでリンクされていることが分かるはずです。
リンクのデザインの変更
リンクのデザインを変更するには、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;
}
カーソルをのせたときのデザインや訪問済みのリンクのデザインを変更する
リンクの文字や画像にカーソルを持って行った際に、リンク文字や画像のデザインが変わるとクリックしたくなります。
<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;
}
ボタンの作成
文書中にボタンがあると、クリックしたくなりますすよね。
ボタンを作成してみましょう。
See the Pen a-tag01 by Eyanai (@yeiji72) on CodePen.
ページ内の特定(途中)部分へジャンプする方法
普通は、ジャンプすると記事のトップにジャンプします。
これを、記事の途中にある見出しの所にジャンプしたい時などに利用します。
<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文です。
おわりに
如何だったでしょうか?
基本のリンクの書き方はどうするの?、<a>タグの基本中の基本、別タブで開く、画像のリンクボタン、リンクのデザインの変更にはどうするの?、リンクの下線を消す、リンク文字の色を変更する、カーソルをのせたときのデザインや訪問済みのリンクのデザインを変更する、ボタン作成例、ページ内の特定(途中)部分へジャンプする方法などについて解説してきました。
この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。
以上です。
コメント