HTMLテンプレート【ベース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>

まず最初に来る、Contents というブロックがありますが、これで、
次に来る、パンくずリスト、本文、サイドバーを括っています。

今までの解説では、パンくずリストもヘッダー部分に含ませて
いましたが、都合により、このブロックに移動させました。


この部分の構成としては、

・パンくずリスト
・本文

で、成り立っています。


さらに本文は、

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

で構成されて、記事タイトルは h3タグ、記事本文は ItemBodyクラス
で括っています。そして、１記事ごとに Itemクラスで括っています。

ここでは都合２記事分、HTMLソースとして提示しています。
それ以上の記事数が必要の場合は、  <div class="Item">～</div>
を必要な数だけコピペしてください。

ということで、今回はこんな感じで。


ではでは。
Norimakiでした。



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