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

公開日： 2013/11/28 : 最終更新日：2014/08/08 html5, Web制作

忙しくて忘れてました。僕です。

さて、今回はもうちょっと見栄えもよくしたいなーなんて考えてます。
なので、まずは必要な箱を全部作っちゃいます。

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

現在、こうなっております。<section>と<aside>が増えてますね！
実際のところ何が正しいのかわかりませんが、僕はあまりsectionなどにcssでスタイルを当てるようなことはしません。
やればソースも綺麗になっていいのだと思いますけど、何かで「そういうのに使っちゃだめ！」って読んだ気がします。
間違ってるかな？

とりあえず必要なものはこれぐらいということで、レイアウトを考えていきます。

2カラムにしよう！

floatの問題が出てますね。でもスルーします。
footerにclearを入れておけば問題ないでしょう。

ちなみに、僕はよくレイアウトで問題があるときに、CSSで色づけして確認します。

こんな風に。
この場合、#contentsの中に#mainと#sideがあるんですが、#contentsの背景色が出ていません。
floatの高さの問題のやつですね。そう、例のやつです。うんそう、アレアレ。

こうやって色をつけると調整するときもわかりやすくて便利です。

でも、せっかくなのでfloat使わずにflexboxを使いましょう！

こうなります。
flex自体、まだまだ案件で使えることがないですが、久しぶりに触ってみるといろいろと変わってました。
CSSは、下記のようになります。

#contents{
	clear:both;
	padding:20px 0 20px;
	background-color:#939;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -o-flexbox;
	display: flexbox;
	display:-webkit-box;/*古い記述*/
	display:-moz-box;/*古い記述*/
	display:-o-box;/*古い記述*/
	-moz-box-flex:1;
	-webkit-box-flex:1;
	-o-box-flex:1;
	-ms-box-flex:1;
}
#main{
	width:600px;
	background-color:#099;
}
#side{
	width:300px;
	background-color:#C33;
}

中のdivに何も指定してないと、くっついて隣り合わせになりますね。
float:left;の様な感じ。
まだ確定してないらしく、プロパティなどはどんどん変わってますね。何を設定したらいいのかわかんね。

#contents{
 clear:both;
 padding:20px 0 20px;
 background-color:#939;
 display: -webkit-flexbox;
 display: -moz-flexbox;
 display: -ms-flexbox;
 display: -o-flexbox;
 display: flexbox;
 display:-webkit-box;/*古い記述*/
 display:-moz-box;/*古い記述*/
 display:-o-box;/*古い記述*/
 -moz-box-flex:10.0;
 -webkit-box-flex:10.0;
 -o-box-flex:10.0;
 -ms-box-flex:10.0;
}
#main{
 background-color:#099;
 -webkit-box-flex: 1;
 -webkit-box-ordinal-group: 2;
}
#side{
 width:300px;
 background-color:#C33;
 -webkit-box-ordinal-group: 1;
}

最終的にこうなりました。
左のカラムは横幅固定、右は固定ではないけど今のところ意味ない状態です。
Safariで見ながらやってるので、その他のブラウザ用のベンダープレフィックスは適宜追加してください。

今日は以上です！