divタグでtableをつくる
イシュー
- tableタグだといろいろ不具合があって、divタグでテーブルを作らなあかん、、
- やりたいのはカードリスト(twitterみたいな)
参考
- [css][html] divでtableを作る tableの行全体をリンクにする divの高さとborder-bottomを揃える display:table-cellは神です。 : レスペス・トランクィル
- <DIV>をタテヨコに段組していこう -2step脱テーブルスタイルシートCSSレイアウト講座-
- tableレイアウト、divレイアウトの利点と欠点 - asrite.net
- html - How create table only using <div> tag and Css - Stack Overflow
- テーブルのヘッダを固定してボディだけスクロールする - まぐねっとのブログ
- 幅を固定しないでfloatをする « (X)HTML+CSS Tips « XHTML+CSS Webサイト制作Tips « ScuderiaWeb
- 固定と可変で作る。スマホサイトで片方を横幅可変にするやり方
- Webページの横幅を指定する--人気ホームページが作れる簡単作成講座
- [意外と知らないCSS]スマホ制作に便利!display:table-cellを使った横並びのレイアウト | Cappee Design
- display:table-cell は、リキッドレイアウトに使える
- 【CSS】table-cellを使って関連記事の表示で良く使うリストスタイルのデザインを作る方法 | delaymania
table-cell
参考
- 【CSS】table-cellを使って関連記事の表示で良く使うリストスタイルのデザインを作る方法 | delaymania
- CSS「display: table」と「display: table-cell」で出来ること | アイビーネットblog
- 【スマホサイト】display:table-cellにmarginを指定したい | Tips Note
- display:table-cellの留意点(width、min-height、position)
- レスポンシブ化するなら知っておきたいtable-cellの使い方 | スマートフォン&モバイルEC事例ノウハウ集|モバイルファーストラボ
- IE8から始めるテーブルレイアウト と IE10からのFlexible Box|Web Design KOJIKA17
- table-cellはie8以降らしい
- スマートフォンサイト制作にdisplay:tableとdisplay:table-cellが便利! | Kana-Lier カナリエ
- CSS再入門 - display: tableの活用 1 | CodeGrid
card list CSS
参考
- Bootcards - Cards-based UI built with Bootstrap
- CSS Card Tricks | Design Shack
- これはトランプのUIサンプル
- Implementing the “Card” UI Pattern in PhoneGap/HTML5 Applications | Web Builder Zone
- Responsive List + Flip effect | CSSDeck
- ダイナミックすぎてビジネスではエフェクト考える必要あるが面白い