こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
前提事項
Chromeで動作確認をしています。
実装するもの
今回は、パスコード打ち込みUIをCSSでスタイリングします。
demoは「こちら」で確認できます。
ワークスペース
必要なファイルは、以下の通りです。
|
1 2 3 4 5 |
$ 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 |
<!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="style.css" /> <title>Verify Account</title> </head> <body> <div class="container"> <h2>Verify Your Account</h2> <p>We emailed you the six digit code to cool_guy@email.com <br /> Enter the code below to confirm your email address.</p> <div class="code-container"> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> </div> <small class="info"> This is design only. We didn't actually send you an email as we don't have your email, right? </small> </div> <script src="script.js"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// 要素の取得 const codes = document.querySelectorAll('.code') // 1文字目にフォーカス codes[0].focus() // 要素のループ codes.forEach((code, idx) => { // keydownイベントの登録 code.addEventListener('keydown', (e) => { // 0 ~ 9が打ち込まれた時 if(e.key >= 0 && e.key <=9) { codes[idx].value = '' setTimeout(() => codes[idx + 1].focus(), 10) // Backspaceが打ち込まれた時 } else if(e.key === 'Backspace') { setTimeout(() => codes[idx - 1].focus(), 10) } }) }) |
スタイリング
CSSでスタイリングしていきます。項目に出てくるbodyやcontainerは、HTMLの要素です。
全体の設定
|
1 2 3 4 5 6 7 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Muli:300,700&display=swap"); * { /* padding/borderをheight/widthに含める */ box-sizing: border-box; } |
bodyの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
body { background-color: #fbfcfe; font-family: "Muli", sans-serif; height: 100vh; overflow: hidden; margin: 0; /* flexアイテムにする */ display: flex; /* flex重点にアイテムを配置 */ align-items: center; /* flex横軸中央にアイテムを配置 */ justify-content: center; } |
containerの設定
|
1 2 3 4 5 6 7 8 |
.container { background-color: #fff; border: 3px #000 solid; border-radius: 10px; padding: 30px; max-width: 1000px; text-align: center; } |
code-containerの設定
|
1 2 3 4 5 6 |
.code-container { display: flex; align-items: center; justify-content: center; margin: 40px 0; } |
codeの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.code { border-radius: 5px; font-size: 75px; height: 120px; width: 100px; border: 1px solid #eee; margin: 1%; text-align: center; /* フォントの太さを指定 */ font-weight: 300; } @media (max-width: 600px) { .code-container { flex-wrap: wrap; } .code { font-size: 60px; height: 80px; max-width: 70px; } } |
code:validの設定
|
1 2 3 4 |
.code:valid { border-color: #3498db; box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25); } |
infoの設定
|
1 2 3 4 5 6 7 8 9 10 |
.info { background-color: #eaeaea; display: inline-block; padding: 10px; /* 行の高さを指定 */ line-height: 20px; max-width: 400px; color: #777; border-radius: 5px; } |
スピンボタン非表示の設定
|
1 2 3 4 5 6 |
/* スピンボタンを非表示 */ .code::-webkit-outer-spin-button, .code::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } |
これで、完成です。
おわりに
初めて知ったのですが、「.code::-webkit-outer-spin-button」、「.code::-webkit-inner-spin-button」の指定で、スピンボタンを非表示にすることができるんですね。
公式には、「Non-standard」と記載があるので、アプリケーションに組み込むときは注意が入りそうですが、知識として知っておいて損はないと思います^^
それでは、また!
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Muli:300,700&display=swap"); * { /* padding/borderをheight/widthに含める */ box-sizing: border-box; } body { background-color: #fbfcfe; font-family: "Muli", sans-serif; height: 100vh; overflow: hidden; margin: 0; /* flexアイテムにする */ display: flex; /* flex重点にアイテムを配置 */ align-items: center; /* flex横軸中央にアイテムを配置 */ justify-content: center; } .container { background-color: #fff; border: 3px #000 solid; border-radius: 10px; padding: 30px; max-width: 1000px; text-align: center; } .code-container { display: flex; align-items: center; justify-content: center; margin: 40px 0; } .code { border-radius: 5px; font-size: 75px; height: 120px; width: 100px; border: 1px solid #eee; margin: 1%; text-align: center; /* フォントの太さを指定 */ font-weight: 300; } .code:valid { border-color: #3498db; box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25); } .info { background-color: #eaeaea; display: inline-block; padding: 10px; /* 行の高さを指定 */ line-height: 20px; max-width: 400px; color: #777; border-radius: 5px; } @media (max-width: 600px) { .code-container { flex-wrap: wrap; } .code { font-size: 60px; height: 80px; max-width: 70px; } } /* スピンボタンを非表示 */ .code::-webkit-outer-spin-button, .code::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。