cssだけでアコーディオンメニューを作成・第四回(完成)

こんにちは tanaka です。

前回は、
立派なボタンが完成しました。

今回は、それを使って
メニューの中身を表示してみましょう。

  1. なぜ可能なのか
  2. ボタン作成
  3. cssセレクタ
  4. 完成

今回で最終回です。

第四回:完成

第一回を見ていない方は、下のリンクからどうぞ。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

全体説明

cssアコーディオンメニューの完成

今回は、アコーディオンメニューの最終回です。
実際にアコーディオンメニューの開閉を作っていきましょう

html 作成

Lorem ipsum(ロレム・イプサム)は文章の見本

まずは、アコーディオンメニューの中身を作っていきましょう
ボタンのところまでは前回と同じです。

ウインド画像9

その下に新しくアコーディオンメニューの中身を作ります。

ウインド画像10
<input type=”checkbox” id=”label01″ class=”box01″ name=”window01″ />

<label for=”label01″>
<h1>ボタン</h1>
</label>

<p class=”LoremIpsum”>
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, 
sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, 
quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea 
commodo consequat. 
Duis aute irure dolor in reprehenderit 
in voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui 
officia deserunt mollit anim 
id est laborum.
</p>

<p>に文章見本を打ち込みました。

この英語みたいなのは、Lorem ipsum(ロレム・イプサム)と言って
サンプル文章として使われるものです。

詳しくは、
Lorem ipsum
で、検索をかけてみてください。

さらにいうと、Lorem ipsum に意味はないそうで、
Google翻訳にかけてもちゃんとした答えは返ってこないそうです。

css 作成

最初は display: none で非表示に

その <p class=”LoremIpsum”> のcssです。

ウインド画像11
.LoremIpsum {
 width: 480px;
padding: 10px;
margin: 10px;
border: 1px solid black;
}

Lorem ipsumのcssは、こんな感じにしています。
分かりやすくするため、
1pxの黒い線で囲っています。

出来上がりがこれ

ウインド画像12

今からこれを使って、
ボタンの文字をを押すと、
文章が出てくるように作ります。

現在、文章が出ている状態です。

ボタンを押すと文章が出る
このようにしたいので、
初期状態では、
アコーディオンメニューが消えているようにします。

なので、
.LoremIpsum を非表示にします

ウインド画像13
.LoremIpsum {
display: none;
width: 400px;
padding: 10px;
margin: 10px;
border: 1px solid black;
}
ウインド画像14

これで、
画面から消えた状態になりました。

あとはこれを、ボタンが押された時に表示させるだけです。

ウインド画像15
.box01:checked + label + .LoremIpsum {
display: block;
width: 400px;
padding: 10px;
margin: 10px;
border: 1px solid black;
}

.box01:checked + label + .LoremIpsum は、
ボタンが押された時、
文章を表示するcssです。

これでボタンが押されると表示されるようになりました。

実行画面

ボタンの文字を押してみてください。

ウインド画像16

どうですか?
表示されましたか?

もう一度押してみてください。

ウインド画像14

どうですか?
消えましたか?
これで完成です。

簡単なアニメーションを追加

ここへさらに、
簡単なアニメーションを追加してみましょう。

そこで使われるのが
transition:
です。

簡単なアニメーションに使用します。

それでは、実際にやってみましょう。

ウインド画像21

transition: 0.5s display;

どうですか?
実はこれ、
アニメーションしません。

displayは、表示と非表示の間がありません。

なので、アニメーションを入れても、
ぱっと出る
ぱっと消える
このような感じになって、
アニメーションしてくれません。

なので、
今回は代わりに
別のものを使います、

それが、
opacity:
です。

この opacity とは、自身を透明にするcssで、

opacity
1完全表示
0.550%表示
0透明状態

というように、
自らを透明にするときに使います。

さらに、opacity は display と違って、
opacity: 0; にしても幅、高さが存在します。

display: none;非表示になる幅、高さは消える
opacity: 0;透明になる幅、高さは存在する

このように
opacity は、自身が透明になるだけで
そこに存在し、
幅、高さは保ったままなので注意してください。

さらに、
opacity は display と違って、
変化する間が存在するためアニメーションさせる事ができます。

それでは、作っていきましょう。

ウインド画像18
.LoremIpsum {
opacity: 0;
transition: 1s opacity, 1s width;
width: 0px;
height: 0px;
padding: 10px;
margin: 10px;
border: 1px solid black;
}
.box01:checked + label + .LoremIpsum {
opacity: 1;
transition: 1s opacity, 1s width;
width: 400px;
height: auto
padding: 10px;
margin: 10px;
border: 1px solid black;
}

まずは、非表示側のcss。

非表示側のcss
opacity0完全透明透明なだけで
幅、高さは存在する
transition1s opacity1秒かけてopacityが
変化する
1s width1秒かけてwidthが
変化する
width0幅 0存在を消すため
0にする
height0高さ0同上

次、表示側のcss

表示側のcss
opacity1表示
transition1s opacity1秒かけてopacityが
変化する
1s width1秒かけてwidthが
変化する
width400px幅 400px
heightauto高さauto自動で伸び縮みして
欲しいのでauto

これで、完成です。

それではボタンを押してみてください

ウインド画像19

どうですか?
アコーディオンメニューはアニメーションしましたか?

これでcssだけで作るアコーディオンメニューの完成です。

transition: 1s all; で全て指定

最後に
transition: 1s all;
all という指定のやり方もできます。
これは、
それが書かれた{ } 内にある全ての要素を
1秒間で変化する。

.LoremIpsum {
opacity: 0;
transition: 1s all;
width: 0px;
height: 0px;
padding: 10px;
margin: 10px;
border: 1px solid black;
}

というもので、全を指定しても問題なさそうなら、
transition: 1s all;
として、全てアニメーションさせた方が
楽かもしれません。

ウインド画像20
.LoremIpsum {
opacity: 0;
transition: 1s all;
width: 0px;
height: 0px;
padding: 10px;
margin: 10px;
border: 1px solid black;
}
.box01:checked + label + .LoremIpsum {
opacity: 1;
transition: 1s all;
width: 400px;
height: auto
padding: 10px;
margin: 10px;
border: 1px solid black;
}

これで、cssだけで作るアコーディオンメニューは完成です。

以上、
cssだけで作るアコーディオンメニュー
第四回:完成(全4回)ついてのお話しでした。

ありがとうございました。

タイトルとURLをコピーしました