×
アフィリエイト大学
  1. アフィリエイト大学トップ
  2. 「jQueryMobile」でスマホらしいページデザインを簡単に作る

サイト制作

「jQueryMobile」でスマホらしいページデザインを簡単に作る

更新日：2012/03/13 公開日：2015/04/13

All About ホームページ作成ガイド

西村 文宏 （ニシムラ フミヒロ）

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

スマートフォン専用サイトを１から作ろうとするときに困るのは「『スマホらしいデザイン』をどうやって作るか？」ではないでしょうか。

背景がグラデーションになっているヘッダやフッタ、指で押しやすいように面積を広くしたボタン型リンクなど、スマートフォンの標準的なインターフェイスに合わせたデザインを１から作るには、少々手間がかかります。

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

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

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

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

<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>

この３行は、jQueryサイト上に用意された「jQuery Mobile」Ver 1.0.1を直接読み込む記述です。
通常はこの方法で記述すれば問題ありません。

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

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

「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>

いかがでしょうか？

ヘッダやフッタが、黒色をベースにしたグラデーションで表示されるはずです。
また、リンクは押しやすいように拡大された上、縁を丸くして立体的になり、ボタンのように見えるはずです。

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

続いて、上記のソースについての詳しい解説をしていきます。

SHARE

All About ホームページ作成ガイド

西村 文宏 （ニシムラ フミヒロ）

2001年より、その道のプロ（専門家）が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。

この著者の他の記事を読む

他の著者をもっと見る

ご注意ください

  • 本記事の内容は、2012/03/13更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
  • 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
  • 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。

カテゴリーから探す

タグから探す

アフィリエイトをはじめよう！
無料新規パートナー登録
広告出稿を希望のかたはこちら
無料資料請求はこちら

お問い合わせ

© 2021 Interspace Co., Ltd.