jQuery Mobile をはじめよう

❮ 前章へ 次章へ ❯

Web ページへに jQuery Mobile を追加する

web サイトへ jQuery Mobile を追加する方法は、次の2通りです;


CDN から jQuery Mobile へのリンク

CDN(Content Delivery Network)は、頻繁に使用されるファイルを、web 経由で配信するために使用します。 これは、ユーザ向けのダウンロード速度が非常に高速になります。

jQuery コアと同じように、使用中のコンピュータにインストールする必要はありません; jQuery Mobile を使用するには、単に、次のスタイルシート(.css)と JavaScript ライブラリ(.js)を HTML ページに直接インクルードするだけです:

jQuery Mobile CDN:

<head>

<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<!-- Include the jQuery library -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- Include the jQuery Mobile library -->
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
Try it Yourself »

<head> 要素​​内の viewport <meta> タグ​​は、ブラウザのページ・ズーム・レベルと大きさの制御方法を指定します。

width=device-width は、ページの幅をデバイスの画面幅に合わせるように設定します(デバイスによって異なります)。

initial-scale=1 は、ページがブラウザによって最初に読み込まれたときの初期ズームレベルを設定します。


コンピュータに保存されている jQuery Mobile へのリンク

jQuery Mobile ライブラリを自分でホストしたい場合は、まず jQuerymobile.com から ダウンロードする必要があります。

次に、ページに次のコードを追加します:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.4.5.js"></script>
</head>

<script> タグの中に type="text/javascript" がないのはなぜですか?

これは、HTML5 では必須ではありません。JavaScript は、HTML5 とすべての最新ブラウザでのデフォルトのスクリプト言語です!

チップ: ダウンロードしたファイルを、使用するページと同じディレクトリに置きます。


❮ 前章へ 次章へ ❯