2018年05月7日(月)
detailsタグでクリックで開閉するFAQコンテンツ
Result
See the Pen Using the HTML5 Details Tag for FAQs by kachibito (@kachibito) on CodePen.
detailsタグでFAQコンテンツっぽいやつを作るサンプルです
JSも使わずCSSの力業も不要なのでコードもスッキリ見やすいですね
例によってIEでは使えないHTMLタグですが、便利には違いないですね
summaryにoutline: none;を付けないとクリック時にボーダーが表示されてしまいます。css
summary { display: block; outline: none; } summary:before {/*矢印アイコンを付与*/ display: inline-block; content: "›"; margin-right: 0.5rem; font-weight: bold; font-size: 1rem; transition: all 300ms ease; } /*答え部分が開いている場合の処理*/ details[open] summary { color: red; ...
0
1
7
12author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
‹ PREV
[ユーザー投稿] Facebook、Instagram、Twitter、LINEなど ソーシャルメディア広告の運用手法を解説するセミナー『SNS広告クリエイティブの新潮流』6月14日開催、参加無料
NEXT ›
[ユーザー投稿] 「離脱率」とは?~間違えやすいGoogle アナリティクス用語
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『detailsタグでクリックで開閉するFAQコンテンツ』についてまとめています。
この記事は特にアニメーション・CSS3・アイコン・HTML5・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
Ads
