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

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/

「jQuery Mobile」でスマホらしいページデザインを簡単に作る(第1回)

  • publish_advertise
2012/03/13

 

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

 

スマートフォン専用サイトを1から作ろうとするときに困るのは、「『スマホらしいページデザイン』をどうやって作るか?」ではないでしょうか。背景がグラデーションになっているヘッダやフッタ、指で押しやすいように面積を広くしたボタン型リンクなど、スマートフォンの標準的なインターフェイスに合わせたデザインを1から作るには、少々手間がかかります。

 

そこでお勧めなのが、「jQuery Mobile」というJavaScriptで作られたフレームワークです。これを使うと、「よくある『スマホらしいデザイン』」が、ウェブページ内で簡単に実現できます。

 

 


▼「jQuery Mobile」※英語サイト
http://jquerymobile.com/


 

無料で利用できますので、ぜひ活用してみてください。

 


■「jQuery Mobile」を利用するための準備


 

「jQuery Mobile」を利用するためには、HTMLのhead要素内に、以下の3行を記述します。


<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css” />
<script src=”http://code.jquery.com/jquery-1.6.4.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js”></script>


 

この3行は、jQueryサイト上に用意された「jQuery Mobile」Ver 1.0.1を直接読み込む記述です。

 

通常はこの方法で記述すれば問題ありません。

 

もし、構成ファイルを自分のサイト上にアップロードして利用したい場合は、以下のページからダウンロードできます。

 

 


▼「jQuery Mobile」ダウンロードページ ※英語サイト
http://jquerymobile.com/download/


 

 


■「jQuery Mobile」を使ったスマートフォン専用サイトのベースHTML


 

「jQuery Mobile」を使って作るスマートフォン専用サイトは、以下のようにHTML5を使って記述します。

 

この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.0.1/jquery.mobile-1.0.1.min.css” />
<script src=”http://code.jquery.com/jquery-1.6.4.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js”></script>
<title>jQuery Mobile のサンプルページ</title>
</head>
<body>
<div data-role=”page”>

<div data-role=”header”>
<h1>jQuery Mobile のサンプル</h1>
</div>

<div data-role=”content”>
<p>ページの中身をここに記述。</p>
<p><a href=”(URL)” data-role=”button” data-icon=”check”>押しやすいリンク</a></p>
</div>

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

</div>
</body>
</html>


 

いかがでしょうか?

 

ヘッダやフッタが、黒色をベースにしたグラデーションで表示されるはずです。

また、リンクは押しやすいように拡大された上、縁を丸くして立体的になり、ボタンのように見えるはずです。

 

このように、スマートフォンらしいデザインを簡単に作ることができます。

上記のソースについての詳しい解説は、次回にご紹介いたします。

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
続きを読む>>
続編
2012.03.15
「jQuery Mobile」でスマホらしいページデザインを簡単に作る(第2回)

▲ページトップへ戻る

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

▲ページトップへ戻る