スマホでも見れるようにレスポンシブ対応する時のコーディング注意点。

公開日：2020/04/03

#css #HP #コーディング #未経験・初心者向け

スマホでも見れるようにレスポンシブ対応する時のコーディング注意点。

サイト制作する上で、スマホ対応にすることは必須になります。スマホがない時代は、モバイルサイトを別に作っていたりもしましたが、現在ではスマホだけでなくタブレットなどもあり、サイト幅はデバイスによって異なります。

ですが、どんなサイトでも対応できるサイトを作るためにはレスポンシブ対応することが必要です。

そういったレスポンシブ対応する際に、デザインが崩れないようにコーディングすることが重要です。

今回は、レスポンシブ対応する際によく使うcssの記述をご紹介します。

widthの％指定
max-widthで幅の最大を指定
メディアクエリ・ブレイクポイントの指定
displayでblockとnoneで表示・非表示をする
今回のまとめ

widthの％指定

パソコンやスマホ・タブレットに対して１つのサイトを適用させるには、サイトやコンテンツ幅を明確に指定すると画面外に飛び出たり、デザインが崩れる原因にもなります。

いろいろなデバイスで表示させるためにも幅をpxなどの数値でしていするのではなく、％で指定することで親タグを基準に幅を可変してくれるようになります。（一番外側のタグは画面幅が基準になる）

widthの％指定する際のcss記述例

header {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

header {

width: 100%;

max-width: 1040px;

margin: 0 auto;

}

max-widthで幅の最大を指定

上記の記述例にも記載していますが、widthを％で指定することにより画面が大きいパソコンなどはwidth: 100%だけ記述すると横幅が大きすぎるサイトになってしまいます。そうすると見にくく、サイトとして成り立たないようにもなります。

また画像などもデバイスによって可変したい場合などは、max-widthで最大の大きさを決めてあげることにより、画像の本来の大きさ以上に伸びないので粗くなったりすることも防げます。

max-widthのcss記述例（元画像より大きくしない記述）

※画像の横幅を200pxとする

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

img {

max-width: 200px;

width: 100%;

height: auto;

}

こうすることで200px以上に大きくならず、またスマホなどで観覧した際には画像がスマホの画面に合わせて縮小するようになります。

メディアクエリ・ブレイクポイントの指定

ブレイクポイントを指定することにより、指定した幅以下（以上）になると別のcssを上書きしてくれるようになります。

これを記述するだけで基準となるcssの記述を継承しつつブレイクポイントで指定した記述を上書きすることができます。

ブレイクポイントの記述例

.box {
  width: 80%;
  background-color: red;
  border: 2px solid green;
  border-radius: 5px;
  padding: 3%;
}

@media screen and (max-width: 768px) {
  .box {
    width: 100%;
    padding: 1%;
  }
}

@media screen and (max-width: 480px) {
  .box {
    background-color: blue;
    border: 2px solid black;
  }
}

.box {

width: 80%;

background-color: red;

border: 2px solid green;

border-radius: 5px;

padding: 3%;

}

@media screen and (max-width: 768px) {

.box {

width: 100%;

padding: 1%;

}

@media screen and (max-width: 480px) {

.box {

background-color: blue;

border: 2px solid black;

}

上記の記述をすると769px以上の横幅のデバイスでは1行目から7行目の指定が適応されます。これが基準となる指定になり、768px～481pxの横幅になると基準となる指定を継承しつつ10行目から13行目を上書きして表示してくれます。

また、480px以下になると768px～481pxで表示してくれた内容に更に16行目から19行目を上書きされるようになります。

これにより同じcssを記述する必要ななくなり、公開した後でも管理がしやすくなります。

※ブレイクポイントは制作会社や制作者によって異なります。

displayでblockとnoneで表示・非表示をする

下記の記述は私が個人的に使うことが多く、制作者によってはあまり使われない方もいます。

パソコンでは表示させたいがスマホでは非表示にしたコンテンツがあったり、またその逆もあります。１つのhtmlでデザインを表現するためにナビゲーションなどの位置を動かせないなどのデザインでの悩みをこれで解決することもあります。

先程のブレイクポイントを使って、デバイス幅で表示・非表示をします。

幅によって表示・非表示を指定

.sp {
  display: none;
}
.pc {
  display: block;
}

@media screen and (max-width: 480px) {
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
}

.sp {

display: none;

}

.pc {

display: block;

}

@media screen and (max-width: 480px) {

.sp {

display: block;

}

.pc {

display: none;

}

クラス名spと記述したタグは480px以下になると表示され、クラス名pcと記述したタグは逆に480px以下になると表示されていたものが非表示になります。

これを利用して、スマホとパソコンで表示するコンテンツやナビゲーションの表示位置を変更することができます。

※ナビゲーションの表示位置の変更にはhtmlにナビゲーションをスマホ用とパソコン用の2つを記述する必要があります

今回のまとめ

今回ご紹介した記述方法は基本的なものになります。経験者であれば知ってると思われることですが、初めて制作する方には少しでも参考になればと思っています。

また、違う方法で対応することもできたりと、制作者や制作会社によってコーディングルールがあると思いますので、それに見合った方法で制作することをオススメします。

レスポンシブ対応でスマホでデザインが崩れるという方は、ぜひ参考にしてみてください。