CSS再構築(その九) ヘッダのメニュー

あと、放置されてゐるのはヘッダ部分にある大和但馬屋ナビゲーションメニューだ。
ここはh1要素とセットではてなヘッダの偽装を狙つてゐる。

/* ナビゲーションメニュー */

ul.tab { 
    font-size:96% ; /* 文字サイズ */
    list-style-type:none ;  /* リスト項目の先頭マークをキャンセル */
    margin:0 ; /* 外側余白 */
    padding:0.2em 0 ; /* 内側余白 */
    color:#fff ; /* 文字色 */
    background-color:#77bac1 ; /* 背景色 */
    border-bottom:1px #276d75 solid ; /* 下側の罫線 */
    text-align:right ; /* リスト項目を右揃へに */
    }
 
ul.tab li { 
    display:inline ; /* リスト項目を一行に収める */
    margin:0 0.5em ; /* 外側余白 */
    }
 
ul.tab li a { color:#daeef2 ; background-color:transparent ; } /* リンク色 */
ul.tab li a:hover { color:#fff ; background-color:#933 ; } /* マウスロールオーバー */
 
form.hatena-searchform { 
    display:inline ;  /* 検索フォームを一行に収める */
    font-size:80% ;  /* 検索フォームの文字サイズ */
    }

やつてゐることははてなヘッダの真似だが、テーブルレイアウトにより表現されてゐるヘッダをリスト要素で再現するのは限界があるので、検索フォームの位置が本物とは異なつてしまつた。勝手に許容範囲とさせていただく。サンプル文書11。
さらに、勝手ついでに有料オプションを行使してはてなヘッダを非表示にする。id:adramineさんの提唱する「ヘッダを工夫してはてなダイアリーらしさを」といふ考へもそれはそれで良いものだと思ふけれども、やはりh1要素よりも前に、よりによつてテーブルレイアウトの項目が並んでゐるのは好みではない。h1とリスト要素ではてなヘッダを再現することではてなダイアリーらしさといふものへの敬意に換へたい。
さて、レイアウトに関する設定はほぼ終つた。あとは本文中に登場する様々な要素に関する設定を片付ければおしまひだ。