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

私が制作を始めた頃はまだ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) {}

フォントサイズ指定

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

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

 

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

よかったらシェアしてね!
目次
閉じる