アコーディオン

button menu-one menu-two menu-three button menu-one menu-two menu-three. 重要ではあるけど、HTMLのdivタグにclass属性をつけるだけで即完成というあっけなさ。アコーディオンメニューを包括する親要素のdivには、このあと徐々にアコーディオンメニューの中で使うボタンやチェックボックス、そしてメニューリストをHTMLとCSSで組み立てて行くことになります。ラベルをCSSでボタンにするアコーディオンメニューの作り方では、アコーディオンの蛇腹が伸び縮みする動きのように、開閉するメニューのスイッチの役割にするボタンが必要です。ちなみにアコーディオンの蛇腹の部分を「ベローズ」というようです。 HTMLのlabelタグを記述して表示させたラベルを、CSSでアコーディオンメニューのボタンにデザインし使用します。 button 作り方ですが、labelタグを記述するときにfor属性を記述して、for属性の属性値を指定します。そしてラベルで表示するテキストを入れておきます。 for属性の値がチェックボックスとラベルを連動させるための部分• ラベルを表示するテキストが、labelをCSSでボタンにデザインして表示する文字の部分です。検証ツールでソース確認して、記述したHTMLと同じ表示になれば成功しています。 labelタグでマークアップした要素でラベル表示できたら、このlabel要素をCSSでアコーディオンメニューのボタンにデザインします。セレクタの中のプロパティはbackground-colorでラベルの背景色とcolorで文字色を決めて、paddingやtext-alignを使い余白や位置の調整をしながらボタンをデザインします。 button label要素の下にinputタグをマークアップして、labelのfor属性の値とinputのidを同じ値にして紐付けをします。紐付けできたら、プレビューしてlabelとinputの表示を確認します。表示確認のとき、CSSでデザインしたボタンをクリックしてチェックボックスにチェックがはいれば紐付け成功です。ここまでの時点のアコーディオンメニューの表示にはボタンとinput要素のチェックボックスが表示されています。 button menu-one menu-two menu-three HTMLでlabelとinputをマークアップした下にリストタグとaタグを使用してメニューリストを作ります。このときul開始タグにはclass属性でクラス名をつけておき、CSSでメニューリストのデザインをできるようにしておきます。表示を確認してみるとCSSでデザインしたアコーディオンメニューのボタンの下にメニューリストが表示できていれば成功です。メニューのリストをデザインメニューリストをCSSでデザインします。アコーディオンメニューの親要素のクラス名とメニューリストのulでセレクタにします。適用した背景色はアコーディオンメニューを包括する親要素で指定したwidth:300px;の幅でボタンの幅を同じにして合わせることができていると思います。そしてulの余白ができてしまうのでmarginとpaddingを0にすると、ボタンの下にメニューリストがぴったりくっついてくれます。またメニューリストの余白を無くしたことでリスト左の黒ポチが背景色からはみ出して表示します。これはCSSのlist-style: none;で消しておきます。こんな感じでアコーディオンメニューが表示できていれば、ここまでの作り方が成功できています。メニューリストを閉じた状態にするアコーディオンメニューのメニューリストが作り終わったら、開いたままのメニューになっているので、ボタンでメニューリストを開くまではCSSで閉じた状態、つまり非表示にします。 Advertisement 先述したul要素のデザインでlist-style: none;を指定してリストの黒ポチを消しましたが、overflow: hidden;だけでも消えたので、もしかするとlist-style: none;の記述はいらないかもしれませんが念のため記述しておきます。ここまでアコーディオンメニューの作り方を進めてきましたが、表示やデザインの確認をブラウザでしてみると、ただアコーディオンメニューのボタンが表示してるだけになります。これで成功できています。 CSSでアコーディオンメニューが開閉する動作作成 CSSでアコーディオンメニューが開閉する動作の作り方です。ラベルで作ったボタンをクリックしたら、CSSで非表示にしているメニューリストの要素を、さらにCSSで表示して開けるようにします。そしてプロパティはheightを記述して値で高さを指定します。 acd-menu:checked ボタンをクリックしてinputのチェックボックスにチェックが入ったとき• acd-list li 非表示で閉じてるメニューリストのli要素が• height: 50px; 指定する高さで開きます。こうしたCSSの使い方をしてアコーディオンメニューの開閉する仕組みが全て作り終ります。プレビューして表示確認するとデザインしたボタンだけが表示する状態になっていますが、ボタンをクリックすると、メニューリストの開閉が可能なアコーディオンメニューに仕上がっています。アコーディオンメニューを2つ繋げて複数にするさて、ここまで「ボタン」「チェックボックス」「メニューリスト」をCSSとHTMLで組み立てたり、デザインしながらアコーディオンメニューの作り方を進めてきましたが作成したのは1セットですね。せめて2つのボタンと2つのメニューリストが欲しいと思うので、アコーディオンメニューを2つ繋げて複数にする作り方も勉強がてら説明します。 button menu-one menu-two menu-three button menu-one menu-two menu-three と言っても一つ目の作り方さえ覚えてしまえば簡単です。先に作成してある親要素のdiv開始タグと終了タグだけを残し、一つ目のアコーディオンメニュー構造をコピペします。ただしコピペして貼り付けた2つめのアコーディオンメニュー構造を少し変更します。 labelのfor属性の値• inputのidの値• ulのクラス名この3つを変更します。例えば、分かりやすく変更しますが、変更する3つの値の最後に「2」を追加してHTML側は終わりです。一つ目の間接セレクタの記述の後に「,」を記述した下にでも、一つ目の間接セレクタをコピペして貼り付けます。コピペで貼り付けた2個目の:checkedとli以外のセレクタに「2」を追加します。これで1個目のアコーディオンメニューと2個目のアコーディオンメニューは、それぞぞれのボタンをクリックすることで別々にメニューリストが開閉できるような作り方ができます。この仕組みは、単純にアコーディオンメニューの labelとforで関連するセットの値を1個目と2個目で別々にして、ボタンをクリックしたときの動作を分けられるようにしています。おまけ：アコーディオンメニューに矢印とホバーアコーディオンメニューはシンプルに使いたいと思っているのですが、少し工夫をしたいと思った場合には矢印をデザインとして加えてあげてもいいと思います。 WordPressとWeb関係のことを趣味的に学んでます。独学なので記事で間違ってることがあればご指摘ください。記事が少しでも誰かの参考になればと思います。そろそろ独学知識を何かに活かせないかひっそりと模索中関連する記事• 2019. 04 CSSのpositionプロパティとpositionの値に指定ができるrelativeとabsoluteを使用すると、ボックスの表示位置をコントロール[…]• 2020. 28 CSSでは背景に色や画像を指定することができますが、背景の前面に表示するテキストと背景の組み合わせによっては、どちらかが見ずらくなってしまうことがあり[…]• 2020. 10 CSSのセレクタ指定には、親要素と子要素を組み合わせて繋ぐことができる結合子を付けたセレクタの指定ができます。 CSSのセレクタを指定するとき使用する[…]• 2020. 17 CSSでフッターのメニューを横並びにしてデザインしてみました。 CSSで実現したいことはメニューリストを横並びではなく、メニュー自体を横並びにするフッ[…].

