[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

関連記事

[CSS] CSS3のtransitionを使ってみよう!

CSS3のTransitionは、そんなに難しくない! CSS3では、CSSのマークアップだけでア

記事を読む

[HTML] 初心者を脱却するためのHTMLの心構え!

デザインを見たら、まずレイアウトの方法をイメージしよう 僕は、基本的にデザインを頂いたときに、すぐ

記事を読む

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

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

記事を読む

[jQuery]背景画像にぼかしを入れるプラグイン

Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画

記事を読む

[CSS] 今さらだけど、必ず覚えておきたいCSSセレクタ

CSSセレクタとは? CSSセレクタを意識する事はあまりないと思いますが、今回はおさらいがてら、C

記事を読む

[CSS] メディアクエリ(Media Queries)を考える

Media Queriesとは Media Queriesとは、画面環境に応じてCSSの適用範囲を

記事を読む

[jQuery] Block Scrollプラグイン

今回は、ブロック毎にスクロールするjQueryプラグインのご紹介です。 Block Scroll

記事を読む

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

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

記事を読む

[WordPress] 自作プラグインの設定など

プラグインを自作してみる WordPressでプラグインを作成する際の設定(フック)などをまとめて

記事を読む

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

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

記事を読む

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 ↑