MENU

アフィリエイトサイトのスマホ対策に使えるテーブルタグの基本設定

1月は準備していたものが動き出して、身動きとれなくなっているこばやん(@kobayan0506)です。
まぁ、身動きとれないっていってもやることは明確なので、日々楽しくやってます。
僕が主に作っているのはスマホにも対応しているサイトなんですが、よく出てくるトラブルとして”テーブルタグのデザインが崩れる”ということが多々あります。
そこで、アフィリサイトでも比較表やランキング表でよく使うテーブルタグの基本設定をご紹介します。

基本的にはテーブルタグの幅の指定はwidth=”○%”で行なう

スマホサイトのデザインが崩れる原因は、PCとの画面サイズの違いということからがほとんどです。
iPhoneの画面サイズは320px、他のAndroidも400px以外がほとんどですね。
ただ、PCサイトの場合2カラムサイトのサイドバーだけでも250pxくらいあるので、とてもじゃないですがPCサイトのサイズに対応したテーブルタグなんてスマホで表示できません。
そこで僕はテーブルの幅は2種類のルールで指定しています。
まず一つ目がスタイルシートでのテーブルタグのpx指定(class)です


.tebu {
border: 1px #cccccc solid;
width: 300px;  /* 100%で指定しても良い */
border-collapse: collapse;
}
@media only screen and (min-width: 640px) {
.tebu {
width: 650px;
}
}

上のpx指定がスマホ用、下の650pxと書いてあるものがPC(タブレット)用です。
こうすることで、<table class”tabu” width=”1000px”>とタグ内で幅を指定しても、スタイルシートで指定した幅が反映されます。
さらにtdタグやthタグもpxではなく、%で指定することでスマホの画面サイズに合わせた大きさに自動的に変化するのでデザインが崩れてしまった時は以下のような形に修正してみてください。


<table class"tabu">
<tr>
<th width="40%">見出しセル</th>
<th width="35%">見出しセル</th>
<th width="25%">見出しセル</th>
</tr>
<tr>
<td width="40%">データセル</td>
<td width="35%">データセル</td>
<td width="25%">データセル</td>
</tr>
</table>

px指定はスタイルシートで、タグでは基本的に%での指定でスマホでの表示のデザイン崩れを少なくすることが出来ます。

画像の指定もwidth=”○%”のみの指定が便利


応用ですがサイト内で使う画像も、記事コンテンツの中のものはpxではなく、%表示が便利です。
基本的に100%指定しておけば、記事コンテンツの幅に収まってくれるし、横幅さえ指定すれば縦の幅は自動的に100%で縮小・拡大されます。
色々なスマホサイト作成ツールを使ってデザインが崩れるという場合は、Twitterに連絡もらえると記事ネタとして修正事例載せられると思うのでご連絡ください♪

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次
閉じる