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

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

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

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

さて、前回までに出来たのは、これ意味あんの?って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を使用しているので、わざと真ん中を縦長にしてみたけれど、ちゃんと両サイドも伸びてる!
タイトル 2014-01-23 12-02-38

タイトルに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で装飾していきたいと思います。

ad

関連記事

[CSS] clearfixの使い方を考える

現在のclearfix 以前は、IE6に対応させるためにソースがちょっと多かったですが、現在はかな

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する

カラーピッカー 管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_

記事を読む

[jQuery] Block Scrollプラグイン

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

[CSS] ベンダープレフィックスはどこまで必要か?

各ブラウザが独自に先行実装しているCSS3 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 ↑