.blog_conに入れると少しかわるぞ!(注意 良くなるわけではないから)
thが 縦・横 どちらでも
table_d0 + th_gyo thが横(行) th_gyo h_retsu 線が白か#cccかの違い
table_d0 + th_retsu thが 縦(列)
テーブルはレスポンシブルを考えると、基本
thは縦 列にするべし。。
1列 に出来ないから。
table_mob ただ1列にする
table_mob1 +サイトカラーでthを塗る
table_mob1-2 +パステルカラーでthを塗る 文字黒
モバイル1列 tableDec0
モバイル2列 tableDec2
整理必要はあるな。
まず、thが横のテーブル 縦のテーブル によって、
モバイルの1列化が違い 現状は thが縦の場合のみしかなさそう。
また、クラス名で 簡単にデザインを分けれる方がいいと思う。
現状は複雑すぎ
また.blog_con のtableのスタイルを除外したが、
本当は除外しないほうがいい なので、 .blog_con のtableのブログ記事のスタイルはおいておいて、テーブルの確認ページのみ、blog con を外した テンプレートにするべし。
<table class="table_d0 th_gyo"> <tbody> <tr> <th>tableDec</th> <th>th</th> </tr> <tr> <td>td</td> <td>td</td> </tr> </tbody> </table>
table_d0 th_gyo | th |
---|---|
td-l | td |
<table class="table_d0 th_retsu table_mob1"> <tbody> <tr> <th>tableDec</th> <td>td</td> </tr> <tr> <th>td</th> <td>td</td> </tr> </tbody> </table>
table_d0 th_retsu table_mob1 | td |
---|---|
td-l | td |
table_d0 th_retsu table_mob1-2 | td |
---|---|
td-l | td |
table_d0 th_retsu table_mob | td |
---|---|
td-l | td |
table.table_mob2 | td | td | td |
td-l | td | td | td |
<div class=”table_mob2″>
.table_mob2 table | td | td | td |
td-l | td | td | td |
</div>
<table class="table_d1"> <tbody> <tr class="start_class"> <th>tableDec1</th> <td>沿革</td> </tr> <tr> <th>1999年</th> <td>内容</td> </tr> <tr> <th>1999年</th> <td>内容</td> </tr> </tbody> </table>
table_d1 th | 沿革 td |
---|---|
1999年 | 内容 |
1999年 | 内容 |
<table class="table_d2 table_mob1"> <tbody> <tr class="start_class"> <th>会社名</th> <td>株式会社ダイバージェント</td> </tr> <tr> <th>住所</th> <td>愛知県小牧市新町2丁目8番地</td> </tr> <tr> <th>TEL/FAX</th> <td>TEL:0568-54-4400<br /> FAX:0568-54-4400</td> </tr> </tbody> </table>
table_d2 table_mob1 th | 会社概要 td |
---|---|
住所 | 愛知県小牧市新町2丁目8番地 |
TEL/FAX | TEL:0568-54-4400 FAX:0568-54-4400 |
<div class="d_table1 mob2retsu"> <table class="tablepress"> <thead> <tr class="row-1"> <th class="column-1" colspan="4">tablepress Google検索・Yahoo検索順位 実績 ご紹介できる一例<span style="font-size: 80%;">(更新:2020.4月29日調査 )</span></th> </tr> </thead> <tbody> <tr class="row-2"> <td class="column-1">春日井 Tシャツ作成</td> <td class="column-2">1位</td> <td class="column-3">名古屋 インクジェットTシャツ作成</td> <td class="column-4">3位</td> </tr> </tbody> </table> </div>
<div class=”d_table1 mob2retsu”>
tablepress Google検索・Yahoo検索順位 実績 ご紹介できる一例(更新:2020.4月29日調査 ) | |||
---|---|---|---|
春日井 Tシャツ作成 | 1位 | 名古屋 インクジェットTシャツ作成 | 3位 |
</div>
<div class=”d_table2 table_mob”>
tablepress Google検索・Yahoo検索順位 実績 ご紹介できる一例(更新:2020.4月29日調査 ) | |
---|---|
春日井 Tシャツ作成 | 1位 |
</div>
<div class="price_table"> <table class="tablepress"> <thead> <tr class="row-1"> <th class="column-1" style="width: 99.8459%;" colspan="2">基本料金</th> </tr> </thead> <tbody> <tr class="row-2"> <td class="column-1" style="width: 53.775%;">初期費用(制作)</td> <td class="column-2" style="width: 46.0709%;">360,000円(税別)</td> </tr> <tr class="row-3"> <td class="column-1" style="width: 53.775%;">保守管理サービス(必須)</td> <td class="column-2" style="width: 46.0709%;">5,000円(税別)/月</td> </tr> <tr class="row-4"> <td class="column-1" style="width: 53.775%;">納期目安</td> <td class="column-2" style="width: 46.0709%;">着手から1ヶ月半程度</td> </tr> </tbody> </table> </div>
<div class=”price_table”>
基本料金 | |
---|---|
初期費用(制作) | 360,000円(税別) |
保守管理サービス(必須) | 5,000円(税別)/月 |
納期目安 | 着手から1ヶ月半程度 |
</div>
ホームページ制作 開始可能月 | ||||
---|---|---|---|---|
5月 | 6月 | 7月 | 8月 | 9月 |
✕ | ○ | ○ | ○ | ○ |
</div>