どうも、ひろです、
前回は、背景色を変えたり、色ではなく画像に差し替えたりしいました。
今回は、HTMLかCSSのどこかにある、🌸を🌻に変えたいと思います。
ただ、これだけだとすぐに終わってしまいそうなので、最後の課題のボタンの色も一緒に変えていきたいと思います。
🌸を🌻に変える
前回、課題をクリアした自己紹介のサイトです。
名前の上に大きな🌸があります。
この🌸を🌻に変えます。
以前記事に書いた通り、文字を表示させる時はHTMLを使うことが多いです。
そこで、HTML内で🌸を探します。
<div class=”flower”>
🌸
</div>
の、コードがありました。
ここの『🌸を🌻』に変更します。
結果、
成功です。
🌸から、🌻に変わりました。
HTMLは今の所ですが、文字を変えるときとCSSを反映させたいときの文章やコードのみなので比較的に分かりやすい印象です。
ボタンの色を変える
次に、ボタンの色を変えていきます。
これも、以前記事で書いていた通り、色や文字の大きさをしっかり変えたい時はCSSで変えることを書きました。
CSSで、ボタンの色を変えていそうなコードを探します。
a{
background-color:#f7a8c4;
color:white;
text-decoration:none;
padding:12px 25px;
border-radius:30px;
display:inline-block;
margin-top:20;
}
が見つかりました。
background-color:#f7a8c4;かcolor:white;が色に関するコードが書かれていました。
サイトのボタンの色を見ると、ピンク色です。
ということは、
color:white;だと白色になってしまっていると思うので、background-color:#f7a8c4;を#ffc005に変えてみます。
から
成功です。
まだ少し頑張れそうなので、カーソルをボタンの上に乗せた時に変わる色も変えていきたいと思います。
CSSを見ると
a:hover{
background-color:#e36a92;
}
とありました。
サイト上でボタンの上に乗せた色とカラーコードの色が一致しているため、#e36a92;を#ff9900;に変えてみました。
結果、ボタンの上にカーソルを乗せたら
から
に変わることができました。
成功です。
学んだこと、難しかったこと
今回学べたことは、hoverはカーソルが重なると色が変わる＜タグ＞ということです。
このコードがあるかどうかで、ボタンが反応しているかどうかが分かりますし、見栄え的にもオシャレな感じが出て素敵です。
難しかったことが、hoverの前にa:のタグが必要だったことです。
ネットで調べてみると、a:=<a>らしいです。
私のサイトだと、<a>タグはボタンのコードで使っています。
つまり、hoverの前にa:がついていることで、<a>タグがついているボタンが適用することとなります。
そして、ボタンとカーソルが重なることで色が変わります。
なので、hoverの前にセレクタ（タグやクラス名）をつけないと何の力もなく意味のないタグになるそうです。
hoverを使う際は、必ずどのセレクタで使いたいかを書かないと意味ないので気をつけましょう。
終わり
今回で、AIからの課題を全てクリアすることができました。
初心者の課題だけあって、「このコードを変えれば変わるかな？」と思えることが多かった印象です。
ただ、今回の課題では
text-decoration:none;
padding:12px 25px;
border-radius:30px;
display:inline-block;
margin-top:20;
など、少しハードルが高いコード（私的にですが）を変えるような課題はなかったので、頭がパンクせずに済んだかなとも思います。
次回は、復習の意味も込めてサイト全体の見栄えを変え、もう少し統一感を出せるようにしようと思います。
ご覧くださりありがとうございます。
