このページの本文へ

jQueryでiPhone風スライドパネルを作ろう (3/5)

2010年11月09日 11時00分更新

文●たにぐちまこと/H2O Space.

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

記事パネル部分を作成する

 続いて、目次からリンクしている記事パネルを作成します。記事のパネルは、先ほど作成した目次と同じHTML内につなげて記述します。非常に長いHTMLになりますが、コンテンツを一気に読み込むことでサーバーとの通信頻度を少なくし、パネル間の移動をスムーズにできます。

 記述するHTMLは次のとおりです。内容は自由で構いませんが、パネル全体をdiv要素で囲んで、目次と一致したid属性を付加しておきます。これで、ページ内リンクが機能するようになります。

...
<div id="vol09" class="iPhoneBody panel">
  <div class="iPhoneHead">
    <div class="btnBack" style="width: 3em">
      <div class="btnBackInner"> <a href="#index">戻る</a> </div>
    </div>
    <h1>CSS+jQueryでクロスデバイスサイトを作ろう</h1>
  </div>
  <div class="content">
  <p>WebサイトをiPhone/Androidに最適化するには、PCサイトとは別にスマートフォン専用サイトを用意するのがベストですが、コストや時間などの理由で難しい場合があります。そこで今回は、PC向けのWebサイト(HTML)はそのまま利用し、CSSとJavaScriptだけでレイアウトやデザインを変更する「クロスデバイスサイト」の作り方を説明します。題材は、筆者が制作した「iPhone/Android Webサイト制作出張セミナー」のWebサイトです。</p>
  </div>
  <div class="iPhoneButton"><a href="http://ascii.jp/elem/000/000/561/561127/">続きを読む</a></div>
</div>

<div id="vol08" class="iPhoneBody panel">   <div class="iPhoneHead">     <div class="btnBack" style="width: 3em">       <div class="btnBackInner"> <a href="#index">戻る</a> </div>     </div>     <h1>JavaScriptで振り分けてスマホサイト完成!</h1>   </div>   <div class="content">   <p>スマートフォンサイトの設計・デザイン、HTML5+CSS3による基本的なマークアップについて前回までに解説してきました。今回はページ内の要素にリンクを設定してスマートフォンサイトを仕上げます。</p> ...

 ここまでで以下のような状態になりました。この状態からCSSとJavaScriptでスライドパネルの演出を施していきます。

目次と記事が1ページに続いている状態になる

 目次、記事のすべてのパネルには「panel」というクラスが指定されています。このpanelクラスのCSSを以下のように設定して位置を調整します。

.panel {
  display: none;
  height: 100%;
  width: 100%;
  position: absolute;
}

 positionプロパティにabsoluteを設定して幅と高さに100%をするとパネルが画面いっぱいに表示されるので、すべてのパネルが以下のように重なった状態になります。

 この状態でdisplayプロパティをnoneにしてすべてのパネルをいったん非表示にし、目次パネルだけをdisplay:blockで表示状態に切り替えます。目次パネルには「active」というクラスを設定してあるので、以下のように記述します。

.active {
  display: block;
}

 これで、ページが読み込まれたときに目次パネルだけが表示されるようになりました。

この連載の記事

一覧へ

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