事前設定
最初にheadタグ内に以下のコードを記述してjQuery本体とJSファイルを読み込みjQueryが使える状態にしてください。
Q.01
ボタンをクリックしたときに画像を表示するようにしてください。
ヒント: CSSのdisplayプロパティで表示/非表示を制御します。
回答例
解説
あらかじめ画像をCSSで非表示にしておき、ボタンクリック時にJavaScriptでCSSを変更して表示するようにします。
CSS
JavaScript
実行結果
Q.02
マウスオーバー時はパスワードが見えるようにしてください。
ヒント: inputのtype属性を変更します。(参考: https://webliker.info/html/39533/)
回答例
解説
マウスオーバーのときにinputのtype属性を"text"に変えることで入力中のパスワードを見えるようにします。
JavaScript
実行結果
Q.03
ボタンをクリックしたときに進化するよう画像と名前を変更してください。
回答例
解説
「クリックしたときに」の処理の中で画像変更とテキスト変更の2つを実行させます。
JavaScript
実行結果
ピチュー
Q.04
いいねアイコンをクリックしたときにsvgタグに【clicked】クラスを付け外しできるようにしてください。
回答例
解説
svgタグに対してもJavaScriptから操作を行うことができます。
JavaScript
実行結果
Q.05
ボタンをクリックしたときアニメーションで色が変わるようにしてください。
背景色: lightgray → coral
文字色: gray → white
ヒント: クリック時にクラスを付けることでアニメーションが起動するようにします。
回答例
解説
クリックした時に変わる状態のCSSスタイルをあらかじめ用意しておき、JavaScriptからクラスを振ることで実行させます。
CSS
JavaScript
実行結果
Q.06
進化ボタンをクリックしたときにふわっと画像が切り替わるようにしてください。
ヒント: ピカチュウの画像をfigureタグ内に追加して、2つの画像をCSSで同じ位置に絶対配置して重ね合わせます。
回答例
解説
「ふわっと」切り替えるようにするには2つの画像をクロスフェードさせる形で表示させます。それにはあらかじめ2つの画像を重ねた状態を作っておき、ボタンクリックでそれぞれの画像の透明度をアニメーションで変更して入れ替えるようにします。
手順の流れとしては以下になります。
- CSSで2つの画像を絶対配置で同じ位置に重ねて、さらにピカチュウ画像のみ透明状態にしておきます。
- ボタンをクリックしたあとの状態（figureタグに[change]クラスがあるときの画像スタイル）をあらかじめCSSで定義しておきます。
- ボタンをクリックしたときにJavaScriptでfigureタグに[change]クラスを付与させるようにします。
CSS
HTML
JavaScript
実行結果
