CSSレイアウト サンプルソース

ここでは横並びのメニュー｜グローバルナビゲーションを例に配置について説明します。

よく画面右上に「会社概要/個人情報の取り扱い」というリンクがあります。又は、ヘッダーの直後に横並びのグローバルナビゲーションを設置しているサイトがあります。通常、普通にこの位置（右上及びヘッダー直後）に配置させる場合html上でヘッダーの中などはじめに記述しますね。

しかしながら、アクセシビリティを考慮するならなるべくhtml上では最後の方に記述したいものです。（音声読上げを使用する場合、ページを移るたびに同じナビゲーションの説明を聞くのはちょっと酷です。いち早く目的の情報にアクセスしたいものです。）

今回はこの様な配置法について説明します。

追記）アクセシビリティについて調べた結果、ヘッダー内もしくはヘッダー直後にグローバルナビゲーションを設置した場合、音声読み上げに対してはメニューをスキップさせる方法がありました。これについては時間のある特に解説したいと思います。よって下記は配慮のひとつとして参考程度にして下さい。2008.11

グローバルナビ配置解説

横並びのグローバルナビゲーションがあったとします。下記サンプルのような配置にする場合、一般的は「#globalnavi」等としてボックスを作成し「#header」の後に記述するか、もしくは、「#globalnavi」をヘッダー内に入れ込む手法です。

グローバルナビゲーションの配置サンプル

通常のXHTML

<div id="header">
<h1>***タイトル***</h1>
<div id="globalnavi">
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</div>
</div>
<div id="contents">
***コンテンツ***
</div>
<div id="sidebar">
***サイドバー***
</div>
<div id="footer">
<p>著作権表示</p>
</div>

アクセシビリティ配慮のXHTML

<div id="header">
<h1>***タイトル***</h1>
</div>
<div id="container">
<div id="contents">
***コンテンツ***
</div>
<div id="sidebar">
***サイドバー***
</div>
<div id="footer">
<p>著作権表示</p>
</div>
<div id="globalnavi">
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</div>
</div>

CSS指定方法

*{
margin: 0;
padding: 0;
}

#wrapper{****: ****;}

#header{****: ****;}

#container{
width: 100%;
position: relative;
padding: 2em 0 0 0;
}

#contents{****: ****;}

#sidebar{****: ****;}

#footer{****: ****;}

#globalnavi{
position: absolute;
top: 0;
left: 0;
}

考え方は配置指定のpositionプロパティの利用です。

「初級ホームページ作成講座内のposition編」でコンテンツとサイドバーを配置する為に基点となるボックスを配置しました。今回はこれを利用し#containerにposition: relative;指定し#globalnaviの基点とします。

この指定方法で注意しなければならない事は「#globalnavi」の高さと「#contents」「#sidebar」の余白指定です。「#globalnavi」は絶対配置により、他のボックスに影響を与えません。よって不測の事態（ユーザーがブラウザ側でフォントサイズを大きくする等）に対処する必要があります。

因みにサンプルでは下記のように指定しています。

#container{
width: 100%;
position: relative;
padding: 2em 0 0 0;
}

#globalnavi{
position: absolute;
top: 0;
left: 0;
}

#globalnavi ul{
list-style-type: none;
width: ****;
}

#globalnavi li{
width: ****;
float: left;
}

#globalnavi li a{
text-align: center;
padding: 0.5em 0;
width: 100%;
display: block;
background-color: #ff9900;
color: #000000;
}

#globalnavi li a:hover{
background-color: #0099cc;
color: #ff0000;
}

グローバルナビゲーションのli要素で上下に0.5文字分の余白を指定しています。つまり余白部分とアンカーテキスト部分で2文字分と考え、#contents部分の上方向に2文字分の余白を設けました。

こうする事で、コンテンツ部分とサイドバー部分は常にグローバルナビゲーションの高さに対応できます。