HTMLテンプレート【スタイルシート・サイドバー編】

ども、サンデーアマグラマーNorimakiです。
久しぶりにテーマに戻ります。

前回は本文部分をご紹介しました。
今回はサイドバー部分です。

<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>

サイドバー部分には以下の要素があります。

・左サイドバー
・右サイドバー


そして、各サイドバーには以下の要素があります。

・メニュータイトル
・メニュー本文


メニュー本文はリンクだったり文章だったりしますが、
この部分を１つの塊として、複数のメニューが必要なだけ
繰り返されるという構造になっています。


構造としては、まず、

divタグでSidebarというIDを設定して
サイドバー全体を括ります。

次にdivタグで左サイドバーをLeftSidebarというIDで、
右サイドバーをRightSidebarというIDで括ります。

そして、各サイドバーの内部は各メニューをMenuというクラス名で
設定し、メニュータイトルをMenuTitleというクラス名で、
メニュー本文をMenuBodyというクラス名で設定します。

メニュー本文にリンクを入れる場合は、リストタグ（ul,liタグ）などで
リスト化します。

ここにリストの代わりに、文章を挿入する場合は、pタグで挿入することに
なろうかと思います。

それぞれにスタイルを当てて調整する必要があります。
ということで、こんな感じです。


ではでは。
Norimakiでした。


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