blog.ps4.jp

あとは色遣いを微調整すれば、とりあえずヘッダナビゲーションは終了。ヘッダ部分はちょちょいのちょいっとイジればそれでいいだろう。
HP制作は、どんなに思い通りのレイアウトが実現出来なくて辛く感じても、そんな状況すら楽しめなきゃ本当、「向いてない」んだろうなあ・・・
以下に本日作成したタブ化を実現するコードを掲載。
IE6でしか確認していませんが、もし宜しければ試して下さい。
タブ化された、横へ並ぶメニュー一覧（XHTML・HTML完全対応）

<!--　普通のHTMLページに以下をコピペして下さい -->
<style type="text/css"> 
<!--
#nav{
width:100%; /* パーツ全体の範囲 */
list-style-type:none; /* リストの黒丸マーカーを消す */
margin:0px;
padding:0px;
border-bottom:1px #000000 solid;　/* タブっぽくするために */
background-color:#F2F0F0;
　　　　}

#nav li{
float:left;　/* メニューを横にならべる */
width:130px; /* タブ一個の大きさ */
display:block;　/* ブロック化する。絶対必要 */
background:#fff;
border:1px solid #ccc;　/* タブの枠 */
border-bottom:none;　/* 下線を消してタブ化を成功させる */
text-align:center;
font-size:85%;
margin:3px 0px 0px 3px; /* タブとタブ間の間隔 */
padding:7px 5px 3px 5px;  /* タブ全体を含めた固まり自体の間隔 */
text-decoration:none;　/* リンクの下線を消去 */
　　　　　}

#nav li a{ 
display:block;
width:130px;
　　　　　　}

#nav a:link {
color: #8FABBE;
	}

#nav a:visited {
color: #00000;
	　　}

#nav a:hover {
color:#424040;
　　　　　　　　　} 
-->
</style>

<div id="nav">
<ul>
<li><a href="http://www.ps4.jp/">www.ps4.jp</a></li>
<li><a href="http://blog.ps4.jp/">blog.ps4.jp</a></li>
<li><a href="http://aws.ps4.jp/">aws.ps4.jp</a></li>
<li><a href="http://faq.ps4.jp/">faq.ps4.jp</a></li>
<li><a href="http://www.ps4.jp/">続々公開！</a></li>
</ul>
</div>
<!-- コピペ終了です -->
いかがでしたか？　きちんとタブ化されました？　サイトを持っている方はぜひお試し下さい。