テーブルタグ

HPをスマホで見ると横にズレる【その原因はテーブルタグにある！】かもしれません。

投稿日: 浜口昌彦カテゴリー: ブログ

常日頃、お客様のページを眺める事が多いのですが、その中でもダントツに多いミスが【スマホで見ると横にズレる】事です。

ブログ系にはあまり見られないのですが、コーポレートサイトになるとこのミスが目立ちます。ワードプレスで書かれていてもなぜか横にズレて、右の空白部分がでてしまい、みっともない事になっていませんか？

 

HPをスマホで観覧すると何故か横にズレるのですけど…。

ワードプレスはとても素晴らしい機能を持っています。単純に文字を打つだけのブログにも使えますが、会社のHPとしてデザインされたHPにも使えます。所がここで少しやっかいな事が起きるのですが、HTMLで作られたHPと違って、お客様が直接弄れるので

コードを壊したり、無理やり文字を追加で入れたり、中には弄ってはダメな所を弄ってしまいHP自体が観覧できなくなる。。。プロにお願いした時は綺麗だったHPも、使っていくうちに何故か散々な状態になってしまう。

 

これもワードプレスのひとつの欠点でもありますよね。

何気に多いミスのひとつが【テーブルタグ】のミスで、スマホで観覧すると横にズレてしまってみっともない状態になっている場合が多く見られます。実際に例を見せれないのですが、こんなコードを書くと絶対にズレるので注意してください。

<table  style="width: 798px;">
<tr>
<td style="width: 487px;">1-1</td>
<td style="width: 487px;">1-2</td>
</tr> <tr> <td style="width: 487px;">2-1</td>
<td style="width: 487px;">2-2</td>
</tr> </tbody> 
</table>

え？全然わからない…そうですよね（＾＾；）問題になってくるのは　【style=”width: 798px;】の部分です。

このコードは横幅が798pxありますよーって宣言しちゃっています。PCなら問題なく表示できるのですがスマホの画面は大雑把に300PX程度しかありません。ですのでスマホから見ると、横にズレが生じます。ちょこっとなら良いのですけど、あまりにもズレたりしていると見にくくてしかた無いのです。

 

 

PX指定を％指定に直すだけでも、スマホで観覧時は横にズレない。

しかたないので

<table>
<tr>
<td>1-1>1-1</td>
<td">1-2>1-1</td>
</tr> <tr> <td ">2-1</td>
<td>2-2</td>
</tr> </tbody> 
</table>

の様に、【style=”width: 798px;】を削除すると左側だけが小さかったり、右側がやたら大きくなったり…しちゃいますよね

例えば、こんな風に書いてみるのも一つの手です。

HPを頼まれる方はコチラから これはテーブルタグの使い方です。PCではしっかり見れますが、実はスマホではうまく表示できない事もあるのですよー
外人、アジア これはテーブルタグの使い方です。PCではしっかり見れますが、実はスマホではうまく表示できない事もあるのですよー 
<table  style="width: 100%;">
<tr>
<td style="width: 40%;">1-1</td>
<td style="width: 60%;">1-2</td>
</tr> <tr> <td style="width: 40%;">2-1</td>
<td style="width: 60%;">2-2</td>
</tr> </tbody> 
</table>
1-1 1-2
2-1 2-2

純粋に、【style=”width: 798px;】のPX指定では無く【width: 100%】の様に、％表示に直すだけで綺麗にテーブルタグが完成できます。

 

 

応用編、CSSと組み合わせてテーブルの枠の色を消すと料金表にも使えます。

ここからは少し高度にCSSとテーブルを組み合わせてみましょう、例えばこんな時に使えます！

  • 料金表
  • 枠を見せたくない時

 

論より証拠！テーブルタグをCSSで合わせて綺麗な料金表にする

 

料金表
HP作成 100.000円
HP作成B 200.000円
HP作成C 300.000円
HP作成D 400.000円

 

HTML

<table class="teburu">
<tr>
<td>1-1>1-1</td>
<td">1-2>1-1</td>
</tr> <tr> <td ">2-1</td>
<td>2-2</td>
</tr> </tbody> 
</table>

CSS

.teburu {
border: transparent 1px solid;
background: url(https://ytyamaya.com/wp-content/uploads/2017/07/海の背景.jpg) repeat;
    background-size: cover;
}
.teburu th, .teburu td {
border: transparent 1px solid;
}

その他様々な用途にテーブルタグが使えます。一部分のみ色を付けたり、消したりなども自由自在です。背景画像を変えたりしながら、自由に組み合わせて楽しんでください♪

 

 

関連記事一覧