[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

関連記事

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

trackpad-scroll-emulator trackpad-scroll-emulator

記事を読む

[WordPress] 管理画面にテーブル(WP_List_Table)を表示する

WP_List_Table 管理画面で標準テーブルを表示したい場合は、WP_List_Tableを

記事を読む

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

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

記事を読む

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

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

記事を読む

no image

[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素

さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ

記事を読む

[CSS] 角丸は便利だけど理解に苦しむ時もある

一般的な角丸の使い方 よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。

記事を読む

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

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

記事を読む

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 ↑