グローバル・ナビゲータ、サイド・バー、ローカル・ナビゲータの構造

通常、サイトは階層構造を有しており、ページの現在位置と他のページへのリンクを表したグローバル・ナビゲータとローカル・ナビゲータを持つものが多いですね。また、ローカル・ナビゲータはサイド・バーのウィジェットとして実装されていることが多いです。

さて、本記事ではグローバル・ナビゲータ、サイドバー、ローカルナビゲータの定義方法について説明しましょう。なお、これらの定義位置は、pageheaderやcontentsやpagefooterやcolumn*のいずれでもよいです。

グローバル・ナビゲータはnavタグで記述します。.globalnav-ul-li-aの構造で定義しておくようにルール化しておくと、スタイルシートが使いまわせて便利です。

<nav id="globalnav" class="globalnav">
<ul id="globalmenu" class="globalmenu">
<li><a href="index.html">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
.globalnav {}
.globalnav .ul {}
.globalnav .ul li.selected {}
.globalnav .ul li.nonselected {}

・サイド・バーについて、ここではasideで記述した例とsectionで記述した例を示します。.sidebar-.widgetの構造で記述するようにルール化しておくと、スタイルシートを使いまわせて便利です。なお、タグ名のasideやsectionに対して共通のスタイルを設定すると互換性の問題が生じうるため避けたほうがいいです。

スタイルを多重継承することによって、多様性を実現することも可能です。共通スタイルであるwidgetを必ず定義しておくことで、差分スタイル(例えばwidget-big)がもし無かったケースでもそれなりな見えを実現できます。

<aside id="sidebar1" class="sidebar">
<aside id="widget1" class="widget">
<h3><!--ここにwidgetタイトルを記述します--></h3>
<!-- ここにwidgetを記述します -->
</aside>
<aside id="widget2" class="widget">
<h3><!--ここにwidgetタイトルを記述します--></h3>
<!-- ここにwidgetを記述します -->
</aside>
</aside>
<section id="sidebar1" class="sidebar">
<div id="widget1" class="widget">
<h3><!--ここにwidgetタイトルを記述します--></h3>
<!-- ここにwidgetを記述します -->
</div>
<div id="widget2" class="widget">
<h3><!--ここにwidgetタイトルを記述します--></h3>
<!-- ここにwidgetを記述します -->
</div>
</section>
.sidebar {}
.sidebar .widget{}
.sidebar .widget h3{}

ここではローカル・ナビゲータをwidgetとして記述します。ul.localmenu-li-aの構造で記述するようにルール化しておくと、スタイルシートを使いまわせて便利です。

<div id="widget1" class="widget">
<h3><!--ここにwidgetタイトルを記述します--></h3>
<ul id="localmenu1" class="localmenu">
<li><a href="リンク先のURL"><!--ここにリンク先のタイトル等を記述します--></a></li>
<li><a href="リンク先のURL"><!--ここにリンク先のタイトル等を記述します--></a></li>
</ul>
</div>
ul.localmenu {}
ul.localmenu li {}
ul.localmenu li a {}

 

カテゴリー: htmll5_style   タグ: ,   この投稿のパーマリンク

コメントを残す