このページの本文へ

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

JavaScriptで振り分けてスマホサイト完成!

2010年10月06日 13時01分更新

たにぐちまこと/H2O Space.

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

 スマートフォンサイトの設計・デザイン、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からダウンロードできます。


 ダウンロードしたファイルを適当なフォルダにコピーして、次のように参照します。


<script type="text/javascript" src="_shared/js/smoothScroll.js"></script>

 これでページ内リンクに、自動的にスムーズスクロールが適用されます。

書影

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

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

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

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

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

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

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

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

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

ランキング