こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
<目次>
実装するもの
今回は、パスワードを打ち込んでいくと背景のモザイクが薄れていくアプリケーションを作成します。
demoは「こちら」で確認できます。
環境構築
簡単な環境構築をお願いします。
必要なファイルは、以下の通りです。
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
CSS版
ページ(HTML)の作成
最初にページを作成しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.11/tailwind.min.css" integrity="sha512-KO1h5ynYuqsFuEicc7DmOQc+S9m2xiCKYlC3zcZCSEw0RGDsxcMnppRaMZnb0DdzTDPaW22ID/gAGCZ9i+RT/w==" crossorigin="anonymous" /> <link rel="stylesheet" href="style.css" /> <title>Password Strength Backround</title> </head> <body> <div class="background" id="background"></div> <div class="bg-white rounded p-10 text-center shadow-md"> <h1 class="text-3xl">Image Password Strength</h1> <p class="text-sm text-gray-700">Change the password to see the effect</p> <div class="my-4 text-left"> <label for="email" class="text-gray-900">Email:</label> <input type="text" class="border block w-full p-2 mt-2 rounded" id="email" placeholder="Enter Email" /> </div> <div class="my-4 text-left"> <label for="email" class="text-gray-900">Password:</label> <input type="password" class="border block w-full p-2 mt-2 rounded" id="password" placeholder="Enter Password" /> </div> <button class="bg-black text-white py-2 mt-4 inline-block w-full rounded" type="submit" > Submit </button> </div> <script src="script.js"></script> </body> </html> |
このHTMLをブラウザ上で表示すると以下のようになります。

今回、Tailwind CSSを導入しています。BootstrapのようなCSSのフレームワークですね。
1 2 3 4 5 6 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.11/tailwind.min.css" integrity="sha512-KO1h5ynYuqsFuEicc7DmOQc+S9m2xiCKYlC3zcZCSEw0RGDsxcMnppRaMZnb0DdzTDPaW22ID/gAGCZ9i+RT/w==" crossorigin="anonymous" /> |
PRがかっこいいです。
スタイル(CSS)を装飾
次は、ページにスタイルをつけます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
* { box-sizing: border-box; } body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .background { background: url('https://images.unsplash.com/photo-1556745757-8d76bdb6984b') no-repeat center center/cover; position: absolute; top: -20px; bottom: -20px; left: -20px; right: -20px; z-index: -1; filter: blur(20px); } |
ここまで実装すると以下のようになります。

JavaScriptの実装
背景のモザイクは、CSSのスタイルで定義しています。
1 |
filter: blur(20px) |
blurはCSSの関数で、画像にぼかしを入れることができます。
ここに設定されている数値をパスワードが打ち込まれた時に変化させれば、目的を達成できそうです。
要素を取得する
最初に画面操作に必要な要素を取得します。
1 2 3 |
// 要素取得 const password = document.getElementById('password') const background = document.getElementById('background') |
inputイベントの登録
inputイベントを登録します。これは、パスワードが打ち込まれた時に発火するイベントです。
1 2 3 4 |
// inputイベントの登録 password.addEventListener('input', (e) => { ... }) |
モザイク処理
最後にモザイク処理を実装します。前述の通りblurの数値をJavaScriptで制御します。
1 2 3 4 5 6 7 8 9 10 11 12 |
password.addEventListener('input', (e) => { // パスワードに打ち込まれた文字列を取得 const input = e.target.value // 解像度を計算 const length = input.length const blurValue = 20 - length * 2 // blurに保存 background.style.filter = `blur(${blurValue}px)` }) |
これで完成です。
おわりに
Tailwind CSSを使ってみて思ったのですが、こういうフレームワークを上手に使えば、CSSの知識も最低限で良さそうですよね。
今時、バックエンドの処理でさえフレームワークを使うのですから。
CSSを勉強しようと思っていましたが、CSSの最低限の知識はありますし、こういうフレームワークを使いこなせるようになりたいと思いました^^
それでは、また!
JavaScriptまとめ
JavaScript ソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// 要素取得 const password = document.getElementById('password') const background = document.getElementById('background') // inputイベントの登録 password.addEventListener('input', (e) => { // パスワードに打ち込まれた文字列を取得 const input = e.target.value // 解像度を計算 const length = input.length const blurValue = 20 - length * 2 // blurに保存 background.style.filter = `blur(${blurValue}px)` }) |
コメントを残す
コメントを投稿するにはログインしてください。