こんにちは。All About ホームページ作成ガイドの西村文宏です。
前回は、スマートフォンらしいデザインを簡単に作れる「jQuery Mobile」というフレームワークを使って、見やすいメニューを用意しストレスのないページ移動を可能にする方法をご紹介いたしました。
今回は、ヘッダ（見出し）部分をタップすることでコンテンツ（中身）が表示される「開閉式コンテンツ」の作り方をご紹介いたします。
「開閉式コンテンツ」の作り方
スマートフォンは画面が狭いため、１ページ内にたくさんの情報を並べると、どこに何があるのかが分かりにくくなります。見やすさを確保する手段の１つが、前回ご紹介した複数ページに分割する方法です。
しかし、複数ページに分割するほどでもない情報や、複数ページに分割してしまうと逆に分かりにくくなる情報もあるでしょう。
そこで便利なのが、ヘッダ（見出し）部分をタップすることによってコンテンツ（中身）が見えたり隠れたりする「開閉式コンテンツ」です。
この表示形態であれば、１ページ内にどのような情報があるのかが分かりやすくなる上、複数の項目を平行して閲覧したい場合でも便利です。
下記のHTMLソースは、「jQuery Mobile」を使って「開閉式コンテンツ」を作ったサンプルです。
実際にスマートフォンのブラウザで表示させて、確認してみてください。
- ※以下の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" id="pcontents">
<div data-role="header">
<h1>jQuery Mobile 開閉式コンテンツのサンプル</h1>
</div>
<div data-role="content">
<!-- ▼開閉式コンテンツの例１ -->
<div data-role="collapsible" data-theme="c" data-content-theme="c">
<h3>開閉できるヘッダ1</h3>
<p>ここに中身を書きます。</p>
<ul>
<li>最初に記述した h3 要素がヘッダに使われます。</li>
<li>それ以降に記述したHTMLが「中身」（コンテンツ）になります。</li>
<li>中身には、自由にHTMLを記述できます。</li>
<li>このようにリストを書いても構いません。</li>
</ul>
<p>好きなように書けます。</p>
</div>
<!-- ▼開閉式コンテンツの例２ -->
<div data-role="collapsible" data-collapsed="false" data-theme="c" data-content-theme="c">
<h3>開閉できるヘッダ2</h3>
<p>
この中身は、最初から表示されています。（＝初期状態で開いた状態になっています。）
ヘッダをクリックすると閉じます。
</p>
</div>
</div>
<div data-role="footer">
<h4>フッター</h4>
</div>
</div>
</body>
</html>上記のHTMLをスマートフォンのブラウザで表示させると、タップすることで開閉するヘッダ（見出し）が２つ表示されます。
片方は中身が隠されており、もう片方は中身が最初から表示されています。
開閉式コンテンツを「jQuery Mobile」を使って作るのは、とても簡単です。
以下のHTMLソースを１セットとして記述します。
<div data-role="collapsible"> <h3>ヘッダ</h3> <p>コンテンツ</p> </div>
上記の4行を記述するだけで、「jQuery Mobile」によって「開閉式コンテンツ」として表示されます。
必要なだけ、並べて使ってください。
先のサンプルソースでは、さらにオプションをいくつか使用しています。
続いて、上記のサンプルソースについて、詳しい解説や指定できるオプションに関して解説していきます。
ログインしてご覧ください。
ご注意ください
- 本記事の内容は、2015/04/13更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
- 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
- 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。
関連記事
カテゴリーから探す
タグから探す
- アフィリエイトをはじめよう！
- 無料新規パートナー登録
- 広告出稿を希望のかたはこちら
- 無料資料請求はこちら