PCでもスマートフォンでも、自動サイズ調節する「レスポンシブデザイン対応」ができている

HTMLファイルの中に「viewport」を設定する

自社サイトが「レスポンシブデザイン」ではなかった場合は、デザイナー・エンジニアなどと相談して、Webサイトの改修を検討するのが良いかもしれません。BtoB企業であったとしてもスマートフォンでアクセスする利用者は一定数いますのでビジネスチャンスを逃さないためにも対応するのが望ましいです。

その場合、まず取り掛かるのが「viewport」の設定です。

viewportとは、ページを構成するHTMLの記述において横幅サイズを設定するタグのことです。基本的には「headタグ」の部分に記述して、指定することができます。以下のような記述を、HTMLファイル内に追加しましょう。

※content=width=device-width：デバイスの幅に合わせてページ表示させるという指定をしています。
※initial-scale=1.0：ページの表示倍率ですが、通常は1倍なので1.0です。

デバイスごとの横幅サイズを条件設定するために、CSSを記述する

次に、PC用、タブレット用、スマートフォン用などでそれぞれ最小～最大幅の設定をCSSで設定しましょう。ちょっと面倒ですが、それぞれのデバイスごとにCSSを記述することで、閲覧デバイスごとにページ表示サイズが自動で切り替えられる「レスポンシブデザイン」が実現します。

※CSS：Cascading Style Sheets（カスケーディング・スタイル・シート）とは、Webページのデザインレイアウトを設定するための言語で、情報要素を設定するための「HTMLファイル」とは別の「CCSファイル」を用意して、指定します。

CSSファイルの中に、以下のように記述していきましょう。

※639px以下をスマーフォン、640-1023pxをタブレット、1024px以上をPC対応とした場合
※PCとTab以外がスマホ記述なため、スマホではメディアクエリを使用しない

このあたりは、実際にHTMLコードを記述しているエンジニア・プログラマでないとわかりづらい部分がありますが、社内で相談しながら、どのような閲覧環境にも対応できるWebサイト作りを心がけましょう。