【スマホからのアクセスアップ】レスポンシブ対応CSSでPCとスマホの見た目を変える
スマートフォンやタブレットの急速な普及を背景として、パソコンよりも小さな画面からWEBサイトを見る機会は多くなりました。
通勤・通学の時間や、休憩の合間などにスマホをいじっている人は、もはや違和感のない日常のワンシーンになっています。
そのような状況の中、スマホから見たサイトがPCと同じ文字の大きさであったり、画面の幅があっていなかったりすると、途端に見る気がなくなってしまいます。
今回はスマホ・タブレット向けにデザインを調整する方法についてご紹介したいと思います。
【この記事を読むメリット 】
- スマホ・タブレット向けのデザイン設定ができるようになる
スマホ対応は基本です！
それでは今回のコンテンツです。
画面サイズに合わせて見た目を変える
閲覧者が見ている端末によって、WEBサイトの見え方を変えることをレスポンシブ対応といいます。
画面のサイズによって、レスポンス（反応）して見た目が変わることからそのように呼ばれています。
レスポンシブ対応はこれからのWEB開発に必須となりますので、ぜひ導入して頂ければと思います。
レスポンシブ対応の方法
まずはCSSのコードの書き方からご紹介します。
「@media screen and (max-width: XXXpx) {}」と記載します。
@media screen and (max-width: 480px) {
.related-entries-image{
width:60px;
}
}
上記の例の場合、画面のサイズが480px（ピクセル）より小さい場合、
.related-entries-imageという名前の要素の幅を60pxにするという設定になります。
通常のCSSの書き方にプラスして、画面サイズによる条件を追加するイメージです。
↓通常のCSSの書き方はこちら↓
↓はてなブログで設定をする方はこちら↓
はてなブログのCSSでは480pxを基準に設定されていますが、ここの数値は必要に応じて変えてみてください。
こちらの記載方法では、画面サイズの上限を決めて設定ができますが、「max-width」を「min-width」に変えることで、下限を決めることもできます。
@media screen and (min-width: 1200px) {}とすれば、画面サイズが1200px以上の場合にのみ、有効になる設定ができます。
設定自体は1行追加するだけなので簡単。
レスポンシブ活用例
それでは、どのような場合にレスポンシブ設定を活用できるでしょうか。
画面の大きさによって設定を変えるべきものが対象になりますので、色や形ではなく、サイズ・配置がメインになります。
- 文字の大きさを変える
- 画像・ハコの大きさを変える
- 配置を変える
- スマホのときは表示しない
１．文字の大きさを変える
PCでは大きめの文字を表示し、スマホでは文字を小さくする場合、下記のような書き方ができます。
p{
font-size:18px;
}
@media screen and (max-width: 480px) {
p{
font-size:14px;
}
}
上から読むと、まず文字の大きさを18pxに設定し、そのあと画面サイズが480pxより小さい場合には14pxに設定し直しています。
これにより、パソコンやタブレットなど、ある程度大きな画面から見た場合には大きめの文字で、スマホから見た場合には小さ目の文字で表示することが可能になります。
フォントサイズの変更は基本。導入も簡単です。
２．画像・ハコの大きさを変える
画像や、まとめ・要約BOXの大きさを変える場合にも、考え方は先ほどと同じです。
img{
width:80%;
}
@media screen and (max-width: 480px) {
img{
width:90%;
}
}
上から読むと、イメージ（画像）の大きさを80%に設定し、そのあと画面サイズが480pxより小さい場合には90%に設定し直しています。
スマホから見るとどうしても画像のサイズが小さくなってしまうため、逆にパソコンより比率を上げる場合もあります。
３．配置を変える
こちらはやや難しいですが、書き方は同じです。
img{
margin-left:30px;
}
@media screen and (max-width: 480px) {
img{
margin-left:10px;
}
}
上から読むと、イメージ（画像）の左の余白を30pxに設定し、そのあと画面サイズが480pxより小さい場合には10pxに設定し直しています。
これも画面サイズによって、自然に見える余白が異なるために設定を変えている例となります。
小さな違和感もサイト離脱の原因に。ケアしましょう。
４．スマホのときは表示しない
アドセンスの広告など、スマホでは存在感が大きくなってしまうため、表示する数を少なくしたいときに効果的です。
.adsense{
display:block;
}
@media screen and (max-width: 480px) {
.adsense{
display:none;
}
}
上から読むと、アドセンス要素（をクラスで設定する前提で）の表示をありに設定し、そのあと画面サイズが480pxより小さい場合には表示なしに設定し直しています。
スマホのみ表示・パソコンのみ表示を使い分けたいときに便利な書き方です。、
パソコンでは気にならない広告も、スマホでは存在感抜群。
閲覧者への配慮を。
レスポンシブを使いこなそう
ご紹介した3つの例のように、レスポンシブのコードの書き方自体は難しくはありません。
どのような設定をすればより見やすくなるのかを考えて、いろいろな設定を試してみてはいかがでしょうか。
ご覧頂きありがとうございました。
↓スマホのみで表示するアイコンメニューバーはこちら↓
このブログははてなブログで運営しています。
ブックマーク・読者登録いただけると励みになります。
