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

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
2012/12/13

 

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

 

スマートフォン向けウェブサイトで使われるレイアウトには、たいてい最上部と最下部に、ツールバー(ヘッダとフッタ)が配置されています。

 

これまでご紹介してきたサンプルでは、これらの領域には文字だけしか配置しませんでした。

 

しかし、「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.7.1.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>

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

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

</body>
</html>


 

上記のソースをブラウザで表示すると、
ヘッダとフッタがツールバーの形で掲載されている
シンプルなページが表示されます。

 

上記のソースでは、

<div data-role=”header”> ~ </div> の部分で「ヘッダ」を作っていて、
<div data-role=”footer”> ~ </div> の部分で「フッタ」を作っています。

現状では、どちらもただ文字を表示しているだけです。

 


■ヘッダにボタンを加える


 

ここで、ヘッダ部分のソースを以下のように修正すると、
ヘッダの両端に「リンク機能を持ったボタン」を追加できます。

 


<div data-role=”header”>
<a href=”back.html” data-icon=”delete”>中止</a>
<h1>jQuery Mobile ヘッダ・フッタのサンプル</h1>
<a href=”next.html” data-icon=”check”>保存</a>
</div>


 

上記の例では、左端にはバツ印アイコンと「中止」の文字が表示されて
back.html へリンクするボタンが表示されます。

 

右端にはチェック印アイコンと「保存」の文字が表示されて
next.html へリンクするボタンが表示されます。

 

このように、ヘッダを作るdiv要素内にa要素を2つ含めるだけで、
ヘッダの両端にボタンが配置されます。

 

なお、a要素を3つ以上含めた場合は、ヘッダが複数行に拡張され、
3つ目以降のa要素が2行目以降に左寄せで表示されます。

 


■ヘッダのボタンを目立たせる


 

標準では、黒色を基準にしたヘッダが表示され、
ボタンも同色を基準にした配色で表示されます。

 

もし、ボタンを目立たせたい場合は data-theme 属性を付加して、
以下のようにa要素を記述すると良いでしょう。

 


<a href=”next.html” data-icon=”check” data-theme=”e”>保存</a>


 

上記のように記述すると、「保存」ボタンが黄色で表示されて目立ちます。
属性値を「b」にすると青色になります。a~eまで、好みで選んでください。

 


■ボタンを右端だけに配置する


 

ヘッダ部分のソースに、a要素を1つしか書かなかった場合は、
標準では左端にボタンが表示されます。

 

これを、右端にだけ配置したい場合は、
a要素に属性「class=”ui-btn-right”」を付加して、
以下のように記述します。

 


<div data-role=”header”>
<h1>jQuery Mobile ヘッダ・フッタのサンプル</h1>
<a href=”option.html” data-icon=”plus”>オプション</a>
</div>


 

上記のように記述すると、
ボタンが右端だけに1つ表示されます。

 

なお、このclass名を複数のa要素に同時に記述してしまうと、
すべてのボタンが右端で重なって表示されますので注意してください。

 

さて、今回はページの最上部に表示される「ヘッダ」の書き方をご紹介いたしました。

 

ページの最下部に表示される「フッタ」には、ヘッダとは異なる書き方が用意されています。

次回は、「ヘッダ」の作り方をご紹介いたします。

 


 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
続きを読む>>
続編
2012.12.18
スマートフォン向けツールバー(ヘッダ)を作る(2)

▲ページトップへ戻る

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

▲ページトップへ戻る