格安ホームページ制作のブリリアントワークスです。個人事業(SOHO)としての特長を活かし、格安価格・高品質にてご提供いたします。
ホームページ制作 岐阜(BW)
» » レスポンシブデザインにする方法

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

『パソコン、タブレット、スマホ・携帯』、それぞれの画面サイズに応じたデザインでホームページを表示するには、次のコードを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を変える方法をご覧ください。

	<!--[if lt IE 9]>
	
	<![endif]-->

IE9以降はHTML5とCSS3をサポートしていますが、IE8以前のバージョンは未対応です。そこで古いブラウザでもHTML5とCSS3を利用できるように上記のコードを挿入します。

関連記事

『サイトマップ』と聞くとサイト内に設置する目次的なページを想像する方が多いと思いますが、ここで説明するのはXMLファイル形式のサイトマップで...


ヤフーやグーグルで検索した時に、次の画像のようにタイトルの下に表示されるURLが日本語表示になっていることがあります。 これはパンくず...


レスポンシブサイトのチェックで紹介している方法を利用すると視覚的にスマホ・携帯でもホームページを快適に閲覧できるかどうかチェックできますが、...


モニターのサイズにもよりますが、パソコンの場合は画面が大きいので今まで制作されてきた横幅1,000ピクセル以上のサイズでも画面全体を表示でき...


ホームページを作ったら、ぜひ利用したいのがサーチコンソール(Search Console)です。 以前はウェブマスターツール(Webmas...



コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最新記事

Homepage

パンくずリストを構造化にすると、検索結果の下に表示されるURLがカテゴリ名にな...

WordPress

ワードプレスでpost classを使うと、さまざまなクラスと同時にhentr...

WordPress

ワードプレスには自動でPタグを入れる機能がありますが、場合によってはこれがデザ...

検索フォーム

コンテンツ

カテゴリ