こんにちは、yutaです。
先日、「Bootstrapによるレスポンシブ対応の基礎」でBootstrapのグリッドシステムを利用したWEBサイトのレスポンシブ対応についてお話ししました。
Bootstrapといえば、レスポンシブ対応のためのもの！と思っている方もいらっしゃると思います。というか僕も思ってました。でも・・・
Bootstrap公式ページを覗いてみると・・・レスポンシブ以外にもいろんな機能があり過ぎるじゃないか・・・という事に今更気づいたので、その数ある機能のうちの1つである「accordion」の使い方をメモしておきます。
1.accordionとは
2.コード全体を眺めてみる
3.1つ目のcardクラスだけ見てみる
4.1つ目のcardクラスをコピペ
5.実行してみる
6.accordionの幅を変更する
7.HTMLコード(コピペ用)
1.accordionとは
accordionとは、要素を楽器のアコーディオンのように表示するスタイルのことです。要するに↑のGIFのような表示スタイルですね。
通常であれば、WEBサイト上の文章は初めから画面に表示されている状態ですが、accordionを使うと、ボタンをクリックした時に要素がまるでアコーディオンを広げた時のように伸びて、そこに文章が表示されるようになります。
2.コード全体を眺めてみる
まずは、accordionのコード全体を眺めてみましょう。ここからは、Bootstrapが導入済みである前提でお話しします。導入の仕方が分からない方は、「Bootstrapによるレスポンシブ対応の基礎」を参照してください。
なんか長くて読みたくない・・・って思いますよね。笑
基本的には以下の構造になっています。
要するにcardクラスが3つ並んでいるだけです。
ここからは、1つ目のcardクラスだけを見ていきましょう。
3.1つ目のcardクラスを見てみる
1つ目のcardクラスは以下の通りです。
2〜6行目(ボタン部分)の説明
2行目のcard-headerクラスはボタン要素全体を囲んでいる箱と考えてください。表示するカードの数だけ作成するので、idを付けて区別します。
3行目のmb-0クラスはmargin-bottomを0指定するためのものです。詳しくはこちらを参照してください。
4行目の<button>で表示のON/OFFを切り替えるボタンを記述しています。実はこのボタンもBootstrapの機能の1つです。詳しくはこちらを参照して欲しいのですが、とりあえずはコピペで大丈夫です。
4行目のポイントは、data-targetに表示対象である要素のid名を「#id名」で記述しているところです。また、aria-controlsにも同要素のid名を記載しますが、こちらは「#」は無しです。
8〜12行目(表示要素部分)の説明
8行目から12行目までの<div>では表示対象の要素を記述しています。
8〜12行目で囲まれている<div>が先ほど記述したボタンと対応する表示内容部分なので、8行目の<div>内に4行目のdata-targetとaria-controlsで記述したid名を付けます。これで、ボタンと表示要素の対応が取れました。
8行目にはid以外にもclass=”collapse show”、aria-labelledby=”heading1″、data-parent=”#accordionExample”がありますが、class=”collapse show”は↓の意味があります。その他の2つはよく分かりません・・・。
class=”collapse show” : 初期状態で内容を表示。(ボタンを押さなくても初めから内容が表示されている状態)
class=”collapse”とすると、初期状態では内容を非表示。
9〜11行目のcard-bodyクラスは、表示内容の具体的な記述ですね。
4.1つ目のcardクラスをコピペ
というわけで、1つ目のcardクラスを記述し終えたら、これを好きなだけコピペしていってください。今回は全部で3つのcardクラスを作成しました。
ちょっとした書き換え
現状のままだと、完全に同じコードが3つ並んでいて各cardクラスの区別がつかないので、以下を書き換えます。
・card-headerクラスのid : (ex) heading1→heading2
・button要素のdata-target、aria-controls : (ex) data-target=”#collapse1″→”#collapse2″ / aria-controls=”collapse1″→”collapse2″
・表示内容の記述を囲んでいる<div>内のid、aria-labelledby : (ex) id=”collapse1″→”collapse2″ / aria-labelledby=”heading1″→”heading2″
ここまで書き換えると正常に動きますが、このままだと全てのカードが初めから表示状態になるので、2つ目と3つ目のカードを初期状態で非表示にしておきます。
【 2つ目と3つ目のcardクラス内の以下を書き換え 】
・class=”collapse show”から”show”を消す
・aria-expanded=”true”から”false”に変更
5.実行してみる
ブラウザで開いてみると以下のようになります。
6.accordionの幅を変更する
最後にaccordionの幅を変更する方法ですが、cssでaccordionクラスにwidth指定を行えば可能です。
ここで注意点が、width指定の際に!importantを付けてBootstrapの初期設定を変更しないと幅が変更できません。具体的には以下のように記述してください。
.accordion{ width: 50% !important;}
HTMLコード(コピペ用)
今回の作成したaccordionの全HTMLコードを掲載します。
今回は、以上になります。説明が少し分かりづらかったかもしれませんが、最初はコピペして動かしながら理解していっても良いかと思います。
ブログランキングに参加しています。↓のバナーをクリックしていただけると嬉しいです！では、また。
