HTML_CSS
Googleでログイン
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タグの文字色を変えよう
タイトル通り、aタグの文字色を変えてみよう!
HTMLコードを記述し「リンク先に飛ばすよ」の文字列をCSSで黒色(#000)に変更してください。
また、文字列の下にボーダーが付いているのでそれもCSSで削除してみましょう!
HTMLコードを記述し「リンク先に飛ばすよ」の文字列をCSSで黒色(#000)に変更してください。
また、文字列の下にボーダーが付いているのでそれもCSSで削除してみましょう!
あらかじめエディタに書くコード
<a href="#">リンク先に飛ばすよ</a>
¥HTML¥
期待する画面
解答ソースコード
<a href="#">リンク先に飛ばすよ</a>
¥HTML¥
a {
color: #000;
text-decoration: none;
}
¥CSS¥
補足
CSSのプロパティにはどれもデフォルトの値が設定されています。
どのようなデフォルト値が設定されているのか気になった際には
「CSSリファレンス」と検索して確認してみよう！
どのようなデフォルト値が設定されているのか気になった際には
「CSSリファレンス」と検索して確認してみよう！
#忍者CODE無料問題集で活動を記録しよう
完了にする！
1.HTMLの宣言をしてみよう
今回であればaを指定して、colorプロパティを付与することで色の変更ができます。
また、aタグをHTML内に記述するとデフォルトで下線が付いてしまいますので、不要であれば text-decoration: none; で削除してあげましょう。