アウトライン - web-0127のブログ

文書構造の基本設計

見出し（ページの構造が複雑にならないように、h3〜h4まで使用するに止める）
本文
箇条書き

<body>

<h1>Cafe Debut</h1>
<p>baser CMS カフェサイト用テーマ<br>
baser CMS テーマコンテスト2012 飲食店系テーマ賞受賞（受賞結果はこちら）</p>

<h2>いますぐ、はじめられるカフェサイトテーマ！</h2>
<p>baserCMSは、「コーポレートサイトにちょうどいい」をキャッチコピーにしたcake PHPベースの国産CMS。Cafe Debutは、baseCMSのテーマコンテスト2012に応募するために、チームこもりこましゃで作成しました。</p>
<p>baserCMSのインストールと、Cafe Debutテーマの初期設定を行ったら、あとはあなたのスマートフォンのInstagramで写真を撮っていくだけ。</p>
<p>Instagramのおしゃれ写真で、すぐに素敵なカフェサイトが出来上がっちゃうフォトログ風baserCMSテーマです。</p>

<h3>プラグインでInstagramと連携</h3>
<p>プラグインでInstagramと連携して、トップページにInstagramで撮影した写真がすぐに反映されます。</p>

<h3>レスポンシブデザインでスマートフォン、タブレット表示も快適</h3>
<p>さまざまなデバイスの表示対応に、レスポンシブデザインを採用しました。Instagramでお店のメニューを撮影してすぐにスマートフォンで確認できるのも嬉しい♪</p>

<h3>Webフォントだから、飾り文字やアイコンもキレイ</h3>
<p>サイトのタイトルやナビゲーション、主要な見出しはGoogle Web Font、アイコンはウェブフォント（Fontello）を採用しています。拡大縮小されるスマートフォンやタブレットでも解像度を気にすることなくキレイな文字とアイコン表示を実現できました。</p>

</body>

箇条書きを作成

他ページなどへ誘導に使う場合と、テーマを箇条書きにまとめる時に作成する

<h2>関連リンク</h2>
<ul>
<li>Cafe Debutのダウンロードページ</li>
<li>Cafe Debutのデモページ</li>
<li>baser CMS公式サイト</li>
<li>Instagram公式サイト</li>
</ul>

表を作成

わかりやすく伝える必然性によって作成する

<table>
<caption>制作担当</caption>
<tr>
<th>コモモ</th>
<td>企画・デザイン・baserCMSテーマのベース組込み担当</td>
</tr>
<tr>
<th>モリコ</th>
<td>HTML/CSSコーディング担当</td>
</tr>
<tr>
<th>ひろましゃ</th>
<td>プラグイン制作、テーマ実装の難しいところとか担当</td>
</tr>
</table>

アウトライン構造を構築

header要素、footer要素、section要素、nav要素、article要素、aside要素でセクションを明示する
ページ全体をarticle要素で囲むことは間違いです（article要素は、セクショニングコンテンツですから、直下にh要素が必須となります。レイアウトのためであればdiv要素で囲む必要があります。）
ページの文書構造には、header要素が必須です
ページのテーマに直接関連しない情報は、補足情報としてaside要素でマークアップします
section要素の直下見出しは常にh1で問題ないのですが、いままで通りの数字による階層が理解しやすいため、h1→h2→h3という記述にします

<body>

<header>
<h1>Cafe Debut</h1>
<p>baser CMS カフェサイト用テーマ<br>
baser CMS テーマコンテスト2012 飲食店系テーマ賞受賞（受賞結果はこちら）</p>
</header>

<section>
<h2>いますぐ、はじめられるカフェサイトテーマ！</h2>
<p>baserCMSは、「コーポレートサイトにちょうどいい」をキャッチコピーにしたcake PHPベースの国産CMS。Cafe Debutは、baseCMSのテーマコンテスト2012に応募するために、チームこもりこましゃで作成しました。</p>
<p>baserCMSのインストールと、Cafe Debutテーマの初期設定を行ったら、あとはあなたのスマートフォンのInstagramで写真を撮っていくだけ。</p>
<p>Instagramのおしゃれ写真で、すぐに素敵なカフェサイトが出来上がっちゃうフォトログ風baserCMSテーマです。</p>

<table>
<caption>制作担当</caption>
<tr>
<th>コモモ</th>
<td>企画・デザイン・baserCMSテーマのベース組込み担当</td>
</tr>
<tr>
<th>モリコ</th>
<td>HTML/CSSコーディング担当</td>
</tr>
<tr>
<th>ひろましゃ</th>
<td>プラグイン制作、テーマ実装の難しいところとか担当</td>
</tr>
</table>

<section>
<h3>プラグインでInstagramと連携</h3>
<p>プラグインでInstagramと連携して、トップページにInstagramで撮影した写真がすぐに反映されます。</p>
</section>

<section>
<h3>レスポンシブデザインでスマートフォン、タブレット表示も快適</h3>
<p>さまざまなデバイスの表示対応に、レスポンシブデザインを採用しました。Instagramでお店のメニューを撮影してすぐにスマートフォンで確認できるのも嬉しい♪</p>
</section>

<section>
<h3>Webフォントだから、飾り文字やアイコンもキレイ</h3>
<p>サイトのタイトルやナビゲーション、主要な見出しはGoogle Web Font、アイコンはウェブフォント（Fontello）を採用しています。拡大縮小されるスマートフォンやタブレットでも解像度を気にすることなくキレイな文字とアイコン表示を実現できました。</p>
</section>

</section>

<section>
<h2>関連リンク</h2>
<ul>
<li>Cafe Debutのダウンロードページ</li>
<li>Cafe Debutのデモページ</li>
<li>baser CMS公式サイト</li>
<li>Instagram公式サイト</li>
</ul>
</section>

<aside>
<p>撮影協力</p>
<h2>kitchen nest</h2>
<p>北海道札幌市中央区南３条西８丁目 大洋ビル２階</p>
<ul>
<li>http://www.nest-kitchen.jp</li>
<li>Facebookページ</li>
</ul>
<p>Cafe Debutテーマのイメージ撮影にご協力いただきました。
とっても素敵なお店です。</p>
</aside>

<footer>
</footer>

</body>