|
|---|
スマートフォンサイトの設計・デザイン、HTML5+CSS3による基本的なマークアップについて前回までに解説してきました。今回はページ内の要素にリンクを設定してスマートフォンサイトを仕上げます。
前回までに基本的なマークアップが完成したスマートフォンサイト。今回はこの続きから
ページ内リンクを張る
今回制作しているスマートフォンサイトは、ページ内の各コーナーに移動できるナビゲーション（ジャンプボタン）を設置しています。まずはジャンプボタンにページ内リンクを設定しましょう。ページ内リンクは、PCサイトと同様、リンク先の要素にID属性を振り、a要素を次のように記述します。
<ul class="clearfix">
<li><a href="#access">アクセス</a></li>
<li><a href="#tel">電話</a></li>
<li><a href="#mail">メール</a></li>
</ul>
ボタン全体にリンクを貼る
ページ内リンクを設定したサンプルを実際にiPhone/Androidで操作してみると、やや使いにくく感じます。見た目はボタンのように見えますが、実際にリンクが有効な領域は文字の周りだけで、文字から少し外れるとタップできないのです。
文字部分だけにリンクが適用されているためタップできる領域が狭く使いづらい
これでは使い勝手が悪いので、CSSを次のように変更して調整します。
nav li a {
display: block;
width: 99px;
padding: 8px 0;
}
a要素のdisplayプロパティを「block」に設定して、a要素をブロックレベル要素で表示します。ブロックレベル要素は幅や高さを変更できるので、実際のボタンのサイズを測ってwidthプロパティとpaddingプロパティを調整します。これでボタン全体がリンク領域になり、ボタンのどの部分をタップしてもリンクが有効になります。CSS3でボタンを作成したときは、このようにタップできるリンク領域を調整しましょう。
スクロールをなめらかに
ページ内リンクはタップした瞬間にリンク先へ移動してしまうので、いま見ている位置を見失うことがあります。そこで、あえてスクロールを遅延させる「スムーズスクロール」や「するするスクロール」などと呼ばれるテクニックがPCサイトでもよく利用されます。スムーズスクロールを導入すると、ページ内を移動していることが分かりやすくなるとともに、高級感を演出できます。
スムーズスクロールを実装するJavaScriptライブラリーやサンプルプログラムは多数配布されていますが、PCのWebブラウザーでは問題なく使えてもiPhoneやAndroidでは正常に動作しない場合があります。いくつかのライブラリーを検証したところ、to-Rで公開されている「smoothScroll.js」がもっとも安定して利用できました。smoothScroll.jsは次のURLからダウンロードできます。
- ・smoothScroll.js
- http://blog.webcreativepark.net/2007/07/12-143406.html
ダウンロードしたファイルを適当なフォルダにコピーして、次のように参照します。
<script type="text/javascript" src="_shared/js/smoothScroll.js"></script>
これでページ内リンクに、自動的にスムーズスクロールが適用されます。
