CSSで簡単にHTMLをレスポンシブ対応にする方法を解説

現代はスマートフォンやタブレットを一人が一台以上持っています。このような状況に伴い、Webサイトを閲覧するデバイスもPCからスマートフォン、タブレットへ移行しています。総務省の情報通信白書でも「スマートフォンでのインターネット利用がパソコンを上回っている」という調査結果があります。

参考：総務省｜令和元年版 情報通信白書｜インターネットの利用状況

https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r01/html/nd232120.html

総務省

そのため、HTMLで表示したWebページにはレスポンシブ対応が求められています。レスポンシブ対応とは同じページでも画面幅によってレイアウトを調整・変更する機能です。クラウドソーシングのWeb制作案件を見ても、ほとんどがレスポンシブ対応を必須としています。

本記事ではCSSで簡単にHTMLをレスポンシブ対応にする方法を解説します。

HTMLをレスポンシブ対応にする方法

HEADタグ内にmetaタグを設定する

HTMLファイルのHEADタグに下記のコードを書きます。

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

利用者のアクセス時の機器から、画面サイズなどの情報を取得します。取得した画面サイズからPCかタブレットかスマートフォンかを判断します。判断の結果から、CSSなどのファイルからメディアクエリに従って、表示を切り替えます。

CSSファイルにメディアクエリを作成する

メディアクエリとは端末の種類や特性に応じてWebサイトのレイアウトなどを変更する機能です。レスポンシブデザインでは画面サイズを指定することで、画面サイズ毎にコードを指定することができます。

基本構文は以下の通りです。

@media screen and (min-width: 768px) {
  /* CSSのコード */
}

実際には切り替えるpxを指定します。この場合、min-widthなので768px以上の画面サイズであればCSSが適用されます。

HTMLをレスポンシブにする上でおすすめのやり方

PC用、タブレット用、スマートフォン用に分ける

まず、HTMLをレスポンシブデザイン対応させるときにはPC、タブレット、スマートフォンの3種類で分けることをおすすめします。あまり細かく区切りすぎるとファイルが重くなるためおすすめしません。

おすすめの区分けとしては、以下の通りです。

数字はこの辺り程度のイメージです。書籍によってはPCが960px～となったりしているので、ざっくりと3つに分けて、自分のWebページの動きから判断するほうがいいと思います。

ハンバーガーメニューを利用する

メニューバーはレイアウト崩れを起こしやすいので、ハンバーガーメニューを使うことをおすすめします。ハンバーガーメニューとは三本の横棒をクリックするとメニュー画面が現れる機能のことです。

ページのレイアウト崩れを防いだり、必要な情報のみをページ内に表示させるため、スッキリとしたページとなります。ハンバーガーメニューを作るにはjQueryというJavaScriptのライブラリを使うと簡単に実装することができます。

ハンバーガーメニューの作り方については下記のページを参考にしてみてください。コード例として載せています。

画像やブロックを縦に並べる

スマートフォンのような幅が狭いデバイスを使用する場合は、横並びにすると文字が小さくなる、横のスクロールが必要となるため、見づらいサイトになってしまいます。そのため、幅に応じて、画像やブロックは縦に並べるようにすることをおすすめします。

そんなときに使いやすいCSSが「display:flex;」です。PCページで横並びにするときは「float:left(right)」を使うこともあると思います。しかし、レスポンシブ対応するならば、display:flex;の方が便利です。

使い方は下記のページを参照してください。

レスポンシブ対応を確認する方法

開発者ツール（ディベロッパーツール）を使う

レスポンス対応のコードを書いた後、確認する方法としてブラウザの開発者ツールがあります。ブラウザによってはディベロッパーツールと呼ばれることもあります。開発者ツールはHTML/CSSのコードやJavaScirptの動きを確認することができます。

やり方は設定画面から開発者ツール（ディベロッパーツール）を選択します（下図中赤枠部）。Windowsであれば「Ctrl + Shift + I」で開くこともできます。

開発者ツールを開いたら左上の「Toggle device Toolbar」を選択します（下図赤枠）。すると、デバイスを選ぶ部分が上にあるので、そこから表示させたいデバイスを選択します（下図青枠）。下まで確認してレイアウト崩れや変な構造になっていないか確認することをおすすめします。

デバイスで実際に確認する

作ったページを実際のデバイスで確認することもおすすめします。スマートフォンであれば持っている人がほとんだと思います。持っていない場合は前述の開発者ツールを使う必要があります。

しかし、PCで見るのと実際のデバイスで見るのは印象が違います。より見やすいページにするためにデバイスで実際に確認する方がおすすめです。

まとめ

スマートフォンやタブレットの普及によりレスポンシブ対応のページ作成は必須のスキルとなっています。HTMLがPCでしっかり表示されていても画面幅が狭くなった途端にレイアウト崩れを起こし、とても見にくいサイトになります。

スマートフォンでWebページを見るようになった今、幅を狭くしてレイアウト崩れを起こすのは集客においても致命的です。レイアウト崩れが起こらないようにレスポンシブ対応のページを作るように心掛けることが大切です。

もし、スマートフォン表示でレイアウト崩れが起こったとしたら、開発者ツールを使って原因を掴み、対応するよることをおすすめします。