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

こんにちは。こんばんは。
メンタルトレーナーの棚橋曉羅です。

今回はアコーディオンメニューというですね。
WEBサイトのデザインに関するプログラミングを学んだのでそれのまとめを残しておこうと思います。
ちなみに私はまだHTMLとCSSだけを勉強中なのでCSSだけで行うアコーディオンメニューです。

<input>タグのtype=“checkbox”を利用して
クリックしたら開閉するようにします。
<label>タグを使って、
属性関数のforと、idを一緒にします。

HTMLは

<label  for=“checked” class=“acーopen”>
メニュー</label>
<input type=“check box” id=“checked” class=“acーhidden”>
<ul for=“checked” class=“acーinner”>
<li>メニュー1</li>
<li>メニュー2</li>
</ul>

とします。

次にCSSは

クラスのCSSの記号は(.)ドットを使って表します。

.acーhiden{
display:none;
}

.acーopen{
display:block;

.acーinner{
display:none;
}

acーhiden:checked +
acーinner{
display:block;
}

このようにして
チェックがついていない時はメニューの中身を隠して
チェックがついたらdisplay:block;で表示するというふうにすれば簡単にアコーディオンメニューの出来上がりです。

できた時はもうほっとしたのと、
嬉しいのとで、感動しました。

やっぱりデザインしたように起動するのを見ると感動します。

勉強したかいがあったな。
成長できたなって実感が持てます。

メンタル面で特に大事になるのが、
成長しているなと感じるところです。

私たちの脳は怠惰で楽をしようとしますから、
それに反発して成長しようとするとき、
面倒だな。とか、やりたくないって気持ちが芽生えます。

やらないとやらないで、
やっていない自分を正当化する理由を見つけようとして、どんどんとやらないでもいい方へと思考が偏っていきます。

けど、それだと、メンタル面は不安定になっていき、楽しくありません。

メンタル面の安定には何故か成長が必要だということですね。

メンタルを整えるには行動が必要だということ。

行動するとメンタルが安定しやすい。

これが今回お伝えしたかったことです。

日々なにかしらで成長できたらと思います。

以上曉羅でした。