ページ構成
基本設計
ページサイズは「横幅320px」を基準に設計
- iPhoneの縦幅は、480pxですが上下に「URL表示」「ナビゲーションバー」があるため、ページ内容が表示できる領域は「縦幅356px」になります
- 「URL表示」「ナビゲーションバー」を隠した場合は「縦幅416px」になります
画像サイズも横幅320pxまで
- MobileSafariの読み込める画像サイズ
ファイルの種類 |
制限 |
|---|---|
| GIF, PNG, TIFF | 3メガピクセルまで （width×height≦1024px×1024px×3） |
| JPEG | 32メガピクセルまで |
| HTML, CSS, JavaScript などの個別ファイル |
10MBまで |
文字サイズは14〜16px、行間は1.4〜1.6
- デスクトップ向けのページよりもやや大きめ
ページの左右には10pxの余白を作る
- 左右に余白を空けると窮屈さがなく読みやすくなります
ナビゲーションリンクの縦幅は44px前後に
- 指でタップするための領域が必要
セマンティックなマークアップを使用する
- 文書の各部に対して「意味」を与えること
section
<section> <h1>このセクションの見出しです。</h1> <p>これは段落です。</p> </section>
article
- ブログやニュースの記事のように、その部分だけを切り離しても独立したコンテンツとなるような箇所に使う
- 「独立したコンテンツ」になることが重要
<article> <h1>記事のタイトル</h1> <p>記事の概要</p> <section> <h1>章のタイトル</h1> <p>章の本文</p> </section> <section> <h2>記事のまとめ</h2> <p>まとめの本文</p> </section> </article>
nav
<h1>サイトのタイトル</h1> <nav class="global-nav"> <ul> <li><a href="./">ホーム</a></li> <li><a href="./news/">ニュース</a></li> <li><a href="./about/">このサイトについて</a></li> <li><a href="./contact/">お問い合わせ</a></li> </ul> </nav>
header
- ページやセクションの導入部分にあたる見出しやナビゲーションリンクをグループ化するために使う
<header class="global-header"> <h1 class="page-title">ページのタイトル</h1> <nav class="global-nav">...</nav> </header> <section> <header class="entry-header"> <h1 class="section-title">記事のタイトル</h1> <p>記事の概要</p> </header> </section>
footer
- ページやセクションの最後に配置されるような、ドキュメント関連情報や著作情報などをグループ化するために使う
<footer class="entry-footer"> <nav> <h3>この記事に関連する記事へのリンク</h3> <ul> <li><a href="#">記事B</a></li> <li><a href="#">記事C</a></li> <li><a href="#">記事D</a></li> </ul> </nav> </footer>
figure
- 挿絵、図表とそのキャプション（figcaption要素）をカークアップするために使う
- figcaption要素はfigure要素の子要素である必要があり、なおかつ子要素の中で一番はじめか、一番最後に出現する必要があります
<figure class="image-left"> <img src="img/img_nuts.jpg"> <figcaption>カシューナッツ</figcaption> </figure>
