CSSで虫取りゲームのスタイリングをしよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

今回で、いよいよ最後の講義です。

実装するもの

今回は、虫取りゲームのスタイリングをしましょう。

demoは「こちら」で確認できます。

ワークスペース

必要なファイルは、以下の通りです。

JavaScript版

HTML & JavaScript

スタイリング

これからCSSでスタイリングを行います。項目に出てくるbodyやaは、HTMLの要素です。

全体の設定

bodyの設定

h1の設定

btnの設定

カーソルをボタンに乗せた時

screenの設定

insects-listの設定

insects-list liの設定

choose-insect-btnの設定

choose-insect-btn imgの設定

game-containerの設定

screen.upの設定

time/scoreの設定

messageの設定

このようなメッセージが出る予定

insectの設定

これで、完成です。

おわりに

本記事で「50 Projects In 50 Days – HTML, CSS & JavaScript」でのCSS学習は以上です。だいぶCSSにも慣れてきましたね^^

仕事では、管理画面の作成に関わることが多いので、管理画面のデザインを考えたり、CSSで実装していきたいですね。

フルスタックエンジニアを目指して、がんばります^^

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す