スマホでサイトを表示したら背景が切れていた時のCSS対処

PCサイトをスマホで見てみた時に背景が見切れてる時があります。
そのときの対処方法を書きたいと思います。

CSSで一文追加するだけ!

そのサイトで一番長いwidthサイズを確認し、そのサイズをbodyタグにmin-widthに書き込めばOK。簡単でした。

body {
font-family: “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, Meiryo, “メイリオ”, “MS Pゴシック”, Verdana, Geneva, Arial, Helvetica;
font-size: 92%;
line-height:150%;
margin:0;
padding:0;
color:#111;
min-width:1061px;
}

[CSS]tableの装飾簡単コピペソース

コピペするだけでtableの装飾が出来るように置いておきます。
th部分だけ背景色がグレーです。

 

.table01 {
border-collapse: collapse;
margin-bottom:20px;
width:100%;
}
.table01 th,.table01 td {
padding: 10px;
border: 1px solid #ccc;
}
.table01 th {
font-weight: bold;
background:#ecebea;
}