CSSで評価アプリのスタイリングをしよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、評価アプリをCSSでスタイリングしていきたいと思います。

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

ワークスペース

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

JavaScript版

HTML & JavaScript

スタイリング

CSSでスタイリングしていきます。項目に出てくるbodyやtoggleは、HTMLの要素です。

全体の設定

bodyの設定

toggle-containerの設定

toggleの設定

labelの設定

toggle:checked + .labelの設定

ballの設定

toggle:checked + .label .ballの設定

これで、完成です。

おわりに

HTML/CSS/JavaScriptの技術があれば、フリーランスで仕事を受注することは可能だと思います。

もちろん、高度な技術レベルがあることが前提ですが。

しかし、本記事やJavaScript記事で紹介している内容が理解できれば、実務では通用すると思うので、一緒に勉強していきましょう^^

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す