HOME » ホームページ制作 » レスポンシブデザインにする方法

レスポンシブデザインにする方法

2016年01月27日MICホームページ制作

『パソコン、タブレット、スマホ・携帯』、それぞれの画面サイズに応じたデザインでホームページを表示するには、次のコードをHTMLファイルのヘッダータグに入れる必要があります。

そのままコピペで大丈夫です。スタイルシートを読み込んでいるlink hrefの部分はそれぞれの環境に合わせて変更してください。

<meta name="viewport" content="initial-scale=1.0">
 	<link href="css/style.css" rel="stylesheet" media="all" type="text/css">
 	<link href="css/mobile.css" rel="stylesheet" media="all" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

レスポンシブデザインは、同一HTMLファイルを使い読み込むCSSを切り替える方法をとりますが、上記のコードは必須なので、パソコン用サイトをモバイル対応にする場合は必ずHTMLファイルの変更もしなければなりません。

実際には、それ以上の変更も必要となるため、かなりの時間を要することを覚悟しましょう。

特に、ワードプレスやムーバブルタイプ等のシステムを使っていない静的ページの場合、手動で全ページ変更となると大変ですが、頑張ってレスポンシブデザインにしてください。

レスポンシブデザインにするためのコードの説明

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

パソコン用のサイトをスマホで表示すると文字や画像が小さくなってしまいます。それを解決するのがビューポートで、必ず記述しなければなりません。中に入れるプロパティにも種類がありますが、最低限の仕様が上記です。

 	 	 	 	 	 	<link href="css/style.css" rel="stylesheet" media="all" type="text/css">
 	 	 	 	 	 	<link href="css/mobile.css" rel="stylesheet" media="all" type="text/css">

これはスタイルシートの読み込みです。詳しくは、ウィンドウサイズで読み込むCSSを変える方法をご覧ください。