今なら6/22まで4ヶ月無料で7,000万曲が聴き放題!!! Amazon Music Unlimitedはこちら!!

[web制作]HTMLだけでアコーディオンボタンを作って、コンテンツ表示をスッキリさせる方法

URLをコピーする
URLをコピーしました!

「アコーディオンのメニューを作りたいけど、これ以上プラグインを増やしたくない」

「JSを使わずに簡単につくりたい」

という悩みをお持ちではないですか?

この記事ではそんなアコーディオンメニューに悩まされているあなたをお助けします。

HTMLとCSSのコピペで簡単に作れますので、ぜひ参考にされてください。

CONTENTS

HTMLのdetailsとsummaryタグを使って簡単なアコーディオンを作ろう

使い方はとっても簡単です。

detailsタグでは、タグで囲った部分がアコーディオンで折り畳まれる部分になります。

ただ、そのままだとなんの説明だかわからないので、summaryタグで見出しを作ります。

あとは、summaryで作った見出しをクリックすれば、summaryタグで囲ってない部分が表示されます。

HTMLの記述例

<details>

 <summary>summary見出し</summary>

初めは、この部分が隠れて表示されます。見出しをクリックしたら表示されます。

</details>

HTMLのコーディングはこれで完了です。

めっちゃ簡単ですよね!

 スポンサーリンク

CSSを当ててアコーディオンを作ろう

それでは、先ほどのdetailsとsummaryタグをCSSでデザインしていきましょう。

カスタムしやすいようにシンプルに書いてみます。

details{
border: 3px solid #000;
border-radius: 3px;
height: auto;
}
summary{
padding: 1em;
}

次にsummaryタグは、初期ではテキストのときのポインターが表示されますので、その変更をsummaryに追加します。

summary{
cursor: pointer;
}

自然に開くようにクリックしたときのアニメーションを設定します。スーっとウインドウが開くようになります。開く早さを変えたいときはtransitionの数字を変更してみてね。

注意点として、detailsとdetailsアコーディオンにtitleを入力してくださいにそれぞれ高さを設定しないとアニメーションしません。

details{
transition: 1s;/*クリックしたとき1秒でウインドウが開く*/
height: auto;/*高さの設定がないとアニメーションしません*/
}
detailsアコーディオンにtitleを入力してください {
height: 20em;/*高さの設定がないとアニメーションしません*/
}

このままだと、開いた文章がぎっちり詰まってますので、程よい行間を取ります。

detailsアコーディオンにtitleを入力してください {
line-height: 2;
}

最後にこれまでのcodeをまとめます。

details{
border: 3px solid #000;
border-radius: 3px;
transition: 1s;
height: auto;
}
summary{
padding: 1em;
cursor: pointer;
}
detailsアコーディオンにtitleを入力してください {
height: 20em;
line-height: 2;
}

だいぶ見た目が整いましたね。 ちなみに、をに変更して、属性を付加してやると、初めから開いた状態が作れます。

クリックしてね!summaryタグ 初めは、この部分が隠れて表示されます。

なかなかよくできたね!

 スポンサーリンク

detailsとsummaryのブラウザ対応状況

かなりシンプルにアコーディオンが作れるタグですが、一部ブラウザには対応してません。

対応状況はこちらから。Can I use

ちなみに、detailsの左の▲を変えたいときは、list-style-imageを使って別の画像をとりいれましょう。

また、ChromeやSafariに対応してないようなのでベンダープレフィックス(-webkit-)を使って対応させます。

summary{
list-style-image:url("取り入れたい画像のURL");
}
summary::-webkit-details-marker {
background: url(画像URL) no-repeat center/6px;
color: transparent;
}

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!!
URLをコピーする
URLをコピーしました!

コメント

コメントする

CONTENTS
閉じる