こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、パスワードを打ち込んでいくと背景のモザイクが薄れていくアプリケーションのスタイリングを行います。
demoは「こちら」で確認できます。
ワークスペース
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
JavaScript編
HTML & JavaScript
|
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> |
|
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)` }) |
スタイリング
今回、Tailwind CSSを導入しています。Bootstrapと同じCSSのフレームワークですね。これと併用して、個別のCSSを実装していく感じです。
全体の設定
|
1 2 3 4 |
* { /* padding/borderをwidth/heightに含める */ box-sizing: border-box; } |
bodyの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
body { /* flexアイテムにする */ display: flex; /* flexアイテムを積み重ねるように配置 */ flex-direction: column; /* flex重点にアイテムを配置 */ align-items: center; /* flex横軸にアイテムを配置 */ justify-content: center; height: 100vh; overflow: hidden; margin: 0; } |
.backgroundの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.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); } |
おわりに
Tailwind CSSを活用すれば、CSSの実装はその分最低限で済むようになり、大変便利です。しかし、classの記述が大きくなるので、HTMLの見た目は悪くなりますね。
CSSだとsassを活用すれば読みやすいコードを実装できますが、 その代わりハンズオンできるほどの高度なCSSの知識が要求されます。
私は間をとって、どちらも取り入れていますね^^
それでは、また!
CSSまとめ
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 26 27 28 29 30 31 32 33 34 35 |
* { /* padding/borderをwidth/heightに含める */ box-sizing: border-box; } body { /* flexアイテムにする */ display: flex; /* flexアイテムを積み重ねるように配置 */ flex-direction: column; /* flex重点にアイテムを配置 */ align-items: center; /* flex横軸にアイテムを配置 */ 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); } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。