2019年03月21日(木)
CSSだけでスマホ等ではアコーディオンになるレスポンシブな疑似テーブル
Result
See the Pen Pure CSS Responsive Accordion Table by kachibito
(@kachibito) on CodePen.
PCではテーブル、スマホやタブレットではアコーディオンになるやつ。もう少し使いやすくできそうですが・・
テーブルに見えますが実際はtableタグは使われておらず、display:table;で実装されていますのでタイトルには疑似と付けていますcss
#table { display: table; width: 100%; background: #fff; margin: 0; box-sizing: border-box; } .row { display: table-row; } .cell { display: table-cell; padding: 6px; border-bottom: 1px solid #e5e5e5; text-align: center; } input[type="radio"], input[type="checkbox"] { displa...
0
21
5
25author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
‹ PREV
シンプルで使いやすい、隠れた費用がない、入金が早いスマホ・タブレットでカード決済が出来る「Square」 を独占インタビュー！
NEXT ›
【2019年版】Photoshopがなくても簡単に画像を加工できる！高機能な画像編集ソフト18選 無料で使えるGIMPも紹介
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『CSSだけでスマホ等ではアコーディオンになるレスポンシブな疑似テーブル』についてまとめています。
この記事は特にレスポンシブ・CSS3・jQuery・WordPress・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
