【CSS】レスポンシブデザインを考えるときに最低限指定するスタイル

今回はレスポンシブデザインを考えるときに最低限指定すべきスタイルを紹介します。

内容は基本的なことが多いので、初心者向けとなっています。

 

画像の大きさを最適化する

特にPC向けデザインで画像の大きさがpxなどで固定されていると、スマホで見たときに画像が大きくはみ出してしまいます。無駄に横スクロールができてしまうので、ユーザーからすると正直ウザいです。

というわけでスマホでも画像がはみ出ないようにしましょう。以下のコードで大丈夫です。

img {
max-width : 100% ;
height : auto ;
}

画像の最大幅が画面の100%となり、横にはみ出ることはなくなりました。

また、height: auto;を指定しておくことで画像の比率を保っています。これがないと画像が縦に伸びまくってしまうので注意しましょう。

 

動画や地図の大きさを最適化する

画像だけでなく、youtubeから引っ張ってきた動画やGoogleマップなどもスマホではみ出してしまいます。

はみ出さないようにするには以下のコードだけでokです。

iframe { width : 100% ; }

 

画像の横に文字が回り込むのを防ぐ

画像の大きさが小さくて横に少しスペースがあると、文字が入り込んでめちゃくちゃ見づらくなる場合があります。

これはCSSでfloatの指定を解除し忘れたときに起こりがちです。

というわけで、スマホ表示の時はfloatを解除しましょう。

ただし、PC画面での表示の時に回り込ませたい場合は、メディアクエリを使ってPCでは文字が回り込むように、スマホでは回り込まないようにしましょう。

@media screen and (max-width: 480px) {
img { float : none ; }
}

 

スマホ表示で左右の余白が空きすぎる

ブログサイトなどを作ると本文の左右に余白が空きすぎてなんだか不自然になってしまうときがあります。本文に加えて見出しでも起こる場合があります。

見出しの余白が空きすぎなら以下のコードを追加しましょう。

@media screen and (max-width: 480px) {
h2 {
font-size : 75% ;
margin : 1em 0 0.8em 0 ; }
}

 

本文の表示領域で左右の余白が空きすぎている場合は以下のコードで対処します。

また、段落の余白や行間の高さなども調整しておきます。

スマホの時だけなので、メディアクエリを使いましょう。

@media screen and (max-width: 480px) {
p {
width : 100% ;
margin : 0 0 1.8em 0 ;
line-height : 1.7 ; }
}

 

スマホを横向きにしても文字が大きくならないようにする

スマホを横向きにすると文字が急に大きくなる現象が発生します。

ただ、これも簡単に直すことができます。

bodyタグに以下のスタイルを指定しましょう。

body { -webkit-text-size-adjust : 100% ; }

 

うまくいかなかった場合は!importantを追加してみてください。

!importantを入れるとスタイルを上書きできなくなりますが、これに関しては上書きすることは確実にないので大丈夫です。

body { -webkit-text-size-adjust : 100%!important ; }

 

また、別の方法としてviewportを指定する方法があります(こっちの方が一般的)

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

 

モバイルフレンドリーテストでチェック

モバイル フレンドリー テストというサイトできちんとレスポンシブ対応ができているかを簡単にチェックすることができます。

自分のサイトのURLを入力してチェックしてみましょう。

 

まとめ

スマホユーザーはどんどん増えているのでレスポンシブ対応は欠かせない技術となっています。

スマホで見てもレイアウトが崩れないよう、レスポンシブ対応をきちんとさせてより良いサイトを目指しましょう。