このページの本文へ

DESIGN 実践!iPhone&Androidサイト制作ガイド ― 第9回

CSS+jQueryでクロスデバイスサイトを作ろう

2010年10月18日 10時01分更新

たにぐちまこと/H2O Space.

  • この記事をはてなブックマークに追加
本文印刷
iphone-android

 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フォント」を活用するのも手です(日本語の対応はこれからに期待ですが)。

書影

「まとめてじっくり読みたい!」という読者のみなさまの声にお応えし、この連載が本になりました。書籍化にあたっては構成を全面的に見直し、記事公開後の最新情報や現場で役立つ追加情報も多数盛り込んでいます。画面設計に便利な特製ノート付き。

iPhone+Android
スマートフォンサイト制作入門

本体 2,380円+税、B5変形判216ページ(オール4色刷)
ISBN:978-4-04-870218-8

Amazon.co.jpで買う 楽天ブックスで買う

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング