
aタグとは
aタグとは、テキストや画像などにハイパーリンクを設定することのできるHTMLのタグです。ハイパーリンクという言葉は、一度は聞いたことがあるのではないかと思いますが、マウスを載せるとポインターが変わってクリックすると違うページに切り替わるリンクのことを言います。
aタグを囲った部分をリンクとして扱うことができるため、複数の要素をまとめてリンクにしたり、画像自体をリンクに設定することができます。
文字色の指定方法
文字色の指定方法は、要素の枠線色や背景色などでも同じ形式で指定します。
CSSで色を指定する方法は4種類用意されています。
・キーワード:「black」「blue」などのキーワード名で指定
・16進数カラーコード:「#ffcc00」などの16進数カラーコードで指定
・RGB:「rgb( 255, 40, 50);」のように指定、rgbはレッド・グリーン・ブルーの頭文字
・HSL:「hsl(50deg 100% 50%);」のように指定、H(色相)S(彩度)L(輝度)
RGBとHSLで指定する場合は透過度も指定することができます。
text-decorationは与える値によって下線以外にテキスト上に線を引いたり、テキストの中央に線を引くこともできます。
このように各プロパティには様々な値が用意されています。
HTML_CSSの問題に挑戦しよう!
以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTML_CSSマスターへの第一歩となるでしょう。
問題1:aタグの文字色を変えよう
HTMLコードを記述し「リンク先に飛ばすよ」の文字列をCSSで黒色(#000)に変更してください。
また、文字列の下にボーダーが付いているのでそれもCSSで削除してみましょう!
あらかじめエディタに書くコード
<a href="#">リンク先に飛ばすよ</a>
¥HTML¥
期待する画面

解答ソースコード
<a href="#">リンク先に飛ばすよ</a>
¥HTML¥
a {
color: #000;
text-decoration: none;
}
¥CSS¥
補足
どのようなデフォルト値が設定されているのか気になった際には
「CSSリファレンス」と検索して確認してみよう!
今回であればaを指定して、colorプロパティを付与することで色の変更ができます。
また、aタグをHTML内に記述するとデフォルトで下線が付いてしまいますので、不要であれば text-decoration: none; で削除してあげましょう。