記事パネル部分を作成する
続いて、目次からリンクしている記事パネルを作成します。記事のパネルは、先ほど作成した目次と同じ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でスライドパネルの演出を施していきます。
目次、記事のすべてのパネルには「panel」というクラスが指定されています。このpanelクラスのCSSを以下のように設定して位置を調整します。
.panel { display: none; height: 100%; width: 100%; position: absolute; }
positionプロパティにabsoluteを設定して幅と高さに100%をするとパネルが画面いっぱいに表示されるので、すべてのパネルが以下のように重なった状態になります。
この状態でdisplayプロパティをnoneにしてすべてのパネルをいったん非表示にし、目次パネルだけをdisplay:blockで表示状態に切り替えます。目次パネルには「active」というクラスを設定してあるので、以下のように記述します。
.active { display: block; }
これで、ページが読み込まれたときに目次パネルだけが表示されるようになりました。