問題
1aタグの文字色を変えよう
この問題集では、HTMLとCSSの両方を書いていきながら問題を解いていきます。 先にHTMLとCSSの問題集を終えていれば、テンポよく進めていけるはずです! 基礎から応用へとステップを上げてHTML_CSSをマスターしよう!
HTML/CSSの問題に挑戦しよう!
問題
「aタグの文字色を変えよう」
タイトル通り、aタグの文字色を変えてみよう!
HTMLコードを記述し「リンク先に飛ばすよ」の文字列をCSSで黒色(#000)に変更してください。
また、文字列の下にボーダーが付いているのでそれもCSSで削除してみましょう!
あらかじめエディタに書くコード
<a href="#">リンク先に飛ばすよ</a>
¥HTML¥
期待する画面
解答と解説(aタグの文字色を変えよう)
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
aタグに限らず文字の色を変更したい場合はまずCSSでセレクタを指定します。
今回であればaを指定して、colorプロパティを付与することで色の変更ができます。
また、aタグをHTML内に記述するとデフォルトで下線が付いてしまいますので、不要であれば text-decoration: none; で削除してあげましょう。
補足
CSSのプロパティにはどれもデフォルトの値が設定されています。
どのようなデフォルト値が設定されているのか気になった際には
「CSSリファレンス」と検索して確認してみよう!
ポイント
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は与える値によって下線以外にテキスト上に線を引いたり、テキストの中央に線を引くこともできます。
このように各プロパティには様々な値が用意されています。