前回はメディアクエリを使用して『既存のホームページをレスポンシブスマホ対応する方法』をご紹介しました。
レスポンシブデザインによるスマホ対応の大まかな流れがつかめたと思います。

そこで今回は、レスポンシブ対応に最適な
『jQueryを使った折りたたみ式のグローバルメニュー』についてご紹介いたします。

グローバルメニュー実装の要件

PC用のレイアウトでは既存のグローバルメニューを使い、スマートフォンで表示した場合には折りたたみ式のグローバルメニューを使うようにする。

既存のホームページをレスポンシブデザインにてスマートフォンに変える事を目的としていますので、PC用のレイアウトでは既存のものをそのまま使います。
（場合によってはPC用レイアウトも含めて作り直してしまう方が良い場合もあります。）

また、グローバルメニューが3つ、4つ程度であればスマートフォン用に並び替えるだけで対応できると思います。

jQueryのグローバルメニュー実装その1

HTML内にScriptファイルを設定する

index.htmlに記述

<script type="text/javascript" src="common/scripts/jquery.js"></script>
<script type="text/javascript" src="common/scripts/menu/tool.js"></script>

HTMLにjQueryのファイルとtool.jsのファイルを読み込む記述を追加します。

tool.jsを作成する

$(function(){

	var agent = navigator.userAgent;
	var list = $(".mod_nav ul");

	function menuslide(){
	//メニュー表示非表示
	$(".mod_nav p.navtitle").click(function(){
	if($(list).css("display")=="none"){
	$(list).slideDown("fast");
	}else{
	$(list).slideUp("fast");
	}
	});
	}

	if(agent.search(/iPhone/) != -1){
		menuslide();

	}else if(agent.search(/Android/) != -1){
		menuslide();

	}else{
//resize
	$(window).resize(function(){
	var w = $(window).width();
	var x = 600;
		if (w <= x) {
		$(list).css("display","none");
		} else {
		$(list).css("display","block");
		}
	});
		menuslide();
	}
});

tool.jsの中身を設定します。

jQueryのグローバルメニュー実装その2

HTMLにスマートフォン用グローバルメニューを設置する

index.htmlに記述

<div class="navigation">
	<ul>
		<li><a href="#">ホーム<span>home</span></a></li>
		<li><a href="#">ギャラリー<span>gallery</span></a></li>
		<li><a href="#">お客様の声<span>review</span></a></li>
		<li><a href="#">会社概要<span>outline</span></a></li>
		<li><a href="#">スタッフ紹介<span>staff</span></a></li>
		<li><a href="#">スタッフブログ<span>blog</span></a></li>
	</ul>
</div>
<!-- ↑↑↑ ここまで既存のグローバルメニュー ↑↑↑ -->

<!-- ↓↓↓ ここからスマホ用の新設グローバルメニュー ↓↓↓ -->
<nav class="mod_nav">
<p class="navtitle">MENU</p>
	<ul>
		<li><a href="#">ホーム</a></li>
		<li><a href="#">ギャラリー</a></li>
		<li><a href="#">お客様の声</a></li>
		<li><a href="#">会社概要</a></li>
		<li><a href="#">お問い合わせ</a></li>
		<li><a href="#">スタッフ紹介</a></li>
		<li><a href="#">スタッフブログ</a></li>
	</ul>
</nav>

HTML内に既存のメニューとは別にスマートフォン用のグローバルメニューを追加し、既存のメニューに.navigationのclass指定をし、
スマートフォン用メニューは

でくくります。

jQueryのグローバルメニュー実装その3

CSSを設定し完成！

style.cssに追記する

/* mod_nav　スマホ用グローバルメニュー
-----------------------------------------*/

.mod_nav {
	display: none;
}

@media print, screen and (max-width: 600px) {

	.navigation {
		display: none;
		visibility: hidden;
	}

	.mod_nav {
		display: block;
	}
}

/* mod_nav
-----------------------------------------*/
.mod_nav {
	z-index: 1000;
	position: fixed;
	top: 0;
	left: 0;
	height: 45px;
	width: 100%;
	background:transparent url('../images/menu/bg_nav.png') repeat-x left top;
}

@media screen and (max-width:600px) {
	.mod_nav {
		height: auto;
	}
}

.mod_nav p.navtitle {
 display: none;
}

@media screen and (max-width:600px) {
	.mod_nav p.navtitle {
		cursor: pointer;
		display: block;
		line-height: 45px;
		color: #FFF;
		padding: 0 0 0 0px;
		font-size: 110%;
		font-weight: bold;
		text-align: center;
		background: transparent url('../images/menu/bg_menu.png') no-repeat 9px 9px;
	}
}

.mod_nav ul {
	margin: 0 auto;
	width: 960px;
}

