|
|---|
WebサイトをiPhone/Androidに最適化するには、PCサイトとは別にスマートフォン専用サイトを用意するのがベストですが、コストや時間などの理由で難しい場合があります。そこで今回は、PC向けのWebサイト（HTML）はそのまま利用し、CSSとJavaScriptだけでレイアウトやデザインを変更する｢クロスデバイスサイト」の作り方を説明します。題材は、筆者が制作した「iPhone/Android Webサイト制作出張セミナー」のWebサイトです。
「iPhone/Android Webサイト制作出張セミナー」のサイト（PCからアクセスした場合）
このサイトは1ページ完結の告知サイトで、左右2段組みで構成されています。左カラムにはナビゲーションメニューを、右カラムにはメインコンテンツを配置し、ナビゲーションメニューをクリックするとページ内リンクで表示する部分を変えられます。iPhone/Androidからアクセスしたとき、このページを以下のように表示するようにします。
iPhone/Androidからアクセスすると最適化されて表示される
PCサイトのマークアップ
まず、ベースになるPCサイトのHTML/CSSを紹介します。クロスデバイス対応といってもそれほど特別なことはしていませんが、以下の点に注意します。
HTML/CSSを正しくマークアップする
当然ですがHTMLは正しくマークアップし、バリデータでエラーを取り除いておきます。今回の作例はHTML5/CSS3でマークアップしましたが、(X)HTMLやCSSのバージョンは特に問いません。ただし、現状ではHTML5やCSS3を採用すると、Internet Explorerや古いブラウザーへの対応に手間がかかるので、PCサイトのターゲットブラウザーに応じて(X)HTML/CSSのバージョンを選択するとよいでしょう。
Safari/Chromeで確認する
すでに説明したとおり、iPhone/AndroidのブラウザーはPC向けのSafari/Google Chromeと同じWebKitを採用しているので、SafariやChromeで正しく表示できなければiPhone/Androidでも意図したとおりに表示されない可能性が高くなります。PCサイトを制作する時点でもSafariとChromeで正しく表示されるか、必ず確認しましょう。
CSSでレイアウトする
今回のサイトは、iPhone/Androidで閲覧したときにCSSとJavaScriptを使ってレイアウトを変更します。そのため、ベースになるPCサイトはいわゆるtableレイアウトではなく、CSSでレイアウトする必要があります。(X)HTMLはdiv要素などでマークアップし、CSSのfloatプロパティなどを使って配置します。
実際のHTML/CSSは次のようになっています。
■HTML（一部抜粋）
<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>1日集中！ iPhone/Android Webサイト制作出張セミナー | H2O Space.</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="_css/reset.css">
<link rel="stylesheet" href="_css/base.css">
</head>
<body>
<div id="wrap">
<header>
<h1><img class="pngTr" src="_images/ttl_main.png" alt="1日集中！ iPhone/Android Webサイト制作出張セミナー" width="948" height="309"></h1>
<!-- 中略 -->
</header>
<div id="content" class="clearfix">
<section id="areaSub">
<nav>
<ul>
<li><a href="#about"><img src="_images/navi_about.png" alt="セミナー概要" width="250" height="45"></a></li>
<li><a href="#curriculum"><img src="_images/navi_curriculum.png" alt="カリキュラム" width="250" height="45"></a></li>
<li><a href="#instructor"><img src="_images/navi_instructor.png" alt="講師紹介" width="250" height="45"></a></li>
<li><a href="#price"><img src="_images/navi_price.png" alt="料金" width="250" height="45"></a></li>
<li><a href="#faq"><img src="_images/navi_faq.png" alt="よくあるご質問" width="250" height="45"></a></li>
<li><a href="#contact"><img src="_images/navi_contact.png" alt="お申込・お問合せ" width="250" height="45"></a></li>
</ul>
</nav>
<!-- 中略 -->
</section>
<section id="areaMain">
<h2><img src="_images/ttl_intro.png" alt="はじめに" width="650" height="40"></h2>
<article class="display">
<!-- 中略 -->
</article>
<h2 id="about"><img src="_images/ttl_about.png" alt="セミナー概要" width="650" height="45"></h2>
<article>
<!-- 中略 -->
</article>
<h2 id="curriculum"><img src="_images/ttl_curriculum.png" width="650" height="45"></h2>
<article>
<!-- 中略 -->
</article>
<h2 id="instructor"><img src="_images/ttl_instructor.png" width="650" height="45"></h2>
<article id="areaInstructor">
<!-- 中略 -->
</article>
<h2 id="price"><img src="_images/ttl_price.png" alt="料金" width="650" height="45"></h2>
<article>
<!-- 中略 -->
</article>
<h2 id="faq"><img src="_images/ttl_faq.png" alt="よくあるご質問" width="650" height="45"></h2>
<article>
<!-- 中略 -->
</article>
<h2 id="contact"><img src="_images/ttl_contact.png" alt="お申込・お問合せ" width="650" height="45"></h2>
<article>
<!-- 中略 -->
</article>
<p id="pageTop"><a href="#wrap"><img src="_images/btn_pagetop.png" width="24" height="130" alt="PAGE TOP"></a></p>
</section>
<!-- / #content --></div>
<!-- / #wrap --></div>
<footer>
<div id="footerInner">
<!-- 中略 -->
</div>
</footer>
</body>
</html>
■CSS（一部抜粋）
body {
background: url(../_images/bg_main.png) left top repeat-x;
color: #333;
line-height: 1.5;
}
#wrap {
width: 1000px;
margin: 0 auto;
}
/* header */
header {
position: relative;
}
h1 {
z-index: 10;
position: relative;
}
/* content */
#content {
margin: -10px 9px 50px;
width: 930px;
}
/* #areaMain */
#areaMain {
width: 650px;
float: right;
padding: 10px 0;
background-color: #fff;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
position: relative;
}
#areaMain h2 {
margin: 20px 0 10px;
}
#areaMain article {
padding: 0 15px;
}
#pageTop {
position: absolute;
left: 650px;
top: 1800px;
}
/* nav */
#areaSub {
position: absolute;
top: 304px;
}
nav {
padding: 14px 0;
background-color: #009ce2;
width: 250px;
margin-bottom: 10px;
}
nav li img {
vertical-align: top;
border-bottom: 1px solid #e0e0e0;
}
/* footer */
footer {
clear: both;
background: url(../_images/bg_footer.png) left top repeat-x;
}
#footerInner {
width: 930px;
margin: 0 auto;
padding: 30px 0;
}
そのほかの注意点
PCサイトをCSSとJavaScriptでスマートフォンに最適化する場合は、以下の点にも注意します。
フレームを使わない
フレーム（frameset要素/iframe要素）を使うと、CSSやJavaScriptでレイアウト調整ができず、クロスデバイス対応が難しくなります。また、iPhoneのSafariはフレームのスクロールバーが表示されず、フレーム内のスクロール操作が難しいので（2本指を使って操作します）、使い勝手の面でも好ましくありません。新規サイトの場合はフレームは使わずに構築し、フレームを使っている既存サイトの場合はマークアップの変更を検討しましょう。
画像文字の使用はなるべく抑える
見出しなどに画像化した文字を使っていると、スマートフォン向けに文字サイズなどを調整したときに、見出しよりも本文が大きくなってしまうなどバランスが全体的に崩れてしまいがちです。文字情報はなるべく画像ではなくテキストとして作成しましょう。どうしてもデザイン性を重視する必要がある場合は、サーバー上のフォントデータをダウンロードして表示する「Webフォント」を活用するのも手です（日本語の対応はこれからに期待ですが）。
