HTMLパーツからHTMLタグへ 【メイン部分編】
ども、サンデーアマグラマーNorimakiです。
現在、取り上げているテーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
です。サイドバー編が終わり、今回からメイン部分編に入っていきます。
メイン部分はその名の通りメイン部分なので、色々なコンテンツが
入ってくるわけですが、それらのデザイン的なものはスタイルシートに
任せて、今回のHTMLタグに関しては、大枠を設定するだけにとどめて
おきます。
まずは恒例となっている、divタグでメイン部分の範囲の設定をします。
<div id="main">～</div>
この中に必要なパーツをHTMLで記述していくわけですね。
で、その必要なパーツというのは、
・記事タイトル
・本文
です。シンプルですが本当にこれだけ。
この他に記事上のバナーみたいなものもありますが、これらのものは、
必須というわけではないので、適宜追加すればよく、今のところは
必要なパーツには入れていません。
サイドバー編でもありましたが、記事というのは１つだけではないので、
それぞれの記事を区別するために、その範囲を設定します。
<div class="item">～</div>
で、上記のパーツを入れ込んでいきます。たとえば２つの記事が
あった場合はこんな感じになるでしょう。
<div id="main">
<div class="item">
<h2>(記事タイトル１)</h2>
<p class="itembody">
(記事本文１)
</p>
</div>
<div class="item">
<h2>(記事タイトル２)</h2>
<p class="itembody">
(記事本文２)
</p>
</div>
</div>
こんな感じになります。大枠としてはこんな感じです。
次回は内部で使用するタグをいくつか取り上げてみたいと思います。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ
現在、取り上げているテーマはこちら。
「HTMLに変更を加えることなく、スタイルシートだけを変更する
だけでデザインが変えられるテンプレート」
です。サイドバー編が終わり、今回からメイン部分編に入っていきます。
メイン部分はその名の通りメイン部分なので、色々なコンテンツが
入ってくるわけですが、それらのデザイン的なものはスタイルシートに
任せて、今回のHTMLタグに関しては、大枠を設定するだけにとどめて
おきます。
まずは恒例となっている、divタグでメイン部分の範囲の設定をします。
<div id="main">～</div>
この中に必要なパーツをHTMLで記述していくわけですね。
で、その必要なパーツというのは、
・記事タイトル
・本文
です。シンプルですが本当にこれだけ。
この他に記事上のバナーみたいなものもありますが、これらのものは、
必須というわけではないので、適宜追加すればよく、今のところは
必要なパーツには入れていません。
サイドバー編でもありましたが、記事というのは１つだけではないので、
それぞれの記事を区別するために、その範囲を設定します。
<div class="item">～</div>
で、上記のパーツを入れ込んでいきます。たとえば２つの記事が
あった場合はこんな感じになるでしょう。
<div id="main">
<div class="item">
<h2>(記事タイトル１)</h2>
<p class="itembody">
(記事本文１)
</p>
</div>
<div class="item">
<h2>(記事タイトル２)</h2>
<p class="itembody">
(記事本文２)
</p>
</div>
</div>
こんな感じになります。大枠としてはこんな感じです。
次回は内部で使用するタグをいくつか取り上げてみたいと思います。
ではでは。
Norimakiでした。
無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