[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第3回]
ブログの存在すら忘れてました、僕です。
完全放置プレイだったこの連載?を再開しなきゃと思い、重い腰を上げてみました。
さて、前回までに出来たのは、これ意味あんの?ってHTMLだけです。
意味あるか無いかは、ちょっとわかりませんが、続行!です。
flexboxを試しに使ってみたので、せっかくなので3カラムに変更します。
<div id="contents"> <div id="main"> <div> <article> <p>記事タイトル</p> <p>日時</p> <p>本文</p> <p>追記?</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </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を使用しているので、わざと真ん中を縦長にしてみたけれど、ちゃんと両サイドも伸びてる!
タイトルに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> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </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] フォームや登録の進み具合をCSSだけで表現する方法
フォームや登録過程で、今どれくらい進んでいるのか利用者に対して表示する事はとても重要な事だと思います
-
-
[jQuery] 360°回転させたり、マウスでシーンを移動するプラグイン
rollerblade-js Rollerbladeを使えば、Webサイトに360°回転させてプロ
-
-
[CSS] 角丸は便利だけど理解に苦しむ時もある
一般的な角丸の使い方 よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第1回]
現在、このブログはENJIさんが作られたSTINGER3という無料のテーマを利用させて頂いて
-
-
[CSS] メディアクエリ(Media Queries)を考える
Media Queriesとは Media Queriesとは、画面環境に応じてCSSの適用範囲を
-
-
[Dreamweaver] 便利な検索&置換
Dreamweaverの検索&置換は、便利な機能が満載! サイトを制作する上で厄介になってくるのが
-
-
[Dreamweaver] サイトタイトルを入力する枠を広げる!
デフォルトのままじゃ、狭い! DreamWeaverのタイトルを入力する枠があると思いますが、これ
-
-
[CSS] animationを使ってみる!
色の変化をCSSのみで実装できる! CSS3のキーフレームアニメーションでは、JSで出来る、背景色
-
-
[jQuery] クリックしたところから波紋が広がるプラグイン!
Rippler 以前にも波紋のプラグインを紹介しましたが、今回も新たなプラグインを紹介しま
-
-
[Dreamweaver] テンプレート機能初級編!
まずはベースとなるHTMLを作成しましょう。 Dreamweaverのテンプレートを作るには、ベー