【HTML CSS 独学3】 基礎を固めて高く積み上げ！　「aタグ編 」　投資家のFIREへの旅路 第222回

HTML CSS独学シリーズ第3弾です！

HTMLのタグについて、2回にわたり解説しましたが、
今回も、タグです。

WEBサイトを構成するパーツを作るのに、必要なタグです。
絶対に使うことになるタグなので、知っておきましょう！

つまり、覚えてはいけないよ！

【aタグ】

リンクを作るためのタグです。
「a」は「Anchor」の頭文字です。

VScodeでは、"a"と入力すれば、ズバっと以下の内容が出てきます。

<a href=" "> </a>

「　"   " 　」の間にリンク先のURL を書きます。

<a href="http://sample.html"> </a>

「　<a ...." ">      </a>　」の間に、リンクにする文字を書きます。

<a href="http://sample.html"> こちらをクリック！　</a>こ

この場合、「こちらをクリック！」という文字が、クリックできるようんなり、クリックすると、http://sample.htmlのページに飛びます。

【aタグのCSS】

上記のコードをブラウザで見ると、このように表示されます。

文字が、紫色になります。
また、文字の下にアンダーラインが入るのがデフォルトです。

WEBサイトのデザイン的にも、リンクを貼った文字が全てこの色になるのは、よろしくないので、この辺りをCSSで整えます。

  a{
   text-decoration: none;
   color: black;
 }

text-decorationをnoneにして、アンダーラインを消します。
colorで文字の色を指定します。

【リンク文字をマウスオーバーで変更】

リンク文字にマウスを置くと、文字の色が変わるエフェクトはよくありますね。

これは、hoverというタグを使って、簡単に実装できます。
SCSSでの書き方はこのようになります。

SCSS 

  a{
   text-decoration: none;
   color: black;
   
   &:hover{
     color: red;
   }
 }

文字の上にマウスを置くと、このように色が変わります。

↓↓↓↓

さらに、少しオシャレにするために、
フワーっと色が変わるようにするエフェクトを追加するとい感じです。

 a{
   text-decoration: none;
   color: black;
   transition: .5s;
   
   &:hover{
     color: red;
     transition: .5s;
   }
 }

transition: .5s　は、変化の速度を指定するCSSです。

ポイントは、a{　}の中と、&:hover{　}の中の両方に指定する方が良いです。

hoverした時に、0.5秒かけて色が変わる
hoverを外した時に、0.5秒かけて色が戻る

という、エフェクトになります。

この時間を長くしすぎると、あまりよろしくないので、
1秒までが適切と思います。

【同ページ内のリンク】

aタグは、別ページへのリンクだけでなく、同ページ内で、指定の箇所まで移動するようなこともできます。

 HTML　リンク　aタグ

<a href="#news"> NEWS </a>

HTML

<article class="news" id="news">
    ・
    ・
    ・

</article>

aタグで、href="#news"　と書きます。

そうすると、id="news"　と書いている箇所に移動させることができます。

スルスル〜っと移動させたい場合は、
CSSでこのように書きます。

SCSS


html {
   scroll-behavior: smooth;
 }

html自体にスタイルを指定します。

これを書いておくだけで、ページ内リンクのスクロールがスルスルーっと動きます。

【まとめ】

aタグについて書きました。

aタグを使えば簡単にリンクを作ることがでます。

しかし、それだけでは、見た目的に楽しくないので、CSSでしっかり整えていきましょう！

aタグに対するCSSは、毎回同じようなものになってくると思いますから、SCSSのmixinを使い処理をまとめておいても良いですね！