[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ！[第3回]

ブログの存在すら忘れてました、僕です。

完全放置プレイだったこの連載？を再開しなきゃと思い、重い腰を上げてみました。

さて、前回までに出来たのは、これ意味あんの？ってHTMLだけです。
意味あるか無いかは、ちょっとわかりませんが、続行！です。
flexboxを試しに使ってみたので、せっかくなので3カラムに変更します。

<div id="contents">
		<div id="main">
			<div>
				<article>
					<p>記事タイトル</p>
					<p>日時</p>
					<p>本文</p>
					<p>追記？</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
					<p>&nbsp;</p>
				</article>
			</div>
		</div>
		<div id="side_left">
			<aside>
				<p>検索？</p>
				<p>カテゴリ</p>
				<p>コメント？</p>
				<p>最近の記事？</p>
			</aside>
		</div>
		<div id="side_right">
			<aside>
				<p>検索？</p>
				<p>カテゴリ</p>
			</aside>
		</div>
	</div>

HTMLはこんな感じになります。
flexboxを使用しているので、わざと真ん中を縦長にしてみたけれど、ちゃんと両サイドも伸びてる！

タイトルにHTML5とか言ってあんまり説明もしてないし、なんだこれ？みたいな感じなので
ちょっと説明を含めて進めてみます。
真ん中の緑の部分を変更してsectionタグを入れました。

sectionは、よくわからなくなりがちなのですが、僕なりのタグの解釈の仕方を紹介します。
僕は、DVDを想像して解釈しています。
DVD自体はarticle。
チャプターがsection、予告編はasideって感じです。

変更されたHTMLは以下。

<article id="contents">
 <div id="main">
 <section>
 <h1>記事タイトル</h1>
 <p>日時</p>
 <p>本文</p>
 <p>追記？</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 <p>&nbsp;</p>
 </section>
 </div>
 <div id="side_left">
 <aside>
 <p>検索？</p>
 <p>カテゴリ</p>
 <p>コメント？</p>
 <p>最近の記事？</p>
 </aside>
 </div>
 <div id="side_right">
 <aside>
 <p>検索？</p>
 <p>カテゴリ</p>
 <p>コメント？</p>
 <p>最近の記事？</p>
 </aside>
 </div>
 </article>

上記のソースだと、asideにfloatを入れていけばすっきりするしいいんじゃないかと思うのですが、どこかで「原則として装飾は含まない。装飾はDIVなどに」というのを読んだことがあるので基本的にはdivに肉付けをするようにしています。

とりあえず大まかな枠ができたので、次回は全体的にCSSで装飾していきたいと思います。