レスポンシブデザインを極めよう！2020年版メディアクエリとフォントサイズの使い方

2020年4月3日2022年10月24日

レスポンシブデザインを極めよう！2020年版メディアクエリとフォントサイズの使い方

私が制作を始めた頃はまだPCサイトのデザインを重要視する制作会社も多かったのですが、最近ではスマートフォンやタブレットの高速な普及によって（若い世代はもはやPCを持たない人も多いとか･･･）、ユーザーの多くはそういった端末から検索したり、SNSアプリからの流入が多くを占めます。
そんな中で「レスポンシブWebデザイン」というスキルは、Webクリエイターやコーダーを目指すには必須なスキルという位置づけになっています。

そんな手法の中でもベースとなるメディアクエリについて、まとめてみます。

メディアクエリとは？

一般的な機器の種類（プリンタと画面など）や特定の特性（画面の解像度やブラウザーのビューポートの幅など）に応じてWebサイトやアプリのCSSの仕様を変更したいときに便利です。
メディアクエリは以下の用途で使用されます。
CSS の @media および @import @-規則により、条件付きでスタイルを適用する。
MDN Web Docsより

メディアクエリとは、CSS2時代に使われていたmedeaタイプが発展したCSS3の新しい要素です。

2020年以降はこのフレームワークでいこう

Media Queriesで切り替える表示サイズ

メディアクエリの切り替えについては「px」「em」「rem」などの様々な方法がありますが、昨今では「em」が推奨されています。
推奨理由について詳しくはコリスさんのこちらの記事[CSS]Media Queriesで使う単位はpx, em, remのどれが適しているか検証 -px指定は注意が必要で紹介されていますので、是非参考にしてみてくださいね。

私がよく使うメディアクエリのCSS

/* スマホ縦   〜480px
------------------------------ */
@media screen and ( max-width:30em) {}
 
/* スマホ横   〜480px~600px
------------------------------ */
@media screen and (min-width:30em) and ( max-width:37.5em) {}
 
/* タブレット 〜600px~960px
------------------------------ */ 
@media screen and (min-width:37.5em) and ( max-width:60em) {}
 
/* 小型PC     〜960px~1280px
------------------------------ */
@media screen and (min-width:60em) and ( max-width:80em) {}
 
/* 大型PC     1280px~
------------------------------ */ 
@media screen and (min-width:80em) {}
@media print,screen and (max-width: 480px){}
@media print,screen and (min-width: 481px) {}
@media print,screen and (max-width: 767px) {}
@media print,screen and (min-width: 768px) {}
@media print,screen and (min-width: 768px) and (max-width: 980px) {}
@media print,screen and (max-width: 900px) {}
@media print,screen and (min-width: 768px) and (max-width: 900px) {}
@media print,screen and (min-width: 901px) {}
@media print,screen and (max-width: 980px) {}
@media print,screen and (min-width: 981px) {}
@media print,screen and (min-width: 1000px) {}
@media print,screen and (max-width: 1023px) {}
@media print,screen and (min-width: 1024px) {}
@media print,screen and (max-width: 1199px) {}
@media print,screen and (min-width: 1200px) {}

＜覚書＞
iPhone：320px=20em、480px=30emとなる。
　→　portraitもlandscapeも1カラムで表示
iPad：768px=48emとなるのでportraitで2カラム
　→　1024px=64emのlandscapeで3カラム

フォントサイズ指定

/* 10pxを標準サイズに調整
------------------------------ */ 
html { font-size: 62.5%; }

/* サイトの文字サイズを16pxをベースに指定
------------------------------ */ 
body { font-size: 1.6rem; }
p  { font-size: 1.6rem; }

URLをコピーしました！

この記事を書いた人

今田紋奈

埼玉県川口市で、自営業や起業家のホームページ制作を行っいます。
Web制作会社に7年務めたのち独立。Web制作歴12年、2500件以上のサイト制作に携わり、WordPressサイトを得意とし「作って終わり」にしない、結果が出るサイトであることを大切にしてます。「10人いれば10通りの最適なサイトがある」という信念のもと、型にハマったサイトづくりではなく、マーケティングから考えた、その人のビジネスにとって一番最適なサイトをご提案。技術面で不安のあるWebデザイナーのシステム面のサポートも行っております。