記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

レスポンシブレイアウトにするためのHTMLの設定方法

HTMLであってもWordPressのようなPHPで構築するWebサイトであっても、共通するのは「レスポンシブデザイン」が必須に近いということです。本記事では初心者こそ抑えておきたいレスポンシブデザインについての基礎と、HTMLファイル内で実装できるレスポンシブ対応を解説します。

カテゴリ: HTML/CSS

今回はHTMLを使ったレスポンシブ対応について解説します。スマートフォンやタブレットを使う人を当然のように見かける現在では、Web制作を行う上でレスポンシブ対応をするのが当たり前になりました。

各デバイスごとに見やすいレスポンシブデザインを組み込まないWebサイトは、Google検索にヒットしにくくなるなどのトラブルが発生します。

Web制作では誰もが皆使うHTMLも、レスポンシブ対応が必要です。

レスポンシブ対応をするためにHTMLでできることは以下の3つです。

  • HTMLで出来るレスポンシブ対応①Viewportの設定
  • HTMLで出来るレスポンシブ対応②メディアクエリの設定
  • HTMLで出来るレスポンシブ対応③デバイスごとの画像切り替え

そもそもレスポンシブデザインとは何かという基礎から抑えて、HTMLで出来るレスポンシブ対応を把握しましょう。

レスポンシブデザインとは何?

レスポンシブデザインの定義

レスポンシブデザインは「閲覧ユーザーの使用するデバイスまたはブラウザに合わせて変化する見やすいWebサイトのデザイン」のことです。Web制作でレスポンシブデザインと言うと、大抵は各デバイスのサイズに合わせたデザインを示します。

実際にPC表示、タブレット表示、スマートフォン表示でミンウェブのサイトを見てみましょう。

  • PC表示
  • タブレット表示
  • スマートフォン表示

PC表示ではヘッダーメニューが大きく横に広がっているのに対して、タブレット表示やスマートフォン表示ではヘッダーメニューがボタン式と横スクロール式の2つに変化しているのがわかります。

このレスポンシブデザインは、後程解説するViewportの設定、メディアクエリの設定によって実装されています。

レスポンシブデザインのメリット

レスポンシブデザインを採用してWebサイトを制作すると、下記のような嬉しいメリットが発生します。

  • 1種類のHTMLファイルで各デバイスに合わせた表示ができる
  • Googleの検索順位が上がりやすい
  • 更新やメンテナンス、管理がしやすい

1種類のHTMLファイルでレスポンシブデザインを実装できるということは、スマートフォン表示とPC表示でURLを分ける必要がないということです。それぞれでURLが分かれているとユーザーが見つけにくかったり共有しにくかったりということが起きますが、レスポンシブデザインを採用すればURLは1つで大丈夫です。

また、サイトを構成するHTMLやCSSファイルがまとまっているため、更新やメンテナンスがしやすくなります。加えて、Webサイトを構成するデータ構造がシンプルになるため、SEO効果も狙うことが可能です。

HTMLで出来るレスポンシブ対応①Viewportの設定

HTMLだけではなく、WordPressのようなPHPを使うWeb制作でもレスポンシブデザインを実装するために必要なのがVIewportの設定です。

Viewportとは?

Viewportは「各デバイスで表示する横幅サイズ(領域)」のことを意味します。一般的には、各ブラウザで表示されるアドレスバー、ブラウザタブなどを除いたWebサイトのためにコーディングされた部分だけを示します。

PCからしかWebサイトを見なかった時とは異なり、今はタブレットやスマートフォンなどPCに比べて小さい画面幅で表示することがほとんどです。Viewportを設定せず、PCと同じ倍率でスマートフォンからブラウザを表示すると見づらい印象を与えます。

Viewportの設定方法

ViewportはHTMLの冒頭に書く<head></head>タグ内にmetaタグとして記載します。万能的に使えるViewportのコードは以下のような書き方です。

このコードではwidth(横幅)と初期表示の倍率を設定することで、スムーズにレスポンシブデザインを実装しています。以下にそれぞれがどういう設定をしているのかを記載しますので、参考にしてみてください。

  • width=device-width:Viewportの横幅を設定しており、初期値は960pxが設定されています。pxで設定することもできますが、レスポンシブデザインを実装する場合には使用デバイスのサイズ幅に合う表示にするdevice-widthを設定することがほとんどです。
  • initial-scale=1:表示するWebサイトの倍率を設定しています。これは設定しない場合には自動でinitial-scale=1が設定されます。

HTMLで出来るレスポンシブ対応②メディアクエリの設定

メディアクエリを設定した上でコーディングをすることで、横幅が異なる各デバイスごとに表示を変えるレスポンシブデザインは実装できます。

メディアクエリとは?

さまざまな種類が存在するユーザーのデバイスのサイズや環境に合わせて、Webサイト上の表示を適切に変更するために設定する項目です。

レスポンシブデザインでのメディアクエリは、設定することで主にデバイスサイズに合わせてデザインが変化するものとして使われています。メディアクエリを設定することで、各デバイスのサイズに合わせて適用するCSSファイルを変更することが可能です。

メディアクエリの設定方法

メディアクエリを設定するには、HTMLファイルに直書きする方法とCSSファイルに指定する方法の2つがあります。今回はHTMLファイル内に<link>タグを使って書く方法を解説します。

HTMLファイルへの書き方

この方法では、HTMLファイルの<head></head>タグ内に記載します。よく使われるCSSファイルへの指定との違いはないため、管理方法や保守要件によって使い分けましょう。

このコードでは画面の横幅サイズが520px以下の時はstyle.cssを読み込むという指定をしています。520px以上の時にはstyle.cssは読み込みません。

実際に制作時に使う場合には、複数のメディアクエリとCSSファイルを指定することが可能です。

もしメディアクエリを520px以上960px以下の場合に指定したい際には以下のように記載しましょう。

HTMLで出来るレスポンシブ対応③デバイスごとの画像切り替え

HTMLファイル内で出来るレスポンシブ対応の1つに、picture要素が挙げられます。

picture要素とは

閲覧デバイスの横幅サイズや画像自体のサイズなど、さまざまな条件を複合した環境の中で最適な画像を表示するための機能をpicture要素といいます。画像を表示する際に使われる<img>タグと<source>タグを合わせて使うことで、画面幅に合わせて画像を変更したり、ブラウザが対応できる画像形式を表示したりすることができます。

picture要素の設定方法

picture要素をHTMLファイル内で使用する際には、任意の数の<sourse>タグと1つの<img>タグを合わせて使います。

実際にレスポンシブデザインを実装するための書き方としては、media属性にメディアクエリを記載する書き方があります。

メディアクエリに合わせて画像を切り替えることができますが、<source>タグは上から順番に読み込まれます。そのため、以下のようなコードではpicture_aは表示されません。

picture要素を使用する場合には、記載順に注意しましょう。

まとめ

HTMLを使ったレスポンシブ対応について解説しました。CSSファイル内でメディアクエリを設定する以外に、HTMLファイル内で実装可能なレスポンシブ対応は以下の3つです。

  • Viewportを設定する
  • <link>タグでメディアクエリを設定する
  • picture要素で画像を切り替える

レスポンシブデザインを無理にすべてCSSファイル内で実現するのではなく、状況に合わせてHTML内でもレスポンシブ対応をしましょう!

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。