CSSでモザイクアプリのスタイリングをしよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、パスワードを打ち込んでいくと背景のモザイクが薄れていくアプリケーションのスタイリングを行います。

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

ワークスペース

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

JavaScript編

HTML & JavaScript

スタイリング

今回、Tailwind CSSを導入しています。Bootstrapと同じCSSのフレームワークですね。これと併用して、個別のCSSを実装していく感じです。

全体の設定

bodyの設定

.backgroundの設定

おわりに

Tailwind CSSを活用すれば、CSSの実装はその分最低限で済むようになり、大変便利です。しかし、classの記述が大きくなるので、HTMLの見た目は悪くなりますね。

CSSだとsassを活用すれば読みやすいコードを実装できますが、 その代わりハンズオンできるほどの高度なCSSの知識が要求されます。

私は間をとって、どちらも取り入れていますね^^

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す