CSSで検索バーの表示・非表示をスタイリングしよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、検索バーの表示・非表示をCSSでスタイリングします。

demoは、「こちら」で確認できます。

ワークスペース

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

JavaScript版

HTML&JavaScript

現状、ページは以下のように表示されます。

スタイリング

CSSでスタイリングをしていきます。

なお、項目に出てくるbodyやsearchは、HTMLに設定した要素です。

全体の設定

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

body

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

search

btn

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

focus

inputとbtnのfocus時のスタイリングをします。

active

JavaScriptで付与するactiveクラスのスタイリングをします。

これで、検索をクリックしたら検索の表示・非表示が切り替えられます。

おわりに

CSSでかっこいいデザインを実装するには、「transition」が鍵ですね。ちょっと難しく感じられますが、分解して考えると大したことはありません(技術は大したことありますが)。

本記事の内容を何回か実装すると慣れると思います!

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す