こんにちは。All About ホームページ作成ガイドの西村文宏です。
前回は、スマートフォンらしいデザインを簡単に作れる「jQuery Mobile」というフレームワークを使って、ヘッダ（見出し）部分をタップすることでコンテンツ（中身）が表示される「開閉式コンテンツ」の作り方をご紹介いたしました。
前回の「開閉式コンテンツ」は、見やすさを維持しつつ、１ページ内にたくさんの情報を並べて掲載する際に便利です。
しかし、閲覧者がたくさんの項目を同時に開いていくと、徐々に見づらくなってしまいます。
そこで便利なのが「アコーディオン式コンテンツ」です。
これは、並べられた複数のヘッダの中から１つをタップすると、それまで表示されていた他の項目が閉じて、選択した項目のコンテンツだけが見えるという表示形態です。
同時に１項目しか表示されないため、閲覧者がいくつのヘッダをタップしても、ページ内がスッキリ整頓されたままになるメリットがあります。
今回は、この「アコーディオン式コンテンツ」の作り方をご紹介いたします。
「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-set">
<!-- ▼１項目（開） -->
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>アコーディオン式ヘッダ1</h3>
<p>ここに中身を書きます。</p>
</div>
<!-- ▼２項目（閉） -->
<div data-role="collapsible" data-theme="b" data-content-theme="c">
<h3>アコーディオン式ヘッダ2</h3>
<p>ここに中身を書きます。</p>
</div>
<!-- ▼３項目（閉） -->
<div data-role="collapsible" data-theme="b" data-content-theme="c">
<h3>アコーディオン式ヘッダ3</h3>
<p>ここに中身を書きます。</p>
</div>
</div>
</div>
<div data-role="footer">
<h4>フッター</h4>
</div>
</div>
</body>
</html>上記のHTMLをスマートフォンのブラウザで表示させると、タップできるヘッダ（見出し）が３つ表示されます。
最初は、１番目のヘッダに対応したコンテンツ（中身）だけが表示されています。
他のヘッダをタップすると、そのとき開かれている項目が閉じた上で、タップしたヘッダに対応するコンテンツだけが表示されます。
閲覧者がどれだけタップしても、開かれる項目は常に１つだけであり、画面が込み入らずに整頓されたままであることがお分かりいただけるでしょう。
このアコーディオン式コンテンツを「jQuery Mobile」を使って作るのは、とても簡単です。
詳しい記述方法を紹介していきます。
ログインしてご覧ください。
ご注意ください
- 本記事の内容は、2015/04/13更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
- 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
- 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。
関連記事
カテゴリーから探す
タグから探す
- アフィリエイトをはじめよう！
- 無料新規パートナー登録
- 広告出稿を希望のかたはこちら
- 無料資料請求はこちら