こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
<目次>
実装するもの
今回は、CSSでフォームラベルにエフェクト(ウェーブ)をつける方法を学習しました。
demoは、「こちら」です。
JavaScript版
ワークスペース
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
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 |
<!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>Form Input Wave</title> </head> <body> <div class="container"> <h1>Please Login</h1> <form> <div class="form-control"> <input type="text" required> <label>Email</label> </div> <div class="form-control"> <input type="password" required> <label>Password</label> </div> <button class="btn">Login</button> <p class="text">Don't have an account? <a href="#">Register</a> </p> </form> </div> <script src="script.js"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 要素を取得 const labels = document.querySelectorAll('.form-control label') // 取得したラベル文ループを回す labels.forEach(label => { label.innerHTML = label.innerText .split('') .map((letter, index) => `<span style="transition-delay:${index * 50}ms"> ${letter} </span>`) .join('') }) |
このHTMLをブラウザ上で表示すると以下のようになります。
スタイル
CSSでスタイリングをしていきます。項目に出てくるbodyやcontainerは、HTML要素です。
全体の設定
全体に適用する設定をスタリングします。
|
1 2 3 4 5 6 7 8 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Muli&display=swap"); * { /* ボックス要素のサイズを算出 paddingとborderをwidthとheightに含める */ box-sizing: border-box; } |
body
bodyのスタイリングします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
body { background-color: steelblue; color: #fff; font-family: "Muli", sans-serif; /* flexアイテムにする */ /* https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container */ display: flex; /* flexアイテムを積み重ねる */ flex-direction: column; /* flex軸の交差軸の中央に配置 */ align-items: center; /* flex軸の主軸を中央に指定 */ justify-content: center; /* viewの高さに対して100%にする */ height: 100vh; /* 要素のはみ出を非表示にする */ overflow: hidden; margin: 0; } |
container
containerのスタイリングをします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.container { background-color: rgba(0, 0, 0, 0.4); /* 上下 | 左右 */ padding: 20px 40px; /* 角を丸くする */ border-radius: 5px; } .container h1 { /* テキストを真ん中へ */ text-align: center; margin-bottom: 30px; } .container a { /* 下線を非表示 */ text-decoration: none; color: lightblue; } |
btn
btnのスタイリングをします。
|
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 |
.btn { /* カーソルをポインタへ */ cursor: pointer; /* displayは、要素をブロック、インラインの どちらとして扱うか決める inline-blockは、要素の並びはインライン、 中身はブロック的な性質を持つ */ display: inline-block; width: 100%; background: lightblue; padding: 15px; font-family: inherit; font-size: 16px; /* 枠線なし */ border: 0; /* 枠を丸く */ border-radius: 5px; } /* ボタンを押した時 */ .btn:focus { /* 青枠をなくす */ outline: 0; } /* ボタンが押されアクティブになった時 */ .btn:active { /* 少し要素を小さくすることで、押した感を出す */ transform: scale(0.98); } |
text
textのスタイリングをします。
|
1 2 3 |
.text { margin-top: 30px; } |
form-control
form-controlのスタイリングをします。
|
1 2 3 4 5 6 7 |
.form-control { /* 要素の絶対位置 */ position: relative; /* 上 | 左右 | 下 */ margin: 20px 0 40px; width: 300px; } |
form-control input
form-controlのinput要素をスタイリングします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.form-control input { /* 背景色を無効 */ background-color: transparent; /* 枠線をなくす */ border: 0; /* ボーダーをつける */ border-bottom: 2px #fff solid; /* 要素をブロックにする */ display: block; width: 100%; padding: 15px 0; font-size: 18px; color: #fff; } /* フォーカスがあてられた時と、検証が有効の場合 */ .form-control input:focus, .form-control input:valid { /* 青線を消す */ outline: 0; /* 下線の色を変更 */ border-bottom-color: lightblue; } |
form-control label
form-controlのlabel要素をスタイリングします。
|
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 |
.form-control label { /* relativeに対しての絶対位置 */ position: absolute; /* 位置ぎめ */ top: 15px; left: 0; /* ポインタ無効 */ pointer-events: none; } .form-control label span { /* 要素をインラインブロックにする */ display: inline-block; font-size: 18px; min-width: 5px; /* cubic-bezierでラベルを波のように動かす */ transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .form-control input:focus + label span, .form-control input:valid + label span { color: lightblue; /* 要素をY軸回転 マイナスを指定すると上部に動く */ transform: translateY(-30px); } |
これで、完成です。結果はデモをご確認ください。
おわりに
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 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 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Muli&display=swap"); * { /* ボックス要素のサイズを算出 paddingとborderをwidthとheightに含める */ box-sizing: border-box; } body { background-color: steelblue; color: #fff; font-family: "Muli", sans-serif; /* flexアイテムにする */ /* https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container */ display: flex; /* flexアイテムを積み重ねる */ flex-direction: column; /* flex軸の交差軸の中央に配置 */ align-items: center; /* flex軸の主軸を中央に指定 */ justify-content: center; /* viewの高さに対して100%にする */ height: 100vh; /* 要素のはみ出を非表示にする */ overflow: hidden; margin: 0; } .container { background-color: rgba(0, 0, 0, 0.4); /* 上下 | 左右 */ padding: 20px 40px; /* 角を丸くする */ border-radius: 5px; } .container h1 { /* テキストを真ん中へ */ text-align: center; margin-bottom: 30px; } .container a { /* 下線を非表示 */ text-decoration: none; color: lightblue; } .btn { /* カーソルをポインタへ */ cursor: pointer; /* displayは、要素をブロック、インラインの どちらとして扱うか決める inline-blockは、要素の並びはインライン、 中身はブロック的な性質を持つ */ display: inline-block; width: 100%; background: lightblue; padding: 15px; font-family: inherit; font-size: 16px; /* 枠線なし */ border: 0; /* 枠を丸く */ border-radius: 5px; } /* ボタンを押した時 */ .btn:focus { /* 青枠をなくす */ outline: 0; } /* ボタンが押されアクティブになった時 */ .btn:active { /* 少し要素を小さくすることで、押した感を出す */ transform: scale(0.98); } .text { margin-top: 30px; } .form-control { /* 要素の絶対位置 */ position: relative; /* 上 | 左右 | 下 */ margin: 20px 0 40px; width: 300px; } .form-control input { /* 背景色を無効 */ background-color: transparent; /* 枠線をなくす */ border: 0; /* ボーダーをつける */ border-bottom: 2px #fff solid; /* 要素をブロックにする */ display: block; width: 100%; padding: 15px 0; font-size: 18px; color: #fff; } /* フォーカスがあてられた時と、検証が有効の場合 */ .form-control input:focus, .form-control input:valid { /* 青線を消す */ outline: 0; /* 下線の色を変更 */ border-bottom-color: lightblue; } .form-control label { /* relativeに対しての絶対位置 */ position: absolute; /* 位置ぎめ */ top: 15px; left: 0; /* ポインタ無効 */ pointer-events: none; } .form-control label span { /* 要素をインラインブロックにする */ display: inline-block; font-size: 18px; min-width: 5px; /* cubic-bezierでラベルを波のように動かす */ transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .form-control input:focus + label span, .form-control input:valid + label span { color: lightblue; /* 要素をY軸回転 マイナスを指定すると上部に動く */ transform: translateY(-30px); } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。