9. アクティビティ⑤ ( 9 / 10 )
作成したWebページをカスタマイズしましょう。
これは任意課題です。興味がある人は行ってください。
アクティビティ⑤の学習内容
色を変えたり、自分の好きな画像に差し替えてみましょう。
プロフィールはWebページを作成した作者を紹介する箇所です。
次の修正を行ってみましょう。
①作者情報の修正
HTMLファイルのプロフィールの情報を自分の情報に変更します。(個人情報なのでダミーでも構いません。)
②画像の変更
プロフィールで使われている画像を、好きな画像に変更しましょう。(個人情報なのでダミーでの構いません。)
③背景色の変更
プロフィールで名前などの情報が出ている背景色を変えましょう。
現在は背景色は白くなっています。
background-colorは次のように記述します。
色の指定は次のWebページを参考に指定しましょう。色は約1677万色指定することができます。
疑似クラスとは、特定の状態になったときにスタイルを適用させる仕組みのことです。
特定の状態とは、「マウスポインタが重なった」や「リンクがクリックされた」など、Webページへの動作を指します。
ヘッダーの「お問い合わせ」にマウスポインタを移動させたときに色を変える
マウスポインタが重なったときの動作は、マウスがないスマートフォンやタブレットでは確認できません。パソコンで確認しましょう。
マウスポインタが重なったことを指定する場合では、疑似クラス「hover」を使います。
疑似クラスは、対象となる要素のセレクタに指定をします。
ヘッダーの「お問い合わせ」につける場合は、次のようになります。
CSSファイルには、お問い合わせの疑似クラスhoverは設定されています。現在は黒で設定されていますので、「#000」から好きな色に変えましょう。色の変え方は、「③背景色の変更」の時と同じです。
課題がうまくできない場合は、「疑似クラス完成ファイルのダウンロード」からファイルをダウンロードして、参考にしてください。
作成したHTMLファイルを提出しましょう。
対応形式：.html
作成したCSSファイルを提出しましょう。
対応形式：.css
※この再現版では提出は行いません（送信先は未接続です）
