コーディング

CSS未設定でOK!?HTMLタグだけでアコーディオン実装

  • このエントリーをはてなブックマークに追加
CSS未設定でOK!?HTMLタグだけでアコーディオン実装

こんにちは、ワタナベです。

今回はHTMLタグだけでアコーディオンが作れちゃう「details」「summary」タグのご紹介。

cssやjsの設定なしでもアコーディオンが実装できます。

SAMPLE

See the Pen
Untitled
by Akiho (@wcaotdaenpaebne)
on CodePen.

↑のサンプルではcssも設定しておりますが、css無しでもアコーディオンは機能します。

「details」タグに「open」属性を付けると最初から開いた状態になります。

デフォルトで矢印が付いていますが、これはcssで変更可能のようで、デザイン面の対応でもありがたいですね。

対応ブラウザは以下です。

Data on support for the details feature across the major browsers from caniuse.com

▼THANKS!

 

jsを使ったときのようなスムーズな動作は難しいようですが、jsさらにはcss無しで簡単にアコーディオンを実装出来てしまうのはすごいですね!

 

それではまた次回!

ご閲覧ありがとうございました♪

  • このエントリーをはてなブックマークに追加

建築に特化したホームページで集客&受注へ

実績の99%が建築業界だからわかる、"受注の取れるWebサイト"づくりを行います。
1000サイト以上の制作実績と、豊富なサービス・運営サポートが御社をバックアップ。お気軽にお問い合わせください!

D-Gripシステム Webサイトへ