HTMLテンプレート【スタイルシート・本文編】

ども、サンデーアマグラマーNorimakiです。

前回はヘッダー部分をご紹介しました。
今回は本文部分です。


本文のHTMLソースはこちら。

<div id="Contents">
<div id="Pankuzu">
<ul>
  <li class="PL"><a href="URL">HOME</a> > </li>
  <li class="PL"><a href="URL">カテゴリ１</a> > </li>
  <li class="PL">個別記事１</li>
</ul>
</div>

<div id="Main">
  <div class="Item">
    <h3>{$記事タイトル１}</h3>
    <p class="Itembody">
      {$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}{$記事本文１}
    </p>
  </div>

  <div class="Item">
    <h3>{$記事タイトル２}</h3>
    <p class="Itembody">
      {$記事本文２}
    </p>
  </div>

  <div class="Item">
    <h3>{$記事タイトル２}</h3>
    <p class="Itembody">
      {$記事本文２}
    </p>
  </div>

  </div>

本文には以下の要素があります。

・パンくずリスト
・本文


そして、本文には以下の要素があります。

・記事タイトル
・記事本文


同じことの繰り返しになっちゃいますが、

まずは、divタグのIDでContentsという名前をつけて
本文のブロックを囲みます。

次に、divタグのIDでPankuzuという名前をつけて
パンくずリストを設定します。

パンくずリストは、ulタグとliタグで構成されていて、それぞれの
項目にリンクが貼られています。

liにはクラスが設定されています。必要に応じてパンくずリスト用の
スタイルを当てる事ができます。


次に、divタグのIDでMainという本文部分の
ブロックが開始されています。ここから本文が開始されます。

本文ではまず、divタグのItemというIDで
１記事分を構成します。記事数に応じてこの範囲をコピペします。


１記事内の構成は

H3タグで記事タイトル
pタグとItemBodyというクラスで記事本文。

となります。


ここまで出てきたタグ、クラスのほかに、通常記事内で使用されるであろう
タグなどについては、スタイルシートで設定しておく必要があろうかと
思います。

以上で本文編を終わります。


ではでは。
Norimakiでした。


無料ツール（配布期間限定）が手に入るメルマガ発行中です。
登録はこちらからどうぞ