こんにちは。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">
<p>● ボタン型リンクの基礎：</p>
<!-- ▼ボタン型リンクの例１ -->
<a href="#" data-role="button">標準のボタン型リンク</a>
<a href="#" data-role="button" data-mini="true">標準のボタン型リンク（低め）</a>
<p>● インラインのボタン型リンクの基礎：</p>
<!-- ▼ボタン型リンクの例２ -->
<a href="#" data-role="button" data-inline="true">リンクA</a>
<a href="#" data-role="button" data-inline="true">リンクB</a>
<a href="#" data-role="button" data-inline="true" data-theme="e">リンクC</a>
</div>
<div data-role="footer">
<h4>フッター</h4>
</div>
</div>
</body>
</html>
上記をブラウザで表示すると、
- 横幅いっぱいに広がったボタン
- テキストの幅に合わせたボタン
の２種類が表示されます。
上記が、「jQuery Mobile」でボタン型リンクを作る基本です。
これらのリンクを
<div data-role="controlgroup"> 〜 </div>
で囲むと、グループ化することができます。
たとえば、以下のように記述します。
<div data-role="controlgroup"> <a href="#" data-role="button">リンク上</a> <a href="#" data-role="button">リンク中</a> <a href="#" data-role="button">リンク下</a> </div>
上記のHTMLソースを、先ほどのHTML内に追記して表示させると、３つのボタン型リンクが縦方向に連結しているのが見えます。
このソースに、属性「data-type="horizontal"」を加えて以下のようにすると、縦方向ではなく横方向に連結して表示されます。
<div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button">リンク左</a> <a href="#" data-role="button">リンク中</a> <a href="#" data-role="button">リンク右</a> </div>
このように「横方向に連結されたボタン群」は、スマートフォン用サイトでよく見かけるデザインでしょう。
「jQuery Mobile」では、より多くのスマートフォンらしいデザインのボタン型リンクが作成できます。
続いて、詳しい記述方法をご紹介していきます。
続きはアクセストレードに
ログインしてご覧ください。
ログインしてご覧ください。
SHARE
ご注意ください
- 本記事の内容は、2015/04/13更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
- 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
- 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。
関連記事
カテゴリーから探す
タグから探す
- アフィリエイトをはじめよう！
- 無料新規パートナー登録
- 広告出稿を希望のかたはこちら
- 無料資料請求はこちら