[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第3回]
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
ブログの存在すら忘れてました、僕です。
完全放置プレイだったこの連載?を再開しなきゃと思い、重い腰を上げてみました。
さて、前回までに出来たのは、これ意味あんの?って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] 実際の案件でよく使っていたプラグイン4選!
1.bxSlider bxSliderは、コンテンツスライダーのプラグインです。 使い勝手が非常
-
-
[Dreamweaver] サイトタイトルを入力する枠を広げる!
デフォルトのままじゃ、狭い! DreamWeaverのタイトルを入力する枠があると思いますが、これ
-
-
[jQuery] フルサイズ(ブラウザいっぱい)で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]
jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え
-
-
[Dreamweaver] テンプレートの入れ子
テンプレートは入れ子に出来る! Dreamweaverのテンプレートは、ベースを作り、さらにそのベ
-
-
[jQuery] クリック時に波紋のような効果をつける
今回は、クリックした時に波紋のような効果をつけるjQueryプラグインの紹介です。 Ripple
-
-
[CSS] 角丸は便利だけど理解に苦しむ時もある
一般的な角丸の使い方 よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。
-
-
[jQuery]背景画像にぼかしを入れるプラグイン
Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画
-
-
[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素
さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ
-
-
[jQuery] 背景画像を画面いっぱいにするプラグイン
背景に、画像をいっぱいに広げて表示したいときってありますよね。 ちょうど、そういう必要があったため