2019年06月15日(土)
CSSのみでアコーディオン・2パターン
Result
See the Pen Pure CSS Accordion by kachibito
(@kachibito) on CodePen.
今更感半端ないですが、CSSのみでアコーディオン
全部開けられるやつと1つ開けると他が自動で閉まるやつの2パターンあります
両方ともinput要素と:checkedを使います違いはcheckboxかradioか、なので基本的には同じコードで動きます
css
input {/*input要素自体は非表示にしておく*/ position: absolute; opacity: 0; z-index: -1; } /*アコーディオンのスタイリング*/ .tabs { border-radius: 8px; overflow: hidden; border:1px solid #ddd; border-top:none; } .tab { width: 100%; color: white; overflow: hidden; } .tab-label { display: flex; justif...
0
0
30
40author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
‹ PREV
Twitter 人気のつぶやき 6/1〜6/14 2019
NEXT ›
日本語化もされている、クロスプラットフォームに対応したオープンソースの動画編集ソフト・「OpenShot Video Editor」
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『CSSのみでアコーディオン・2パターン』についてまとめています。
この記事は特にレスポンシブ・Googleについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
