問題

1
HTML_CSS

aタグの文字色を変えよう

この問題集では、HTMLとCSSの両方を書いていきながら問題を解いていきます。 先にHTMLとCSSの問題集を終えていれば、テンポよく進めていけるはずです! 基礎から応用へとステップを上げてHTML_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は与える値によって下線以外にテキスト上に線を引いたり、テキストの中央に線を引くこともできます。
このように各プロパティには様々な値が用意されています。

HTML_CSSの問題に挑戦しよう!

問題

aタグの文字色を変えよう

タイトル通り、aタグの文字色を変えてみよう!

HTMLコードを記述し「リンク先に飛ばすよ」の文字列をCSSで黒色(#000)に変更してください。
また、文字列の下にボーダーが付いているのでそれもCSSで削除してみましょう!

あらかじめエディタに書くコード

                    <a href="#">リンク先に飛ばすよ</a>
¥HTML¥
                

期待する画面

解答の画像

解答と解説

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

aタグに限らず文字の色を変更したい場合はまずCSSでセレクタを指定します。
今回であればaを指定して、colorプロパティを付与することで色の変更ができます。

また、aタグをHTML内に記述するとデフォルトで下線が付いてしまいますので、不要であれば text-decoration: none; で削除してあげましょう。

補足

CSSのプロパティにはどれもデフォルトの値が設定されています。
どのようなデフォルト値が設定されているのか気になった際には
「CSSリファレンス」と検索して確認してみよう!

さらにスキルアップしたい方は公式LINEから「HTML_CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET