サイト運用 2014/04/23
アフィリエイトは2001年から運営実績がある安心のアクセストレード
情報更新日：2012/03/13
こんにちは。All About ホームページ作成ガイドの西村文宏です。
スマートフォン専用サイトを１から作ろうとするときに困るのは、 「『スマホらしいページデザイン』をどうやって作るか？」ではないでしょうか。背景がグラデーションになっているヘッダやフッタ、指で押しやすいように面積を広くしたボタン型リンクなど、スマートフォンの標準的なインターフェイスに合わせたデザインを１から作るには、少々手間がかかります。
そこでお勧めなのが、「jQuery Mobile」というJavaScriptで作られたフレームワークです。これを使うと、「よくある『スマホらしいデザイン』」が、ウェブページ内で簡単に実現できます。
▼「jQuery Mobile」※英語サイト
http://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」※英語サイト
http://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>
いかがでしょうか？
ヘッダやフッタが、黒色をベースにしたグラデーションで表示されるはずです。
また、リンクは押しやすいように拡大された上、縁を丸くして立体的になり、 ボタンのように見えるはずです。
このように、スマートフォンらしいデザインを簡単に作ることができます。
上記のソースについての詳しい解説は、次回にご紹介いたします。
All About ホームページ作成ガイド
2001年より、その道のプロ（専門家）が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。
サイト運用 2014/04/23
サイト運用 2014/04/22
サイト運用 2014/03/18
サイト運用 2014/02/19
サイト運用 2013/11/12