レスポンシブWebデザインでサイトを作る

2017年3月20日更新日

2017年4月15日カテゴリー

レスポンシブWebデザインとは単一のファイルでパソコンやスマートフォン、タブレット端末など複数の機器や画面サイズに対応させる方法です。

この手法のメリットはPC用ページ、スマホ用ページというようにデバイスごとにサイトを構築する必要がなくなるので、サイト作成の手間が省けて管理もしやすくなるということです。

デバイスごとの表示を確認

PCのブラウザでウインドウを伸ばしたり縮めたりすれば自由なサイズで確認ができますが、デバイスごとのサイズで表示を確認するにはGoogle Chrome のデベロッパーツールを使えば確認ができます。

確認したいWebページ上で右クリック　→　要素を検証で、右上辺りに虫眼鏡とスマホのアイコンがありスマホのアイコンをクリックすることでDevice Modeが有効になり、いろいろなデバイスに合わせたサイズで確認ができます。

サンプル
使用したファイルはHTMLが1つ、サイト全体のスタイル構成にCSSが1つ、ナビゲーションメニューにJavascript（js）のライブラリjQueryを1つの計3つだけで形成。

スタイル構成もHTML内に記述すればHTMLファイル1つだけ編集すればレスポンシブWebが作成できます。
[ad#ads]

上記サンプルではHTMLファイルで作成しましたが、複数ページになるとヘッダーやフッターなどを修正するときにはすべてのページをを修正しないといけません。

それだと効率が悪いので、ヘッダーやフッター、サイドバーなどを部品として作成し、表示するときに各パーツをメインコンテンツに読み込む（PHPでインクルード）形にすればメンテナンスが楽になります。
2カラムサンプル / 3カラムサンプル

2カラムサンプルではメインコンテンツとヘッダー、フッター、サイドバーのPHPファイル４つとスタイル構成にCSSが1つ、ナビゲーションメニューにjQuery（javascript）を1つと各要素の高さ合わせにjquery.matchHeight.jsを1つの計7つで構成。

3カラムサンプルはさらにサイドバーを1つ増やした構成。

新しいコンテンツページ作成ではメインコンテンツとなるファイルにヘッダー、フッター、サイドバーをインクルード（読み込み）だけして、あとはコンテンツ内容だけを記述すればいい。

ヘッダーやフッターなどを修正するときは、そのファイルだけ修正すればあとは自動ですべてのページに読み込まれる。

レスポンシブメニューの作り方については参考サイトで。

タグ: 作成

こちらの記事もオススメです