- 締切済み
ナビゲーションバーを端まで伸ばす方法
Webサイトのヘッダにあるナビゲーションバーのデザインに関する質問です。 ulタグでコンテンツを箇条書きにしたあと、CSSで横書きに変更して、borderで文字の上下左右に線を引くという方法でナビゲーションバーを作成していますが、この方法だと ┌─┬─┬─┐ │あ│い│う│ └─┴─┴─┘ （AAで上手く表現できているか分かりませんが） のように、バーの線がページの端まで届かず、ページの中央で浮いた状態になってしまいます。 http://award.sendenkaigi.com/ http://www13.koko-dake.jp/ 一方、上記のページを見ると ──┬─┬─┬─┬── │あ│い│う│ ──┴─┴─┴─┴── のように、バーの線が端まで伸びています。 こうしたバーを作成するにはどのようにCSSを書けばよいのでしょうか。
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
もちろん、外をdivなどで括らずにも可能です。もしナビゲーションリストでdivで括ってなければ、こっちのほうがわかりやすいかも。 HTMLが文書構造をきちんと示すようにマークアップされていたら、HTMLを触る必要ありませんし、スタイルシートも簡単です。なによりも、将来デザインをまったく変えようとしたときが楽です。 文書構造とスタイルの分離、それこそスタイルシートを導入する大きな利点の一つですから。 デザインのためにHTMLは書きません。←これが一番のポイントかも。 <!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>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;background-color:gray;} div.header,div.section,div.footer{width:80%;margin:0 auto;max-width:800px;min-width:480px;background-color:white;} div.section div.section{width:auto;margin:0;min-width:0;} h1,h2,p{margin:0;line-height:1.6em;} div.header,div.footer{padding-top:50px;} div.footer{position:relative;} ul.nav{border:solid green 4px;border-width:4px 0;} ul.nav ,ul.nav li{display:block;list-style:none;margin:0;padding:0;line-height:30px;text-align:center;} ul.nav{position:absolute;top:0;left:0;width:100%;background-color:aqua;} ul.nav{width:100%;} ul.nav li{display:inline-block;width:15%;} ul.nav li+li{margin-left:5px;} ul.nav li a{display:block;width:100%;height:30px;border:outset 4px blue;text-decoration:none;} ul.nav li a:hover{background-color:rgb(180,255,255);} ul.nav li a:active{border-style:inset;} div.section{padding-top:50px;position:relative;} div.section ul.nav{position:absolue;top:0;} /* 本文中は縦に並べちゃえなら次の行のコメントを外す */ /* この行を消す div.section{min-height:300px;padding-top:0;} div.section ul.nav{width:20%;border:none;margin:0;} div.section ul.nav li{display:block;width:96%;} div.section ul.nav li+li{margin-left:0;} div.section>*{margin-left:21%;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿＿<ul class="nav"> ＿＿＿<li><a href="/">トップ</a></li> ＿＿＿<li><a href="/product">製品</a></li> ＿＿＿<li><a href="/information">情報</a></li> ＿＿＿<li><a href="/profile">会社案内</a></li> ＿＿</ul> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿＿<ul class="nav"> ＿＿＿<li><a href="/">トップ</a></li> ＿＿＿<li><a href="/product">製品</a></li> ＿＿＿<li><a href="/information">情報</a></li> ＿＿＿<li><a href="/profile">会社案内</a></li> ＿＿</ul> ＿</div> ＿<div class="footer"> ＿＿<ul class="nav"> ＿＿＿<li><a href="/">トップ</a></li> ＿＿＿<li><a href="/product">製品</a></li> ＿＿＿<li><a href="/information">情報</a></li> ＿＿＿<li><a href="/profile">会社案内</a></li> ＿＿</ul> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
新しめのブラウザ限定。 （IE8不可、IE9不明、Opera、Firefox、Chrome、Safari最新版で可と思われる） ul:before{ content: ' '; /* 半角スペース */ display: block; width: 100%; height: 5px; background-color: blue; } ul:after{ content: ' '; display: block; width: 100%; height: 5px; background-color: blue; } 未検証です。 ul {width:100%;}を付けないとbefore、afterが端まで延びないかもしれません。 その場合は、<li>の方をなんとかしてセンタリングする必要がありそうです。 ul{ position:relative } li{ position: absolute; left: 50%; width: 100px; } li:nth-child[0]{ margin-left: -300px; } li:nth-child[1]{ margin-left: -200px; } などとして１つ１つ場所を指定していかないと行けないかも。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
<div> <ul>ナビ</ul> </div> 外側にdiv要素をつくり、そのdiv要素に枠線を付けてください。 >こうしたバーを作成するにはどのようにCSSを書けばよいのでしょうか。 本来はCSSだけでなんとか出来るのが理想ですが、 デザインに合わせてHTMLを書き換えた方が作りやすい、もしくは作り替えなければならないという事も多いと思います。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ごく簡単な例を挙げておきます。仕組みがわかると思います。 absoluteで絶対配置してありますが、それが含まれる、static以外の親コンテナブロックを参照していることがわかると思います。 走り書きなので文法チェック以外は細かい調整はしてありません。 HTML5にするときは、<div class="header">を<header>、同様に<section><nav><footer>になります。DOCTYPEは<!doctype html>にするのと、<meta http-equiv="Content-Style-Type" content="text/css">が不要です。 ★Another HTML Lint HTML5 ( http://www.htmllint.net/html-lint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済みのHTML4.01strict+CSS2.1です。 ★タブは＿に置換してあります。 <!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>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;background-color:gray;} div.header,div.section,div.footer{width:80%;margin:0 auto;max-width:800px;min-width:480px;background-color:white;} div.section div.section{width:auto;margin:0;min-width:0;} h1,h2,p{margin:0;line-height:1.6em;} div.header,div.footer{padding-top:50px;} div.footer{position:relative;}/* relatoveです */ /* ここから */ div.nav{border:solid green 4px;border-width:4px 0;} div.nav h2{display:none;} div.nav ol,div.nav ol li{display:block;list-style:none;margin:0;padding:0;line-height:30px;text-align:center;} div.nav{position:absolute;top:0;left:0;width:100%;background-color:aqua;} div.nav{width:100%;} div.nav ol li{display:inline-block;width:22%;} div.nav ol li+li{margin-left:5px;} /* ここまで */ div.nav ol li a{display:block;width:100%;height:30px;border:outset 4px blue;text-decoration:none;} div.nav ol li a:hover{background-color:rgb(180,255,255);} div.nav ol li a:active{border-style:inset;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿＿<div class="nav"> ＿＿＿<h2>サイトマップ</h2> ＿＿＿<ol> ＿＿＿＿<li><a href="/">トップ</a></li> ＿＿＿＿<li><a href="/product">製品</a></li> ＿＿＿＿<li><a href="/information">情報</a></li> ＿＿＿＿<li><a href="/profile">会社案内</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<div class="nav"> ＿＿＿<h2>サイトマップ</h2> ＿＿＿<ol> ＿＿＿＿<li><a href="/">トップ</a></li> ＿＿＿＿<li><a href="/product">製品</a></li> ＿＿＿＿<li><a href="/information">情報</a></li> ＿＿＿＿<li><a href="/profile">会社案内</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
width:100%; です。 ブロック要素は、直近のstatic以外のコンテナブロックの内寸を参照しますから、それが100%なら端まで広がるはずですが？？？
お礼
回答ありがとうございます。 width:100%;は試したことがありますが、これでは上手くいきませんでした。 width:100%;をどこに指定するのでしょうか。 あと、これは私の説明不足でしたが、単純にwidth:100%;を指定するだけだと ┌─┬─┬─┐ （端）│あ│い│う│（端） └─┴─┴─┘ のようになるだけだと思うのですね。 上記のページの場合、 ──┬─┬─┬─┬── （端） │あ│い│う│ （端） ──┴─┴─┴─┴── 「あ」「い」「う」の3つのボックスだけでなく、ボックスの横までバーが伸びていますよね（─┬以左、┴─以右の部分です）。 これを実装するにはどうすればよいのかが気になっています。