[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

関連記事

[jQuery] FlickerPlateを紹介します。

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

忙しくて忘れてました。僕です。 さて、今回はもうちょっと見栄えもよくしたいなーなんて考

記事を読む

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

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

記事を読む

[javascript] Google Maps javascript API v3の使い方(基本編)

Google Maps javaScript API v3とは Google Maps API V

記事を読む

[Dreamweaver] テンプレートの入れ子

テンプレートは入れ子に出来る! Dreamweaverのテンプレートは、ベースを作り、さらにそのベ

記事を読む

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

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

記事を読む

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 ↑