各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

All About ホームページ作成ガイド 西村 文宏
All About ホームページ作成ガイド
西村 文宏 (ニシムラ フミヒロ)
2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。
コーポレートサイトhttp://allabout.co.jp/gm/gt/1053/
講師PR
RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です!『にししふぁくとりー』
http://www.nishishi.com/

スマートフォン向けナビゲーションバーを作る(第1回)

  • publish_advertise
2013/01/17

こんにちは。All About ホームページ作成ガイドの西村文宏です。

 

前回は、「jQuery Mobile」を使ってスマートフォン向けウェブサイト用のヘッダとフッタを作る方法をご紹介いたしました。

 

コーナー数やページ数の多いサイトでは、ヘッダの下部などにメニュー機能を用意したいことも多いでしょう。

 

「jQuery Mobile」には、項目が自動的に均等配置される「ナビゲーションバー」を作る機能も用意されています。

 

そこで今回は、スマートフォン向けの「ナビゲーションバー」を作る方法をご紹介いたします。

 

まずは、下記のHTMLソースを保存して、スマートフォンのブラウザで表示させてみてください。

 

※以下のHTMLソースを保存する際には、文字コードを「UTF-8」にしないと全体が文字化けしてしまいますので注意してください。

 

……………………………………………………………………………………………
<!DOCTYPE html>
<html>
<head>
   <meta charset=”utf-8″>
   <meta name=”viewport” content=”width=device-width, initial-scale=1″>
   <link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css” />
   <script src=”http://code.jquery.com/jquery-1.8.3.min.js”></script>
   <script src=”http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js”></script>
   <title>jQuery Mobile ヘッダ上のナビゲーションバーのサンプル</title>
</head>
<body>

   <div data-role=”page” id=”pcontents”>

      <div data-role=”header”>
         <h1>jQuery Mobile ヘッダ上のナビゲーションバーのサンプル</h1>
         <div data-role=”navbar”>
            <ul>
               <li><a href=”B1.html”>BTN1</a></li>
               <li><a href=”B2.html”>BTN2</a></li>
               <li><a href=”B3.html”>BTN3</a></li>
               <li><a href=”B4.html”>BTN4</a></li>
               <li><a href=”B5.html”>BTN5</a></li>
            </ul>
         </div>
      </div>

      <div data-role=”content”>
         <p>ページの中身<br>ページの中身<br>ページの中身<br></p>
      </div>

      <div data-role=”footer”>
         <h4>フッター</h4>
      </div>
   </div>

</body>
</html>
……………………………………………………………………………………………

 

上記のソースをブラウザで表示すると、ヘッダのすぐ下に、5つのボタンが均等配置されたナビゲーションバーが表示されます。

 

───────────────────────────────────
■ヘッダに連結されたナビゲーションバーを作る
───────────────────────────────────

 

このナビゲーションバーは、<div data-role=”header”> ~ </div> の部分で作る「ヘッダ」の中に、以下のようなHTMLを記述することで追加できます。

 

……………………………………………………………………………………………
<div data-role=”navbar”>
   <ul>
      <li><a href=”リンク先1”>項目名1</a></li>
      <li><a href=”リンク先2”>項目名2</a></li>
      <li><a href=”リンク先3”>項目名3</a></li>
      <li><a href=”リンク先4”>項目名4</a></li>
      <li><a href=”リンク先5”>項目名5</a></li>
   </ul>
</div>
……………………………………………………………………………………………

 

上記のように、<div data-role=”navbar”> ~ </div> で作るdiv要素の中に、ul要素とli要素で作るリストを含めます。

 

リストの各項目の内容は、a要素で作るリンクです。項目数(li要素の数)が1個~5個の場合は、表示領域の幅に合わせて自動的に均等配置されます。

6個以上の項目を作った場合は、1行に2項目ずつ配置した複数行のバーに拡張されて表示されます。

───────────────────────────────────

 

■ナビゲーションバー内の1項目をアクティブ状態にする

 

項目を作るa要素に、以下のように属性「class=”ui-btn-active”」を加えると、その項目をアクティブ状態(選択状態)に装飾できます。

 

……………………………………………………………………………………………
<a href=”リンク先”>項目名</a>
……………………………………………………………………………………………

 

上記のように記述すると、その項目だけが異なる配色で表示され「アクティブ状態」であることが分かりやすくなるので、ナビゲーションメニュー内での「現在位置」を表したい場合などに便利です。

 

───────────────────────────────────
■ナビゲーションバーはヘッダ以外の場所にも作れる
───────────────────────────────────

このナビゲーションバーは、「ヘッダ」内だけでなく、「フッタ」内や、その他のページ中にも記述できます。

<div data-role=”footer”> ~ </div> で作るフッタ内に記述すると、フッタと一体化する形でナビゲーションバーが表示されます。

<div data-role=”content”> ~ </div> で作るページ内に記述すると、左右に余白が設けられた状態で、ナビゲーションボタン群が表示されます。

 

───────────────────────────────────
■サンプルページ
───────────────────────────────────

今回ご紹介したソースを使ったサンプルページを用意しています。スマートフォンのブラウザを使って閲覧してみてください。パソコンから閲覧する場合は、
Google Chrome や Firefox の最新版などをお使いください。

 

サンプルページはコチラ

 

さて、ナビゲーションバーの各項目にはアイコンを付加すると、分かりやすくなります。

また、頻繁にページを移動するようなサイト構造の場合は、ヘッダやフッタが常時表示されるように固定しておくと、スクロールの手間が省けて使いやすいサイトになります。次回は、それらの方法をご紹介いたします。

 

 

……………………………………………………………………………………………

【ご注意ください】

このコンテンツで紹介されているサイトおよびサービス(ツール)は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。

万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
続きを読む>>
続編
2013.01.22
スマートフォン向けナビゲーションバーを作る(第2回)

▲ページトップへ戻る

1CLICKアンケート!!
Loading...
1CLICKアンケート!!
アフィリエイトで稼ぐための心構え3カ条
1.「稼ぐ気持ち」を出しすぎない
稼ぎたい気持ちが全面に出ていると、ユーザーはサイトに対し良い印象を持ちません。
2.「納得できる方法」で稼ぐ
報酬額ばかりで選ばず、自分自身がお薦めできるプログラムを心が伝わるように紹介しましょう。
3.実績のある方法や考え方などを「学ぶ」
「成功者のノウハウ」、「今盛り上がっている市場は?」など、常に最新情報をキャッチし、実践できているかどうかが、アフィリエイト成功のカギ。アフィ大では、アフィリエイトで稼ぐためのお役立ち情報を数多くの成功者が発信しています。ぜひご活用ください!

▲ページトップへ戻る