@media screen and (max-width:600px) {
	.mod_nav ul {
		width: 100%;
		display: none;
	}
}

.mod_nav ul li {
	float: left;
	width: 100px;
	line-height: 45px;
	text-align: center;
}

@media screen and (max-width:600px) {
	.mod_nav ul li {
		float: none;
		background-color: #8F8F8F;
		width: 98%;
		padding: 0 1% 0 1%;
		text-align: left;
	}
}

.mod_nav ul li a {
	display: block;
	color: #FFF;
}

@media screen and (max-width:600px) {
	.mod_nav ul li a {
	}
}

.mod_nav ul li.current a {
	font-weight: bold;
}

.mod_nav ul li a:link    {color:#FFF; text-decoration:none;}
.mod_nav ul li a:visited {color:#FFF; text-decoration:none;}
.mod_nav ul li a:hover   {color:#FFF; text-decoration:none; background-color:#AAAAAA;}
.mod_nav ul li a:active  {color:#FFF; text-decoration:none; background-color:#AAAAAA;}

/* mod_nav　ここまで
-----------------------------------------*/

最後にCSSの設定をします。ここでのポイントは、
PC用のグローバルメニューとスマートフォン用のグローバルメニューを2つ用意し、それぞれの画面解像度にあわせて表示/非表示を切り替える部分です。

2つ用意した理由として、

• PC用のレイアウトを全く変更すること無くスマートフォン用のメニューを設置できる。
• スマートフォン用のメニューの数や項目名を柔軟に変更・追加できる。

事があげられます。
例として、上記の場合ではスマートフォン用のメニューに「お問い合わせ」の項目を追加しています。

まとめ

前回と今回の記事でスマートフォン対応の「とある1つの手法」の一連の流れがご紹介できたと思います。
今回は紹介していない部分で、細かいひと手間やちょっとした工夫でスマートフォンでの見やすさ、操作のしやすさが変わってくると思います。
スマートフォン対応に限らず、手間や工夫を惜しまずより良いホームページ作りを行っていければと思います。

この記事を読んだ方はこちらも読まれています

新たな生活様式で新たな脅威が。テレワーク時代の情報セキュリティを考えよう

今回は『既存のホームページをレスポンシブスマホ対応する方法』についてご紹介いたします。

2年程前からBootstrapやjQuery_Mobileによるスマートフォンサイトの作成であったり、WordPressのスマホ対応テンプレートの導入であったり、様々な手法を用いてスマホ対応を行ってきました。
最近ではWordPressのスマホ対応テンプレートか、今回ご紹介するメディアクエリによるレスポンシブスマホ対応の2パターンに収束してきた感じです。

今回はメディアクエリによるレスポンシブスマホ対応について紹介いたします。

メディアクエリとは

CSSの記述によって、画面幅に合わせたスタイルシートを適用させる事ができる手法です。
例えば、「横幅が640pxまでの画面であればこのスタイルシートを使う」といったことが容易にできます。

メディアクエリによるレスポンシブスマホ対応の利点

• 既存のホームページを流用できる。（初期コストを抑える）
• スマートフォンサイトを別に作るわけではないので、更新・運用管理が1サイト分で済む。（運用コストを抑える）
• HTMLの大幅な改修が必要なくほぼCSSの改修のみで済む。（初期コストを抑える）

デメリットは無いのか？

デメリットはあります。
PC用の画像をスマートフォン表示でも使用するので、画像のファイルサイズが大きいと回線状況によっては表示が遅くなってしまうこともあります。
また、PC用のレイアウトの並び替えを行うので有益な情報がページの下の方に行ってしまったり、逆にそれほど重要でない情報が上に来てしまうこともあります。
これらのデメリットは画像ファイルを圧縮したり、レイアウトの調整を行うことで対処可能です。

メディアクエリによるレスポンシブスマホ対応の5ステップ

ではさっそく既存のホームページをメディアクエリを使ってスマートフォン対応してみましょう。

ステップ1：HTMLの記述にスマートフォン対応の記述を追加する。

まずはHTMLにスマートフォン用の記述を追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<!-- inital scale -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">

HTMLファイルの一番上からの記述になります。この中の7行目の1文、こちらを追加します。
「HTMLの横幅はデバイス（スマートフォン等端末）の横幅に従います。表示倍率の初期値は1.0です」といった内容になります。

ステップ2：HTMLにスマートフォン用のCSSの記述を追加し、対象ファイルを用意する。

続いて、PC用とスマートフォン用のCSSの追加を行います。今回は既存のCSSをPC用としてリネームし、さらにPC用のCSSを複製してスマートフォン用のCSSのベースを作成します。（この時点ではCSSの中身は同一です）
そして、HTMLのCSSを指定する箇所の記述を変更します。
タブレット用のCSSも追加可能です。必要に応じて端末の画面サイズに沿ったCSSをご用意下さい。

<!-- StyleSheet -->
<link rel="stylesheet" media="(min-width: 640px)" href="common/styles/style_pc.css">
<link rel="stylesheet" media="(max-width: 640px)" href="common/styles/style_mobile.css">

(min-width: 640px)画面幅640pxを超える場合のPC用CSS。
(max-width: 640px)画面幅640pxまでのスマートフォン用CSS。

ステップ3：スマートフォン用CSSを準備する。

ステップ2で作成したPC用のCSSとそれを複製したスマートフォン用のCSSの双方にそれぞれのメディアクエリの記述を追加します。

style_pc.cssの内容に追記

/* PC用CSS */
@media print, screen and (min-width: 640px) {

/* ここから通常のCSS */
・・・
・・・


}/* ←CSSの一番最後に記述 */

style_mobile.cssの内容に追記

/* スマートフォン用CSS */
@media screen and (max-width: 640px) {

img{
max-width: 100%;
height: auto;
width /***/:auto;
}

/* ここから通常のCSS */
・・・
・・・

}/* ←CSSの一番最後に記述 */

それぞれのCSS内全体を上記メディアクエリの表示で囲います。
1行目にメディアクエリの記述、最終行にその閉じる記述を追加します。

※PC用とスマートフォン用の記述の違いにご注意下さい。
特にPC用の記述には『@media print, screen and (min-width: 640px)』とprint,が入っています。ブラウザからホームページを印刷する際に、この記述によってPC用のレイアウトで印刷されます。
また、スマートフォン用の方にはimgタグに関する記述があります。この部分はスマートフォン表示の際に画像が自動的に画面サイズにあわせて縮小表示されるようにする記述で、なおかつ画像本来のサイズより大きく表示されてぼやけるのを防いでくれる便利な呪文です。
HTML4等でHTML内に画像のサイズが記述されているままでも縮小表示されます。

ステップ4：スマートフォン用CSSを調整する。

ステップ3でCSSの準備が出来たので、ここからはスマートフォン用のCSSを改修してレイアウトを調整していきます。
ここまでくればあとは各ページをスマートフォン用にCSSを修正していけばOKです。
主に2カラムのページ表示を1カラムの縦並びに変更したり、floatの横並びをスマートフォンにあわせて縦並びにしていきます。

CSSをスマートフォン用に改修するポイントがいくつかあります。

1. htmlやbody、wrapper等の横幅の指定を100%に指定する。
widthが980pxといった状態のままだとスマートフォンの画面外にはみ出てしまいます。

2. floatで横並びになっている部分をスマートフォン表示で縦並びにする場合、
floatの記述を消すのではなくfloat: none;で解除する。
floatに限らず必要のないレイアウトを無効にする場合は記述を消すのではなく、上記の方法にて解除します。
記述を消す手法だとPC用のfloat: left;が効いてしまって縦並びにならない場合があります。

3. tableタグはthやtdをdisplay: block;で横並びから縦並びへ変更する。
会社概要のような2列のtableであればこの手法で、tdが複数あるようなtableの場合はoverflow: scroll;で画面内スクロールさせます。

4. ヘッダー領域が縦長になりすぎないように注意する。
情報量によってはヘッダー領域が縦長になってしまい、スマートフォンで見た時に画面の半分以上をヘッダー領域で埋めてしまうことがあります。
ヘッダー領域を過不足無くコンパクトにまとめるよう調整しましょう。

ステップ5：メディアクエリのCSS調整のみで解決出来ない部分の改修

上記までのステップにてほぼ対応できると思いますが、なかにはどうしてもうまくいかない部分があったり、想像と違う見え方になってしまった部分があると思います。
例えば、
　グローバルメニューがどうしてもうまくレイアウトできない。
　横長の画像が小さくなりすぎて何の画像なのかがわからない。
といった部分です。
グローバルメニューに関しては思い切って、スマートフォン用のグローバルメニューをjQuery等で実装してしまうのが一番だと思います。
こちらについてはまたの機会に紹介させて頂きます。
横長の画像が小さくなってしまう部分は、無くても良いイメージ画像であればスマートフォン用の表示では削ってしまったり、見出しに使う画像であれば縮小せずにoverflow: hidden;で画面外にはみ出た部分を強制非表示にしてしまうのも良いかと思います。

まとめ

今回は、巷でも主流になってきたメディアクエリによるレスポンシブスマホ対応についてご紹介いたしました。
ネットで調べればいくらでも出てくるありふれた情報ばかりではありますが、私が行ってきたスマートフォン対応で注意してきた点、苦労してきた点をポイントとして書き加えてみました。
何かのお役に立てればと思います。