[CSS]フォームラベルにエフェクトをつける方法

こんにちは。KOUKIです。

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

実装するもの

今回は、CSSでフォームラベルにエフェクト(ウェーブ)をつける方法を学習しました。

demoは、「こちら」です。

JavaScript版

ワークスペース

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

HTML&JavaScript

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル

CSSでスタイリングをしていきます。項目に出てくるbodyやcontainerは、HTML要素です。

全体の設定

全体に適用する設定をスタリングします。

body

bodyのスタイリングします。

container

containerのスタイリングをします。

btn

btnのスタイリングをします。

text

textのスタイリングをします。

form-control

form-controlのスタイリングをします。

form-control input

form-controlのinput要素をスタイリングします。

form-control label

form-controlのlabel要素をスタイリングします。

これで、完成です。結果はデモをご確認ください。

おわりに

CSSは難しいですが、結構慣れてきました。

使っているプロパティは大体同じですし、一つ一つ分解して考えれば、きちんとしたロジックになっているので記憶にも残りやすいです。

ひとしきり練習したらあとは実践あるのみ!自分のオリジナルアプリケーションを作っていきたいと思います^^

それでは、また!

CSSまとめ

CSS ソースコード

コメントを残す