マークアップの基本とCSSの変更
aboutページの作成
<body> <div data-role="page" id="index" data-theme="c"> <div data-role="header" data-theme="b"> <h1>TOPページ</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">メニュー</li> <li><a href="#about"><h3>このサイトについて</h3></a></li> <li><a href="#seminar"><h3>セミナー情報</h3></a></li> <li><a href="#access"><h3>アクセス</h3></a></li> <li><a href="#contact"><h3>お問い合わせ</h3></a></li> </ul> </div> <div data-role="footer" data-theme="b"> <h4>© 2012 Smartphone</h4> </div> </div> <div data-role="page" id="about" data-theme="c"> <div data-role="header" data-theme="b"> <h1>このサイトについて</h1> </div> <div data-role="content"> <h2>このサイトについて</h2> <p>池袋でWebデザインの勉強の記録</p> <p>Webデザイン、PHPやJavaScriptの勉強を行っています。</p> <h2>フェリカテクニカルアカデミーについて</h2> <p>建築の専門学校が母体</p> <p>Webサイト運営も多数行っています。</p> </div> <div data-role="footer" data-theme="b"> <h4>© 2012 Smartphone</h4> </div> </div> <div data-role="page" id="seminar"> セミナー情報 </div> <div data-role="page" id="access"> アクセス </div> <div data-role="page" id="contact"> お問い合わせ </div> </body>
見出しサイズと色の調整
- 見出し(h2要素)のスタイルを調整します
<div data-role="page" id="about" data-theme="c"> <div data-role="header" data-theme="b"> <h1>このサイトについて</h1> </div> <div data-role="content"> <h2 class="h1">このサイトについて</h2> <p>池袋でWebデザインの勉強の記録</p> <p>Webデザイン、PHPやJavaScriptの勉強を行っています。</p> <h2 class="h1">フェリカテクニカルアカデミーについて</h2> <p>建築の専門学校が母体</p> <p>Webサイト運営も多数行っています。</p> </div> <div data-role="footer" data-theme="b"> <h4>© 2012 Smartphone</h4> </div> </div>
.ui-content .h1{ color: #5E87B0; font-size: 18px; text-shadow: 1px 0 0 #fff; }
h2要素にclass名「h1」を付ける理由