この「今あるWebサイトを改善する」シリーズでは、HTMLとCSSを使ってこれまでのWebサイトからデザインを変更する方法と、その重要性について解説しています。

今回は、PC向けデザインのWebサイトをCSSのメディアクエリ（@media）を使ってスマホ対応にする方法を紹介します。

スマホ対応は、なぜ必要？

PC向けのWebサイトをスマホで見ると、レイアウトがそのまま縮小されてスマートフォンに表示されます。そうなると、以下の問題点が出てきます。

①文字が小さくて読みにくい

PC向けサイトがスマートフォンで表示されると、フォントサイズが小さくなり、文字が読みにくくなる場合があります。

②横スクロールが必要

PCレイアウトは横幅が広く設計されているため、スマートフォンでは表示が収まりきらず、横スクロールが必要になります。

③ボタンやリンクが押しづらい

PC向けサイトには小さなボタンやリンクが多く、スマートフォンでは指でタップしづらいことがあります。

④レイアウトの崩れ

スマートフォンに最適化されていないと、画像やメニューが画面に収まらず、レイアウトが崩れる場合があります。

このように、スマホ対応されていないWebサイトはユーザーにストレスを与えます。また、離脱率が高まり、アクセス数が低下するといった影響が生じるため、スマホへの対応は必要です。

スマホ対応する方法

PC向けのデザインからスマホ対応するには、CSSのメディアクエリ（@media）を使用します。
今回は、スマホ画面（768px以下の幅）になったら文字サイズを変更したい場合の例を記載します。

<p>このテキストはスマホ画面で文字サイズが変更されます。</p>

/* デフォルトの文字サイズ（PC・タブレット向け） */
p {
font-size: 24px; /* デフォルトの文字サイズ */
}

/* スマホサイズ（768px以下）の場合に文字サイズを調整 */
@media screen and (max-width: 768px) {
　p {
　　font-size: 18px; /* スマートフォン画面での文字サイズ */
　}
}

コード説明

デフォルトの文字サイズ設定

まずは、［p］タグに font-size: 24px; 指定をします。これはPCやタブレットなど、画面幅が768pxを超えるデバイスに適用される文字サイズです。

※下記のメディアクエリを指定してない限りはすべててのデバイス（PC、スマートフォン、タブレット等）に同じフォントサイズが適用されます。

メディアクエリでの文字サイズ変更

@media screen and (max-width: 768px)の［{}］ 中に、［p］タグの font-size を18pxを指定します。これにより、画面幅が768px以下のスマートフォン画面においてのみ、［p］タグの font-size が18pxに変更されます。

※メディアクエリの書き方は、デスクトップファースト［@media screen and (max-width: 768px) 画面幅が768px以下］とモバイルファースト［@media screen and (min-width: 768px) 画面幅が768px以上］があるので、修正を行う際はできるだけ統一してください。

※デスクトップファーストとモバイルファーストの違いについては、今後当ブログで解説する予定です。

このように、メディアクエリを使えば簡単に、PC向けデザインからスマホ用に切り替えができます。どのデバイスでも使いやすく、ユーザーが快適に利用できるサイトに変更していきましょう。