CSSでクイズアプリケーションをスタイリングしよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、クイズアプリゲーションのスタイリングをします。

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

ワークスペース

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

JavaScript版

HTML & JavaScript

スタイリング

これからCSSでスタイリングをしていきます。項目に出てくるbodyやquiz-containerなどはHTMLの要素です。

全体の設定

bodyの設定

quiz-containerの設定

quiz-headerの設定

h2の設定

ulの設定

ul liの設定

ul li labelの設定

buttonの設定

これで、完成です。

おわりに

CSSを勉強することでUI開発が面白くなりますが、デザイン力が身につかないんですよね^^;

こればかりは、たくさん作品を作って、感性を磨いていくしかないですよね。

何事もそうですが、一朝一夕にはできません。自分がかっこいいと思うものをたくさん見て、それをアプリ開発に活かしていきたいと思います^^

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す