HTMLテンプレート【ベースHTML６：サイドバー部分】

ども、サンデーアマグラマーNorimakiです。
前回に続いて、今回はサイドバー部分について説明していきます。

サイドバーのHTMLソースはこちら。

<div id="Sidebar">
  <div id="LeftSidebar">

  <div class="Menu">
  <div class="MenuTitle">メニュータイトル</div>
    <div class="MenuBody">
      <ul>
        <li><a href="URL">左メニュー１</a></li>
        <li><a href="URL">左メニュー２</a></li>
        <li><a href="URL">左メニュー３</a></li>
        <li><a href="URL">左メニュー４</a></li>
      </ul>
    </div>
   </div> 
    
  <div class="Menu">
  <div class="MenuTitle">メニュータイトル</div>
    <div class="MenuBody">
      <ul>
        <li><a href="URL">左メニュー１</a></li>
        <li><a href="URL">左メニュー２</a></li>
        <li><a href="URL">左メニュー３</a></li>
        <li><a href="URL">左メニュー４</a></li>
      </ul>
    </div>
   </div> 

  </div>

  <div id="RightSidebar">
  
  <div class="Menu">
  <div class="MenuTitle">メニュータイトル</div>
    <div class="MenuBody">
      <ul>
        <li><a href="URL">右メニュー１</a></li>
        <li><a href="URL">右メニュー２</a></li>
        <li><a href="URL">右メニュー３</a></li>
        <li><a href="URL">右メニュー４</a></li>
      </ul>
    </div>
   </div>
   
  </div>

</div>
</div>

まず、Sidebar というIDでサイドバー全体を括っています。
そのSidebarの中には、

・LeftSidebar
・RightSidebar

のIDがあって、左右のサイドバーを表示させています。
さらに、それぞれのサイドバーの中には、

・Menu
・MenuTitle
・MenuBody

が存在して、メニュータイトル、メニューリンクを表示させています。
メニューが複数存在する場合は、<div class="Menu">～</div>を
複数用意して対応させます。

今回のソースでは、左サイドバーにメニューが２つ、右サイドバーに
メニューを１つ用意しています。

ここを必要に応じて書き換えることになります。

最後の行は色が違っていますが、これは前回の<div id="Contents">に
対応する divタグになります。

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


ではでは。
Norimakiでした。



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