コーディング学習

HTML & CSS|Progate修了したけど『あれっ?』【忍者CODE-初級問2】

コーディング案件獲得を目標に、現在ロードマップに沿って勉強中です。

難しい!w(汗)

ということで、

  • Progateで「HTML & CSS」を学んだけど
  • 忍者CODEではここにつまずいたよw

について解説していきます。

今回解説する問題はこちら!

忍者CODE[HTML_CSS]初級2問目より解説
  1. つまずいた部分
    • hoverの入力方法
    • 透明プロパティーのつずり
    • カーソル変更方法
  2. 攻略した方法
  3. 参考ページ紹介

いずれ案件をこなしていくうえで、見返せるように、自分用のメモとして作ってみました。
また、コーディングを学び始めた方へ、少しでも参考になればと思います。

  • 正確な答えについては、忍者CODEの出題ページにて確認してください。
  • 回答を開くと説明も付いてますので、大変勉強になります。
トマト男爵

では、解説を始める❗️

【挑戦】忍者CODE HTML_CSS 初級2問目

問題の内容

出典:忍者CODE HTML_CSS 初級2

問題文下にあるHTMLコードを入力し、hoverした時に文字列を透明にする+カーソルをpointerに変更するという問題です。

グラナッポー

hoverはProgateでも出題されてたから、なんとかなりそうだ♪

つまずいた部分

  1. hoverの入力方法
  2. 透明プロパティーのつずりがわからない
  3. カーソルの変更方法
ナッスングラス

なんとなくの雰囲気はわかるから、あとは間違えずに書き込めれば…。

攻略した方法

[HTML_CSS]初級2問目検索で簡単に解決できました。

問題の解説と参考サイト

hover

擬似クラスのひとつで、要素にカーソルが乗った時のスタイルを指定することができます。Progateでも学習します。

/* ホバー時に<span>の文字色を変更する */
span:hover {
   color: red;
}
参考サイト
:hover – CSS: カスケーディングスタイルシート | MDN

透明

こちらもProgateで学んでいたので「アレだ!」となりました。ただし、プロパティーの綴りがわからなかったのでググりました。
また、文字を透明にする方法は何種類かあるようなので、下記サイトを参考にしてみてください。

参考サイト
【CSS】opacityで画像や文字などを透過させる方法

【CSS】テキストを透明にする4つの方法 | 株式会社オンズ

カーソル変更

Progateで出てきた気もするけど、よく覚えてない。でも、ググれば簡単でした。

参考サイト
cursor – CSS: カスケーディングスタイルシート – MDN

参考サイト・検索ワード一覧表

検索したときのワードと、参考にしたサイトを一覧表にしてみました。他にも参考になるサイトがあります。気になる方はワードを参考に調べてみてください。

グラナッポー

Google大先生に聞いてみよう✨

まとめ

忍者CODE HTML_CSS 初級2問目に挑戦したことについて解説しました。

解説内容

問題の内容

  • 問題文下にあるHTMLコードを入力し、hoverした時に文字列を透明にする+カーソルをpointerに変更する

つまずいた部分

  1. hoverの入力方法
  2. 透明プロパティーのつずりがわからない
  3. カーソルの変更方法

攻略した方法

  • 検索で簡単に解決

問題の解説と参考サイト

  • hover について
  • 透明 について
  • カーソル変更 について

参考サイト・検索ワード一覧表

続く問題にもどんどんチャレンジしていき、経験値を積んでいこうと思います。

りんこ(@Rinko_2_Pero)でした!

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA