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

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

『パソコン、タブレット、スマホ・携帯』、それぞれの画面サイズに応じたデザインでホームページを表示するには、次のコードを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を利用できるように上記のコードを挿入します。

–>

関連記事

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


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


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


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


パソコンでも、タブレットでも、スマホ・携帯でも、それぞれの画面サイズに合わせて表示するレスポンシブルデザインですが、視覚的にも検索エンジン...



最新記事

子テーマ『Move Black(ムーブ・ブラック)』

WordPressテーマ『Flash Works』の子テーマである「Move ...

子テーマ『Pop(ポップ)』

WordPressテーマ『Flash Works』の子テーマである「Pop(ポ...

子テーマ『Zoom up(ズームアップ)』

WordPressテーマ『Flash Works』の子テーマである「Zoom ...

子テーマ『Alpha(アルファ)』

WordPressテーマ『Flash Works』の子テーマである「Alpha...

子テーマ『Move(ムーブ)』

WordPressテーマ『Flash Works』の子テーマ「Move(ムーブ...

検索フォーム

WordPressテーマ『Flash Works』

コンテンツ

カテゴリ