- ベストアンサー
ナビゲーションの書き方（HTML、CSS）
- ナビゲーションの書き方について詳しく解説します。
- バックグラウンドの部分と文字を表示する部分が重なってしまう問題についての解決方法を教えます。
- HTMLとCSSを使ってきれいに重ならないナビゲーションを作る方法をご紹介します。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
シンプルなソースを上げておきます。注意点は必要なところに書いてある。<HTML4.01 strict>です。 ★リンクのあるメニューと現ページのフォントを変えると判断しました。 ★リストの幅は統一してあります。 ★リンクはそのブロック全体を占めるようにしてあります。 ★<div id="navbar">は将来のHTML5で導入される見込みの<nav>に書き換 えることを想定し、<div class="nav">にしてあります。 なお、見やすいためタブを全角スペースに置き換えてありますから、テストするときは全角スペースをタブに置換してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>Untitled</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- div.nav ul,div.nav li{ margin:0px; padding:0px; } div.nav{ position:absolute; top: 10px; width:100%; height: 36px; /* ここが高さ */ background:url(./images/var.gif) gray ; border:solid 1px #D5D5D5; border-bottom:5px solid #66CC33; } div.nav ul,div.nav li,div.nav li a{ display:block; /* div.nav li aの指定は高さを揃えるため */ } div.nav li{ background-color: rgb(200,200,200); float:left; /* floatはここで使う */ text-align:center; font-family: Arial, Helvetica, sans-serif; font-size:18px; /* aのない場合をデフォルト */ letter-spacing:1px; list-style-type:none; /* リストのマーカーを消す */ width:100px; color:#ff6666; line-height: 35px; /* 高さ(40)-ボーダーの幅(5) */ height:35px; /* 高さ(40)-ボーダーの幅(5) */ border-color:rgb(160,160,160); border-style:solid; border-width: 0px 1px; } div.nav li a { font-weight:600; font-size:12px; width:100%; } div.nav li a:hover{ background-color: rgb(180,255,255); } --> </style> </head> <body> <h1>title</h1> <h2>subTitle</h2> <div class="Text"> <h2>ArticleTitle</h2> <p> </p> </div> <hr> <div class="nav"><!-- HTML5ではnav要素 --> <ul> <li><a href="/index.html" title="TOPへ">ＴＯＰ</a></li> <li><a href="/book/" title="書籍">書籍</a></li> <li><a href="/product/" title="製品">製品</a></li> <li>このページ</li> <li><a href="/contactUs/" title="コンタクト">コンタクト</a></li> </ul> </div> <hr> </body> </html>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞バックグラウンドの所（#navbar）と、文字を入れている所（#navbar li a） ＞のところがきれいに重なって表示するようにできません。 図が不鮮明で、いまひとつ希望されることがわかりません。 (../images/navbar.gif)画像はこれだけですか？ 文字はこの画像のどこにそろえたいのですか？
お礼
コメント頂き、有難うございます。 #navbarと#navbar li と#navbar li a は同じhight（35） にしてあるので、重なって欲しい（つまり文字は真ん中にくる） ようにしたいということです。
お礼
ありがとうございました！！ 無事できました！！