[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

関連記事

[Dreamweaver] サイトタイトルを入力する枠を広げる!

デフォルトのままじゃ、狭い! DreamWeaverのタイトルを入力する枠があると思いますが、これ

記事を読む

[HTML]デザインは、やはり大切だった!

デザイン無しでのサイト制作には限界がある 見切り発車で、 おさらいがてらWordPressのテーマ

記事を読む

[Dreamweaver] コーディングを早くする5つの方法

コーディングは、早くなる! 普段、Dreamweaverを使っている人で、SassやZenコーディ

記事を読む

[CSS] 紙の様にふわっとしたエフェクトが全くつかえない!

寒くなってきて動きが鈍い僕です。こんにちわ。 さて、タイトルの件なのですが、たまに見か

記事を読む

[jQuery] FlickerPlateを紹介します。

かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い

記事を読む

[Dreamweaver] 不要な_notesを作成させない方法

みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると

記事を読む

[jQuery] 実際の案件でよく使っていたプラグイン4選!

1.bxSlider bxSliderは、コンテンツスライダーのプラグインです。 使い勝手が非常

記事を読む

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

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

記事を読む

[jQuery] 背景画像を画面いっぱいにするプラグイン

背景に、画像をいっぱいに広げて表示したいときってありますよね。 ちょうど、そういう必要があったため

記事を読む

[Dreamweaver] 便利な検索&置換

Dreamweaverの検索&置換は、便利な機能が満載! サイトを制作する上で厄介になってくるのが

記事を読む

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 ↑