Webの記録

レスポンシブサイト制作にチャレンジ。

投稿日:

この記事は約 6 分で読めます。

最近、気になっているのが「レスポンシブWebサイト」。

1つのHTMLで、スマートフォンやタブレットなど小さな画面とパソコンなどの大きな画面で見た場合と見た目を切り替えて表示できる手法。

なかなかチャレンジできてなかったのですが、今回チャレンジする機会があったので試してみました。

今回は、初めてレスポンシブサイトにチャレンジしてみたメモとして、ここに記録を残します。(2013.6.12追記)


「レスポンシブ」にチャレンジしたきっかけ

IEの古いブラウザが切り捨てられず、まだ今までなかなかHTML5やCSS3を使ったサイト制作が出来ていませんでした。

しかし、個人的に制作させて頂いているサイトのアクセス解析を見ていると・・・。

GoogleAnalyticsの画面1

ユーザー環境を見てみると、いつの間にかにパソコンからの閲覧よりも「Android」からの閲覧の方が多くなっていました。

これでは、スマートフォンからの閲覧に最適なサイトにする必要があると思うワケですが、2番目に多いユーザー環境は「IE」。それ以降の順位もパソコンからの閲覧でした。

このサイトの更新は、ちょこちょこあって・・・HTMLに記事を追加、削除作業が発生します。スマートフォン用のサイトを作成するには、ちょっと運営が面倒になりそうな感じです。

GoogleAnalyticsの画面2

気になるIEからの閲覧されているブラウザのバージョンは、1位が「8」。2位が「9」、3位が「10」と、以前より新しいバージョンが増えていました。
気になる「6」・「7」は、この1カ月でアクセス数が0ではないものの、両方合わせても1ケタだったので、そこまで意識する必要がなくなってきている気がします。

また、「.htaccess」がいじれないサーバーを利用していたのもあって、1ソースで見た目を閲覧環境によって変える事ができる「レスポンシブサイト」へ切り替える事を考えてみました。

レスポンシブサイトイメージ

制作手順とポイント

既にサイトをxhtmlで制作しているので、そのサイトをhtml5書き換えてパソコンからの閲覧は現状のサイトのデザインを引き継いだ感じで作成しました。

対象ブラウザ・・・アクセス解析の結果より
IE8以降、Chorome、Safari、Firefox、Opera、フマートフォン(機種は特定できず)、iPhone、iPadなどタブレット。
※IE6・7は対象からはずすけれど、表示崩れしてもサイトの情報は読める程度にする。
簡単な手順
  1. xhtmlからhtml5へソースコードを書き換えをする。
  2. Viewportの指定をして、各デバイスに応じたサイトのサイズの大きさを指定する。
  3. IE8で表示が出来るように「html5shiv.js」「respond.js」を利用。
  4. PC用は以前と同じ固定レイアウト、それより小さいサイズ用にブラウザで確認しながらcssで調整していく。
  5. 表示のテスト

レスポンシブサイトを制作してみる

1. XHTMLをHTML5に書き直してみる

HTML5はまだあやふやで・・・理解してなかったので、参考になるサイト・本を見ながら書いてみました。

参考サイト:「HTML5でサイトをつくろう

HTML5にマークアップし直したら、バリデーションツールで確認します。
私は使いやすかった「Validatir.nu」でチェックしました!

2. Viewportの指定をして、各デバイスに応じたサイトのサイズの大きさを指定する。

contentの中を表示サイズの指定の設定値の種類はたくさんあるけれど、ここはサイトによって設定は変わってくると思います。
「contentの中を表示サイズの指定の設定値の種類」は以下の通り・・・。

width
viewportの横幅を200~10000pxの間で指定。または「device-widht」を指定して、表示デバイスの画面サイズに設定する
height
viewportの高さを200~10000pxの間に指定。または「device-height」を指定して、表示デバイスの画面サイズに設定する
user-scalable
ページの拡大・縮小を「yes」・「no」で指定。デフォルトは「yes」。
maximum-scale(minimum-scale)
最大(最小)の倍率を0~10の間の値で指定。100%=1.0で、デフォルトは「1.6(0.25)」。

私は以下のように設定しました。contentの値は「width=device-wodth」だけあれば大丈夫かもしれません。。。

<!-- ※1.ウィンドウサイズをデバイスの幅に揃え、スマートフォンで見た際に縮小拡大はできないようにする。表示倍率の最大値を設定する。 -->
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1">

[2013.6.12追記]
viewport設定をしたら、背景がずれる現象が起きました。
そんなワケで、以下のように変更してみました。これであっさり解決!

<meta name="viewport" content="width=950,  user-scalable=yes,">
3. IE8以下で表示ができるようにjavaScriptを利用する。

おまじないのように、以下をhead部分に記述します。

古いブラウザのための対策ですが、コレで全てOKというワケではないので、おまじない・・・。

<!--&#91;if lt IE 9&#93;>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/respond.js"></script>
<!&#91;endif&#93;-->

※上記のおまじないを入れても、IE8以降で、sectionにidやclassなどをつけると、うまくスタイルを読んでくれない事があって困りました。。。例えば以下のような記述をした場合。

<section id="main_container">

IE8以下のブラウザが早くなくなってくれたら、問題にならないのに~!!・・・で、sectionに部分的にidやclassをはずしてみると、ちゃんと表示されたのでひとまずメデタシ?!

PC用は以前と同じ固定レイアウト、それより小さいサイズ用にブラウザで確認しながらcssで調整していく

私は閲覧している画面のサイズとIEバージョンで、CSSを分けるようにしてみました。(ブレイクポイントで分けてみました)

<!-- 769px以上の場合のレイアウト -->
<link rel="stylesheet" href="css/responce.css"  media="screen and (min-width: 768px)">

-Webの記録
-, , ,

執筆者:


comment

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

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

スマホ用サイトに「LINEで送る」ボタンを設置してみる

この記事は約 1 分で読めます。 スマホ向けに情報を発信しているサイトなど、あると便利なシェアボタン。 いつの間にかに「LINEで送る」ボタンが出来ていたのですね。 ひとまず自分用に記述方法を2種類メ …

no image

WordPressサイト内検索でのキーワードが分かるプラグライン「Search Meter」を試してみた。

この記事は約 1 分で読めます。 アクセス解析をしていると、どんなキーワードで検索されたのか?を知ることができます。 しかし、キーワードを入力して検索できなかった結果を知る事はなかなか知る事ができない …

no image

FileZillaの転送キュー(キーファイル)をクリアする方法

この記事は約 1 分で読めます。 Webサイトをサーバーにアップする時、またサーバーにあるファイルをバックアップとる時など、私は「FileZilla(ファイルジラ)」というFTPソフトを利用しています …

no image

WordPress 「contact form 7」と「Akismet」でスパムメール対策をしてみた。

この記事は約 1 分で読めます。 このサイトでは、「お問い合せ」のページに「contact form 7」というプラグインを使用しています。 コメントスパム対策にWordpressにデフォルトで入って …

no image

ファビコンその後・・・。

この記事は約 2 分で読めます。3月2日投稿した「ファビコン」の話、その後・・についてです。 実は、IEでのファビコン表示が出来ずに苦戦していたんです。 そこで・・・いろいろ試した結果。 本日、やっと …