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

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

img04

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

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

<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カラムにしよう!

01

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

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

02

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

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

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

04

こうなります。
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で見ながらやってるので、その他のブラウザ用のベンダープレフィックスは適宜追加してください。

今日は以上です!

ad

関連記事

[jQuery] フルサイズ(ブラウザいっぱい)で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]

jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え

記事を読む

[CSS]印刷用CSSの設定方法

印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま

記事を読む

[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする!

柔軟に対応出来るCSS リンク先やリンクしているファイルに合わせて、こういうファイルだよと一目でわ

記事を読む

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

ブログの存在すら忘れてました、僕です。 完全放置プレイだったこの連載?を再開しなきゃと思い、重

記事を読む

[jQuery] OSX風のスクロールバーにするプラグイン!

trackpad-scroll-emulator trackpad-scroll-emulator

記事を読む

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

現在、このブログはENJIさんが作られたSTINGER3という無料のテーマを利用させて頂いて

記事を読む

[jQuery] 360°回転させたり、マウスでシーンを移動するプラグイン

rollerblade-js Rollerbladeを使えば、Webサイトに360°回転させてプロ

記事を読む

[jQuery] クリックしたところから波紋が広がるプラグイン!

Rippler 以前にも波紋のプラグインを紹介しましたが、今回も新たなプラグインを紹介しま

記事を読む

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

完全に放置してました、僕です。 別に忘れていた訳じゃないんですが、時間がありませんでした。

記事を読む

[CSS] CSSで作るリストのアイコン

CSSだけでも色々出来る! CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。
PAGE TOP ↑