ホームページのレスポンシブ化に必要な知識は？

2022年05月28日 / 2025年04月05日

レスポンシブWebデザインとは？

レスポンシブwebデザインとは、webサイトを閲覧するデバイスによって最適なレイアウトで表示させる方法です。

私が初めて自分専用のパソコンを購入して、webサイトというモノに出会った時はケータイはガラケーのみで、ケータイ用のサイトを閲覧するのみで、PC用のウェブサイトを直接見るという事はほぼありませんでした。

今と違って、パソコン用のサイトを見るとパケ代が膨大にかかるという時代でしたから、ケータイから得られる情報って限られていたと思います。

しかし、今はスマホ・タブレット・PCと様々なデバイスからwebサイトを閲覧することができるようになりました。

そのデバイス一つ一つの画面のサイズに合わせて、より見やすいページを動的に表示する技術をレスポンシブwebデザインといいます。

レスポンシブWebデザインを実際に見てみる

言葉で説明しても、実際よくわからないなーという方は、このページを開いているブラウザを横に縮小させてみてください。表示する幅に合わせて、ブログの枠や画像の幅が変わるようになっています。

これが、レスポンシブWebデザインです。

レスポンシブWebデザインを実現するために必要な知識って？

レスポンシブWebデザインに対応したWebページを作成するためには、HTML5とCSS3の知識が必要です。

2021年1月にHTML5が廃止され、現在はHTML Living Standardが標準仕様となっていますが

今のところ違いは少ないので、これから始める方はHTML5に対応した参考書で勉強してからHTML Living Standardとの違いを確認すればいいと思います。

レスポンシブWebデザインの要であるレイアウトを切り替えて表示する仕組みは、CSS3からできるようになりました。

レスポンシブWebデザインには、HTML5+CSS3の知識が必要

レスポンシブWebデザインを実現する３つの技術

１．メディアクエリ

メディアクエリは、閲覧するメディア（デバイス）のスクリーンサイズを判別して適切なレイアウトに振り分けて表示することができる仕組みです。

メディアクエリのCSS記述方法

@media screen and (min-width: 600px){

     ここにCSSの設定を記入します

}

レスポンシブデザインの場合は、スクリーンの横幅を指定するので@mediaの後にscreen and(min-width:○○px)と記述します。min-widthは、最小値を指定する要素なので、○○px以上のスクリーンは以下を適用する。という指示になります。

２．フルードグリッド

フルードグリッドは、同じデバイスでもスクリーンの大きさに合わせて、ボックスや間隔・フォントの大きさを変化させる仕組みです。

フルードグリッドのCSS記述方法

各要素のサイズなどを絶対値(px)ではなく、相対値(%,em,rem)で指定する

３．フルードイメージ

要素やフォントだけでなく、画像もスクリーンの大きさに合わせて適切なサイズを表示する必要があります。そこで使用するのが、フルードイメージと呼ばれる技術です。

フルードイメージのCSS記述方法

img {max-width: 100%;}

以上が、レスポンシブWebデザインを実現するために必要な基本の技術です。

この３つを使用して、スマホからPCまで１つのHTMLでサイト表示できるようにすることで、スマホ用・PC用とURLを変更することなく快適に閲覧できるようになります。

レスポンシブWebデザインにするメリット

レスポンシブデザインにするメリットは、先に話した通り色んなデバイスからのアクセスも１つのサイトで対応できるようになることです。

１つのサイトで対応出来るようになるとなにが良いの？という話になると、例えば以下のことがあります。

見てくれる人も、運営する人も便利になるって素晴らしい技術です。今後は、実際にレスポンシブ化に関する方法なども書いていければイイなと思います。