CSSでブロックレベル要素をセンタリングする
インライン要素をセンタリングする場合は、その要素のCSSで
text-align: center;
という text-align プロパティを与えれば良いのですが、div や table 等のブロックレベル要素をセンタリングする場合、例えば下記のようにマークアップされた ブロックレベル要素、
<div id="test">[ブロックレベル要素]</div>
をセンタリングする場合は、CSSに下記のような設定を行います。
#test {
margin-left: auto;
margin-right: auto;
width: [ブロックレベル要素の幅];
}
ブロックレベル要素のセンタリングは上記が正しい方法で、Firefox や Opera、また IE6 の「標準準拠モード」や最近リリースされた IE7 では上記の設定で正常に表示されますが、IE6 の「後方互換モード」ではブラウザにバグがあるため、センタリングされません。*1
したがって、IE6 の「後方互換モード」でも同じようにセンタリングさせるためには、前述の div 要素をさらに div 要素でラップし、
<div id="wrap">
<div id="test">[ブロックレベル要素]</div>
</div>
追加した div 要素のスタイルに text-align プロパティを追加します。これは IE6 のバグを利用した手法です。*2
#wrap {
text-align: center;
}
#test {
margin-left: auto;
margin-right: auto;
width: [ブロックレベル要素の幅];
}
これでいずれのブラウザでもセンタリングされるようになります。
なお #wrap に設定した text-align プロパティは #test に対しても有効になるため、例えば内部のインライン要素を左寄せにする場合は、#test あるいはインライン要素に対して text-align: left を追加してください。
逆に、IE6 の後方互換モードでしかHTMLの表示確認をしていない場合、誤って
#test {
text-align: center;
}
というマークアップをしていると、Firefox 等ではセンタリングされませんのでご注意ください。
*1:「標準準拠モード」と「後方互換モード」の詳細については「標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示する」が参考になれば幸いです。
*2:参考 - Web標準普及プロジェクト:ブロックレベル要素をセンタリングする方法
3カラムレイアウトをナビゲーションバー部分に適用する
タイトルバナー下にナビゲーションバーを設置している場合、その左右に別の部品を並べて配置したい時のテクニックです。
ここでは、以前紹介した「ナビゲーションバー・シンプルタイプ」に「サイドバーの折りたたみ」の折りたたみマークを合体させ、ナビゲーションバーの左右に折りたたみマークを配置するカスタマイズを紹介します。
下記にサンプルを用意しました。
ナビゲーションバーにサイドバーの折りたたみマークを並べて表示
以下、基本構造および公開テンプレートによるサンプルで説明します。仕組みはタイトルの通り、3カラムレイアウトのCSSをナビゲーションバー部分に適用しています。
ナビゲーションバーの他、横型カレンダーとの組み合わせも(多分)可能です。
1.基本構造
1.1 HTML
HTMLマークアップは次のようになります。ul - li 要素は div 要素でも問題ありません。下から2行目の br 要素(の class 属性)は回り込み解除のため必須です。
リスト1.1 基本的なHTML
<div id="navi">
<ul id="left"><li>[左に表示する部品]</li></ul>
<ul id="navbar"><li>[中央に表示する部品]</li></ul>
<ul id="right"><li>[右に表示する部品]</li></ul>
<br class="clear" />
</div>
1.2 スタイルシート
下記の通りです。基本的な構造は3カラム固定レイアウトと同じです。
リスト1.2 基本的なCSS
#navi {
padding: [部品全体のパディング];
}
#navi ul {
margin: 0;
padding: 0;
float:left;
}
#navi ul,
#navi ul li {
display: inline;
}
#navbar {
width: [中央に配置する部品の幅];
text-align: center;
}
#left {
width: [左に配置する部品の幅];
}
#right {
width: [右に配置する部品の幅];
}
.clear {
clear: both;
}
2.ナビゲーションバーとサイドバーの折りたたみマークを合体
サイドバーの折りたたみ用タグ
リスト2.1 サイドバーの折りたたみ用タグ
<div id="navi">
<ul><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');"><</a></li></ul>
<ul><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">></a></li></ul>
</div>
と、ナビゲーションバーのタグ
リスト2.2 ナビゲーションバーのタグ
<div id="navbar">
<a href="<$MTBlogURL$>" title="Home">Home</a> |
<a href="<$MTBlogURL$>about.html" title="About">About</a> |
<a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a> |
<a href="<$MTBlogURL$>link.html" title="Link">Link</a> |
<a href="<$MTBlogURL$>search.html" title="Search">Search</a> |
<a href="mailto:hogehoge@hogehoge.com" title="Mail">Mail</a>
</div>
を合体すると下記のようになります。ナビゲーションバー部分は青で示しています。
リスト2.3 同時に表示させる場合のタグ
<div id="navi">
<ul><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');"><</a></li></ul>
<div id="navbar">
<a href="<$MTBlogURL$>" title="Home">Home</a> |
<a href="<$MTBlogURL$>about.html" title="About">About</a> |
<a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a> |
<a href="<$MTBlogURL$>link.html" title="Link">Link</a> |
<a href="<$MTBlogURL$>search.html" title="Search">Search</a> |
<a href="mailto:hogehoge@hogehoge.com" title="Mail">Mail</a>
</div>
<ul><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">></a></li></ul>
</div>
これだけでは横1列に並んで表示されないため、1項と同じ構造にするため、赤色部分を追加します。
リスト2.4 同時に表示させる場合のタグを修正
<div id="navi">
<ul id="left"><li id="leftmark"><a href="javascript:void(0);" onclick="changeSidebar('left');"><</a></li></ul>
<ul id="navbar"><li>
<a href="<$MTBlogURL$>" title="Home">Home</a> |
<a href="<$MTBlogURL$>about.html" title="About">About</a> |
<a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a> |
<a href="<$MTBlogURL$>link.html" title="Link">Link</a> |
<a href="<$MTBlogURL$>search.html" title="Search">Search</a> |
<a href="mailto:hogehoge@hogehoge.com" title="Mail">Mail</a>
</li></ul>
<ul id="right"><li id="rightmark"><a href="javascript:void(0);" onclick="changeSidebar('right');">></a></li></ul>
<br class="clear" />
</div>
これに下記のCSSをスタイルシートに追加します。折りたたみマークは text-align プロパティで一旦両端に配置してから padding プロパティで位置を調整しています。
リスト2.5 同時に表示させる場合のCSS
#navi {
border-bottom: 1px solid #666699;
padding: 3px 0;
font-size: 12px;
}
#navi ul {
margin: 0;
padding: 0;
float:left;
}
#navi ul,
#navi ul li {
display: inline;
}
#navbar {
width: 600px;
_width: 598px;
text-align: center;
}
#left {
width: 125px;
text-align: left;
}
#left li {
padding-left: 18px;
}
#right {
width: 125px;
text-align: right;
}
#right li {
padding-right: 18px;
}
以上です。やっつけで作ったものですので誤りがありましたらお許しを。