CSSだけで作るアコーディオンメニュー
クリックで開く1 hello.world! クリックで開く2 hello.world! クリックで開く3 hello.world! クリックで開く4 hello.world!
基本的なやり方
labelをクリックする labelクリックでチェックボックスにチェックを付けたり外したりする CSSの隣接セレクタでチェックボックスにチェックがついているかいないかで、コンテンツの表示・非表示のスタイルを変更するCSSの擬似クラス :checked と、隣接セレクタを使います。擬似クラス :checked と隣接セレクタは下記リンクより詳細を確認してみてください。
ベースのHTML・CSS
HTML クリックで開く1 .acd-content < border: 1px solid #333; height: 0; opacity: 0; padding: 0 10px; transition: .5s; visibility: hidden; >.acd-check:checked + .acd-label + .acd-content 2行目チェックボックスは前述のとおり、表示・非表示を切り替えるフラグとして使うだけですので、CSSで display: none; にします。
11行目〜表示・非表示を切り替えるボックス要素 acd-content は、チェックが入っていない状態（非表示）の時は、 height: 0; opacity: 0; visibility: hidden; としています。
またアニメーションさせるため transition: .5s; も設定しています。
19行目〜.acd-check:checked + .acd-label + .acd-content と指定することで、チェックボックスにチェックが入った状態の acd-content という指定ができます。
そして、 height: 40px; opacity: 1; visibility: visible; とすることで非表示から表示へアニメーションさせています。
注意点は、 height: auto; ではアニメーションがおかしくなってしまうので、明確な数値を指定する必要があります。
応用編 アイコンで表示・非表示状態をわかりやすく
クリックで開く1 hello.world! クリックで開く2 hello.world! クリックで開く3 hello.world! クリックで開く4 hello.world!
HTML CSS .acd-check < display: none; >.acd-label < background: #0068b7; color: #fff; display: block; margin-bottom: 1px; padding: 10px; position: relative; >.acd-label:after < background: #00479d; box-sizing: border-box; content: '\f067'; display: block; font-family: "Font Awesome 5 Free"; height: 52px; padding: 10px 20px; position: absolute; right: 0; top: 0px; >.acd-content < border: 1px solid #333; display: block; height: 0; opacity: 0; padding: 0 10px; transition: .5s; visibility: hidden; >.acd-check:checked + .acd-label:after < content: '\f068'; >.acd-check:checked + .acd-label + .acd-content 10行目アイコンを position: absolute; で配置するので、ラベルは position: relative; にしておきます。
12行目〜ラベルに :after 擬似要素でアイコンを設定します。アイコンはFont Awesomeを使用しました。
33行目〜WEBデザイナー・フロントエンドのスキルを確実に身につけたい方へ
一方、スクールで学べば、正しい順序で、現場で使えるスキルを効率よく習得することができます。最短ルートでスキルを身につけたい方には、スクール学習がおすすめです。
- カリキュラムが体系化されているため、 基礎から応用まで無駄なく学べる
- 現役のプロから 実践的なフィードバックを受けられる
- わからないことを すぐに質問・解決できる環境 がある
- 制作課題を通じて、 ポートフォリオが作成できる
- 学習仲間や講師とのつながり が、モチベーション維持につながる
- カリキュラムが 現場で必要とされる技術に対応 しているか
- 現役デザイナー・エンジニアが講師として在 籍しているか
- ポートフォリオ制作のサポートが充実 しているか
- 卒業後の就職・転職支援が用意 されているか
- オンライン・通学など、 自分の生活スタイルに合った受講形式 か
遠回りせず、確実にスキルを身につけたいなら、プロに教わるのが一番の近道です。
【現役プロ厳選】Webデザインスクールおすすめ9選｜主婦・社会人でも学べる！ Webデザインを学びたいけど、どのスクールがいいのか分からない… スクール終了後のキャリアも不安 そんな悩み、ありませんか？ 特に未経験からスタートする方にとっては…