レスポンシブウェブデザインにするためのCSSの使い方

2020年12月25日CSS

スマートフォンやタブレットやデスクトップといったPCのどの画面からでも快適に最適な表示ができることをレスポンシブウェブデザインといいます。
いろんな媒体で閲覧される近年では必須の知識なので、そのためのCSSの使い方をマスターしていきましょう。

viewportの設定

viewportというのは、表示領域のことです。

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

上記をheadタグ内に記述することで、スマホ画面でもノートパソコンの画面でも文字などが最適なサイズになります。
逆にこの記述を書かないと、スマホで見たときでもパソコンと同じ画面幅になり、文字サイズはとても小さく読みづらくなります。
content="width=device-widthというのは、viewport、つまり表示領域をデバイスの幅に合わせるという意味で、その大きさをinitial-scale=1として、等倍で設定しています。

mediaクエリの使い方

mediaクエリはCSSに記述します。
mediaクエリを使うことで、スマホ、タブレット、PCなどそれぞれの画面幅に合わせたレイアウトや細かい表示を実現できます。

@media (min-width: 600px) and (max-width: 800px) {
処理内容
}

たとえば、上記のように書けば、600px〜800pxまでの表示領域の場合の処理を制御できます。
また、注意点としては、()の前後の半角空白は必ず必要なので、入れ忘れていないか確認しましょう。

モバイルファーストで作るとは

近年では、スマホでWebサイトなどを閲覧することが増えたこともあり、Googleといった大手の企業が「モバイルファースト」のWebサイトを推奨しています。
モバイルファーストかどうかはGoogleの検索アルゴリズムに組み込まれており、SEO(検索エンジン最適化)にも影響する項目となっています。

モバイルファーストで作るとは、実際にはどういうことなのでしょうか？
具体的には次の順番でコードや表示方法を考えていきます。

CSSのベースをスマホを主体にして書く

モバイルファーストにするためには、いくつか条件がありますが、要するにスマートフォンで見やすいWebサイトになっているかどうかが重要になります。

CSSでモバイルファーストにするためにできる一番大切なことは、記述するCSSの順番をスマホベースでまずは書くことです。そしてそのためには、mediaクエリを使ってその他の大きめの表示領域を持つデバイスを書いていきます。

@media (min-width: 0px) and (max-width: 599px) {
処理内容
}
@media (min-width: 600px) and (max-width: 799px) {
処理内容
}
@media (min-width: 800px) {
処理内容
}

とかくとスマホ用（スモールスクリーン）、ipadなど用（ミディアムスクリーン）、PC用（ラージスクリーン）三段階にできますね。

ただ、これでは余分な記述がたくさんある状態です。
CSSは必要なものだけを先に書いて、表示領域が変わったときに変わってほしいものを後に書けばいいですね。その最初に記述する必要をPCベースで書くのではなく、スマホベースで書けばOKですね。

mediaクエリも先に共通のものを記述していきます。
モバイルファーストなら、スマホ向けの（小さいもの）から順番に書いていきます。

そのため、下のように共通スタイルという名でコメントしておいて、スマホ向けのものをかくといいです。
また、上の記述にある「and (max-width: 799px)」というのも、その後に(min-width: 800px) と書いているので、必要ありません。
不要な部分を削ぎ落とすと、次のような記述になります。

/*共通スタイル*/
処理内容
@media (min-width: 600px) {
処理内容
}
@media (min-width: 800px) {
処理内容
}

asideタグなど、共通の部分で非表示にしておきたいアイテムがあるときは、そのアイテムに次のようなCSSの記述を足せばOKです。

display: none;

そして、表示したいmediaクエリでdisplay:block;として、非表示にしたアイテムの初期値と幅を設定してあげるといいです。

CSS

Posted by devsakaso