【html＋Css】CopyOK！ Flexbox Pricecard！
とにかく時間がない！調整は後でする！そんなときのFlexbox料金表コピペソース作っておいたから！料金表って地味に時間がかかるでしょ？colspanとか焦るよね。適時調整して使ったらいいよ。
パソコンで３列、ipad以下では2列にしておいたから。
出来上がり予想図
| Aプラン | |
|---|---|
| ￥12,000～ | |
| タイトル | テキストテキストテキストテキスト |
| Aプラン |
|---|
| ￥12,000～ |
| テキストテキストテキストテキストテキスト |
| Aプラン | ||
|---|---|---|
| ￥12,000～ | ||
| タイトル | テキスト | テキスト |
| タイトル | テキスト | テキスト |
| Aプラン | ||
|---|---|---|
| ￥12,000～ | ||
| タイトル | テキスト | テキスト |
| テキスト | テキスト | |
| Aプラン | |
|---|---|
| ￥12,000 | ￥12,000 |
| テキストテキストテキストテキストテキスト | |
1.htmlコピペします
<div class="price_warp"> <table class="tbl_price"> <tbody> <tr><th colspan="2">Aプラン</th></tr> <tr ><td colspan="2" class="price_text">￥12,000～</td></tr> <tr><td class="price_text_small">タイトル</td><td class="price_text_small">テキストテキストテキストテキスト</td></tr> </tbody> </table> <table class="tbl_price"> <tbody> <tr><th>Aプラン</th></tr> <tr><td class="price_text">￥12,000～</td></tr> <tr><td class="price_text_small">テキストテキストテキストテキストテキスト</td></tr> </tbody> </table> <table class="tbl_price"> <tbody> <tr><th colspan="3">Aプラン</th></tr> <tr ><td colspan="3" class="price_text">￥12,000～</td></tr> <tr><td class="price_text_small">タイトル</td><td class="price_text_small">テキスト</td><td class="price_text_small">テキスト</td></tr> <tr><td class="price_text_small">タイトル</td><td class="price_text_small">テキスト</td><td class="price_text_small">テキスト</td></tr> </tbody> </table> <table class="tbl_price"> <tbody> <tr><th colspan="3">Aプラン</th></tr> <tr ><td colspan="3" class="price_text">￥12,000～</td></tr> <tr><td rowspan="2" class="price_text_small">タイトル</td><td class="price_text_small">テキスト</td><td class="price_text_small">テキスト</td></tr> <tr><td class="price_text_small">テキスト</td><td class="price_text_small">テキスト</td></tr> </tbody> </table> <table class="tbl_price"> <tbody> <tr><th colspan="2">Aプラン</th></tr> <tr><td class="price_text">￥12,000</td><td class="price_text">￥12,000</td></tr> <tr><td colspan="2" class="price_text_small">テキストテキストテキストテキストテキスト</td></tr> </tbody> </table> </div>
2.Cssコピペします
石油王、油田しかわからないからもっと良いCssもあると思う。
.price_warp { display: flex; display: -webkit-box; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; } .tbl_price{width: calc(97%/3); margin: 0.5%;} .tbl_price th { background: #eee;} .tbl_price td,.tbl_price th{padding: .3em .2em;border: 1px solid #ddd;box-sizing: border-box;} .tbl_price .price_text{text-align:center;font-weight:bold;font-size:120%;} .tbl_price .price_text_small{font-size:80%;} /*ipad以下*/ @media (max-width: 798px){ .tbl_price{width: calc(98%/2); margin: 0.5%;} }
3.フォルダダウンロードも
主張の強いリンク作っておいたから、ちょっと買っとくと石油王嬉しい。売り上げは油田の維持に使うね。LINEスタンプ購入
The following two tabs change content below.
最新記事 by 嫁の方 (全て見る)
- Windows 子どももできる！動画編集可能なパソコンの作り方 - 2021年8月30日
- 2021お盆や長期休暇にオススメの王道！無料漫画 - 2021年7月28日
- バイオハザード8は怖くないのか？今までホラー苦手だった人は購入するのか！？ - 2021年5月22日
- Jimdoでリニューアル後効果が出やすいサイトまとめ - 2021年5月16日
こんにちは。石油王です。今日は石油王が最速3分のコピペFlexboxの料金表テーブル複数バージョンをお届け。メッチャ便利じゃん。