CSSでToggle開閉画面のスタイリングをしよう!

こんにちは。KOUKIです。

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

実装するもの

FAQアプリのToggle開閉画面をCSSでスタイリングします。

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

JavaScript版

ワークスペース

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

HTML&JavaScript

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

スタイリング

スタイリングを始めます。項目に出てくるbodyやh1はHTMLに設定した要素です。

全体の設定

全体の設定を行います。

body

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

h1

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

faq-container

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

faq

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

faq-title

faq-titleのスタイリングをします。

faq-text

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

faq-toggle

faq-toggleのスタイリングをします。

fa-times

fa-timesのスタイリングをします。

active

activeのスタイリングをします。activeは、JavaScriptで制御するクラスです。

これで、完成です。

おわりに

要素の表示・非表示の切り替えは、JavaScriptにて「active」クラスをtoggleすることで可能にしています。

このようなJavaScript+CSSのコンボは現場でもよく使われるので、この機会に慣れていきましょう^^

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す