CSSでネオンボードアプリのスタイリングをしよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、 ネオンボードアプリをCSSでスタイリングしたいと思います。

DJとかを連想する感じのアプリですね。

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

ワークスペース

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

JavaScript版

HTML & JavaScript

スタイリング

これからCSSでスタイリングをしていきます。項目のboydやcontainerは、HTMLの要素です。

全体の設定

bodyの設定

containerの設定

変化がないですね。

squareの設定

超うっすらとボックスが表示されています。カーソルを動かすと以下のようになります。

これで、完成です。

おわりに

今回のアプリケーションは、JavaScriptの実装の方が難しいですね。CSSの方は、flex設定をマスターしておけば、あとは特に難しくないです。

フロントエンド業務はクライアントとの調整が発生するので、正直あまり仕事ではやりたくないですが(こんなこと言ってはダメかもですが)、プライベートでは、面白いアプリケーションをガンガン作れるようになりたいと思います。

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す