CSSでパスワードジェネレータのスタイリングをしよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、パスワードジェネレータのスタイリングをCSSで実装したいと思います。

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

ワークスペース

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

JavaScript版

HTML & JavaScript

スタイル

CSSでスタイルを実装します。項目に出てくるbodyやh2は、HTML要素です。

全体の設定

bodyの設定

h2の設定

containerの設定

result-containerの設定

適当にパスワードを生成してスタイリングします。

result-container #resultの設定

result-container .btnの設定

btnの設定

btn-largeの設定

settingの設定

これで、完成です。

おわりに

パスワードジェネレータも面白い仕組みですよね。実務でもワンタイムパスワード(一時的なパスワード)を生成する機会があるので、応用性抜群です^^

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す