スマホサイト制作　〜jQuery Mobile 導入編〜 - 初心者でも分かるスマホサイトの作り方

「スマートフォン」と一言に言っても、iPhoneやAndroidなど様々な機種が存在します。特にAndroidでは端末によって画面サイズも様々ですね…。
スマートフォンサイトを制作する上で重要なことのひとつとして、そういった多岐に渡った端末たちに対応させる、といったことが挙げられます。

「多岐に渡った端末への対応…？どうればいいんだ…？？」

そんなときこそ出番なのがこの「jQuery Mobile」です！
「jQuery Mobile」とは、JavaScriptのフレームワークです。これを用いることで、自動的にスマートフォンに最適化されたWebページを制作することができます。

たった1行のコードを書くだけで…。
f:id:webm_B:20121129162448p:plain
こんなボタンや、
f:id:webm_B:20121129162453p:plain
こんなナビゲーションまで！簡単に作ることができます！！

「jQueryMobile」の導入方法
「jQueryMobile」を導入するのはとても簡単！
必要なのは、「jQueryMobileのjsファイル」・「jQueryのjsファイル」・「jQueryMobileのcssファイル」の3つ。
さっそく、この3つを用いてHTMLファイルに「jQueryMobile」を適用させてみましょう！

 

<!DOCTYPE HTML>

<html lang="ja">

<head>

<meta charset="UTF-8">

<title>サイトタイトル</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css" media="screen"> <!--←A-->

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <!--←B-->

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"><script> <!--←C-->

</head>

Aのファイルが「jQueryMobileのcssファイル」、Bのファイルが「jQueryのjsファイル」、Cのファイルが「jQueryMobileのjsファイル」です。
以上のように、3つのファイルをHTMLの内に記述するだけで、様々なスマートフォンの端末に最適化されたWebサイトを制作することができます！

「押したくなる」ボタンを作ってみよう
「jQueryMobile」を適用させたHTMLファイルで、さっそく上の画像にある「ボタン1」を作ってみましょう！

f:id:webm_B:20121129162458p:plain



<body>

<a href="index.html" data-role="button" data-inline="true">ボタン1</a>

</body>

<body>内に

<a href="index.html" data-role="button" data-inline="true">ボタン1</a>

を記述するだけで、ボタン1のような立体感のある、スマートフォンサイトでは大切な「押したくなるボタン」を作ることができます！

ここで気になってくるのが2点の記述。

「data-role="button"」や「data-inline="true"」だと…？一体これはなんだ…？

「jQueryMobile」の根幹ともなってくるのがこの「data属性」たち。
この「data属性」については、次回の記事で詳しく紹介させていただきますね。