アコーディオンを弾いていると、「左側はなんで鍵盤じゃないの? 」と言われます。「ボタンが沢山あるけど、ど～なってるの～～～?! 」と、よく聞かれるんです。鍵盤タイプのアコーディオンの右側はピアノやキーボードと同じ鍵盤になっています。鍵盤の方が見慣れているので左側に違和感を感じますよね。アコーディオンの左側はベース部と呼ばれています。どの様な構造かを書きます。ジャバラに平行に並んでいる縦ラインがベースラインです。沢山並んでいるボタンの、ジャバラ側大体真ん中辺に、凹んでいるボタンがあります。コレがＣドです。次は、アコーディオンという楽器の凄いトコなんですよん笑左手の外側ジャバラの反対側に向かう横のラインです。例として、Ｃのラインについて説明しますね～Ｃベースボタンの1つ外側は、Ｃメジャーコード長和音。このボタンを1つ押すだけで「ド・ミ・ソ」の和音が出ちゃうんです！もう1つ外側はＣマイナーコード短和音更に外側はＣセブンスコード属七和音とまぁ、ボタン1つで和音が押せる・・・という画期的な構造なんです。和音を指1本で出せるアコーディオンを弾き慣れると、和音を数本の指を使わないと出せないピアノを弾くのがメンド～になります（苦笑）他のベースＤ・Ｅ・Ｆ・Ｇ・Ａ・Ｂ・・・も同じ形で並んでいます。一度覚えてしまえば、楽譜を見て「ココがメジャーね、ココがマイナーね」って感じで弾けるようになっちゃいます「ど～してアコーディオンのベースは、ドレミファソ・・・って鍵盤みたいに並んでないの? 」と、聞かれます。実は、アコーディオンの西洋音楽のメジャーコード長和音音階に則して並んでいるんです。例としてＣ調の音楽。基本的に、ドミソＣとソシレＧとファラドＦの和音で出来ています。ほら！Ｃ・Ｇ・Ｆベースの横に1つのボタンで押せるメジャー和音が、あるではあ～りませんか～どのベースラインも同じです。だから覚えちゃえばピアノやギターより簡単!! ココをコウ押さないと和音が出ない！ってコトが無いんです。基本形を覚えてしまえばイロイロと組合せが出来るようになります。トッテモ面白いですよん笑鍵盤とベースの表を載せましたので、ご覧くださいね。東京杉並区の音楽教室ヴォードヴィル・アコーディオン教室.

