ＨＰＳ宿題　０７年１２月「Navigation Bar 解答」

宿題画像

この画像をご覧ください。ナビゲーションとして横にリンク要素が並んでいます。一部に「a:hover」時の背景色が見えますね。
要するに書き方は五つということです。
OLとULは同じものとみなします。DLは使えますね。さあ、あと3つはどう書けばいいんでしょうか？
書いたHTMLがIE以外のブラウザでは適正に描画されない。そのような解答は不合格とします。
要は正しく書くってこと。出来たかたはサイトにアップもよし、勉強会に持参もよし。　　　(12月15日付けメールにて)

12月15日、講師から久々の宿題がメールで出題されました。久々の頭の体操してみましょう。
５通りの書き方を考え付くかどうか．．．とり合えずは(ＵＬ)(ＤＬ)を試行してみました。
line-height と font-size の関係が上手く行かずにhover時の背景の上下が空いてしまっています。
JPGを使えないものかと思って、サイト検索をヒントにRollOver という書き方を試行してみました。3日間かかってしまいましたが。
(ＤＩＶ)(ＴＡＢＬＥ)は正しい書き方とは言えない．．．と言われそうです。
「どんな画面の幅でも内容が分かるように書くこと」と日ごろご指導を受けてますが、(3)(4)はう～ん、ちょっと．．．なんです。
講師へのＸマスプレゼント(苦しませのプレゼントかも？)のつもりで、ＵＰしてみます。
思いついたら訂正更新をしていきます。　　　　　(12月24日)

hover時の背景の上下が空いてしまうのが気になってまして．．．
paddingをなくして、font-size を100%(修正前は110%) にしてみるとＯＫになりました。
ＴＡＢＬＥは height をなくしてみたらこれもピッタリになりました。まだ気になるところはありますが、再ＵＰしてみます。　　(12月25日)

ＴＡＢＬＥのセル縦線が2px(太く)になってしまうの修整しました。ネット辞典をフル活用です．．．(^^;　　　(12月27日)

昨日、講師がロールオーバーの見本をメールで公開してくれました。本来デザイン的に用いる要素とのことです。
グラデーションの背景画像に文字がすっきりで流石．．．と見せていただきました。 cssもスッキリでわかりやすい！
何か真似できるかな！と試してみたくなりまして、ラストに置きました。
講師、みなさま、今年一年お世話になりありがとうございました。来年も頑張りましょう！！　　　(12月28日)

2008年の初HTMLは宿題の続きです。(7)にＰ.SPANの中のaにブロック要素をおきました。
「JPG Rollover」を抜いても一応5通りに書けたかな．．．ですが解答はいかに。　　　　　　(2008年1月13日)

1月15日、ＭＬで流していただいた講師の模範解答はこちらです。