レスポンシブWebデザインでサイト制作を行った場合、PCページに設定したCSSを解除しないとスマートフォンページでうまく表示できない場合があります。
主な解除方法や設定方法をメモします。
目次
width 幅の指定
スマートフォンページで横幅がはみ出している場合やブロック内におさまらない場合は、PCページの横幅指定が効いている可能性があります。
その場合は、横幅を100％に設定します。
width:100%;
それでも、横幅がボックスはみ出てしまう場合は、
width:94%;
のように、100％より値を小さくして調整できるか確認します。
親ボックスからはみ出てしまう場合は、box-sizingも有効な場合があります。
box-sizing: border-box;
はみ出る場合は、こちらも試してみましょう。
height 高さの指定
PCページで高さを指定している場合、スマートフォンページで、高さの設定をしないと引き伸ばされてしまいます。
イメージの高さスマートフォンページに対応する場合は、スマートフォン画面サイズのCSSにautoを設定します。
height: auto;
スマートフォンページのイメージ全体に設定いる方も多いです。
レスポンシブデザインでのposition: absoluteの解除
position: absolute;を絶対位置指定している場合、解除が必要な場合があります。
その場合は、スマホサイズで
position:static;
を記載すれば、position: absolute;の位置指定を解除できます。
または、PCの設定よりleftなどの値を変更して調整が可能な場合があります。
PCの設定
.test {
position: absolute;
left:240px;
}
スマートフォンの設定
.test {
left:40px;
}
position:static;で解除できない場合は、!importantを試しましょう。
position:static!important;
flexboxの解除、リセット
横並びなどの並列はflexboxが主流となってきました。
flexboxの横並びも、スマホでは不要な場合が多いので、解除が必要な時があります。
flexboxの解除、リセットは、display:block；を設定します。
display:flex;
↓
display:block;
うまくいかない場合は、!importantを試しましょう。
display:block!important;
floatの解除
横並びといったら、以前はfloatが主流でした。
現在でも、flexboxで対応できない場合やflexboxを使うまでもないところでfloatを使用するケースがあります。
そのfloatですが、PCページで設定しているCSSを解除する場合は、スマートフォン画面サイズのCSSにnoneを設定します。
float: none;
max-width、max-heightの解除
PCページでイメージなどにmax-width、max-heightを設定している場合、レスポンシブデザインでは解除が必要な場合があります。
max-width、max-heightで解除する場合は、
max-width: initial;
max-height:auto;
を記載します。
max-widthをPCで設定していて、スマホサイズで写真が枠外にはみ出てしまう場合は、
max-width:100%;
を設定してみましょう。