「クリックして、開いたり閉じたりする、アコーディオン（メニュー・ボタン）」「クリックで、表示・非表示を切り替える、折りたたみ（メニュー・ボタン・パネル）」など、いろんな呼ばれ方をされており、とっても便利なもの。ただ、実装には「 Java Script」や「 jQuery」など、スクリプトで定義することが多く、初心者には難しいところがありました。また、「 onclick」タグを使えば、HTMLに書き込むだけで使えるものもありますが、「WordPress」では、エディタを切り替えると、「onclick」タグが消えてしまうので、「PHPでショートコードを作る」など、面倒な作業が必要だったり。。そこで、今回「 2か所にコピペするだけでOK」の、CSSだけテンプレートを作ってみました。 55 ; -webkit-transition: all. 3s; transition: all. 5 ; margin-top: -1px; overflow: hidden; height: 0px; position: relative; z-index: 10; transition: height 0. 3s ease-in-out, box-shadow 0. 5s ease-in-out, box-shadow 0. 1s linear; box-shadow: 0px 0px 0px 1px rgba 155,155,155,0. css」に、上記をコピーし、「ファイルを更新」してください。その後、このパーツを使いたい場所に、「 HTML」コードを挿入すれば、OKです。また、少しだけ、補足解説を。ラベルの背景色を変えたい場合、「. ac-container label」内の、「background: ff9b9b;」を、好きなカラーにしてね。その時は、マウスを合わせた時のホバー色「. ac-container label:hover」内の、「background: rgba 255, 155, 155, 0. 55 ;」のRGB値も合わせて、変えてね• CSSだけで作ると、動作が軽く、リスクも少ないので、オススメです。今回ご紹介した内容は、自分用に作ったメモ的な部分もあり、まだ改良の余地があるのですが、それも踏まえて、今後も更新していきたいと思います！コチラもおすすめです.

アコーディオンボタン。ボタン式アコーディオンがパソコンのキーボードで演奏できる「bayan」