ナビゲーションバーを端まで伸ばす方法

締切済

質問者：selfless
質問日時：2012/10/12 08:24
回答数：5件

Webサイトのヘッダにあるナビゲーションバーのデザインに関する質問です。
ulタグでコンテンツを箇条書きにしたあと、CSSで横書きに変更して、borderで文字の上下左右に線を引くという方法でナビゲーションバーを作成していますが、この方法だと

　　┌─┬─┬─┐
　　│あ│い│う│
　　└─┴─┴─┘
（AAで上手く表現できているか分かりませんが）

のように、バーの線がページの端まで届かず、ページの中央で浮いた状態になってしまいます。

http://award.sendenkaigi.com/
http://www13.koko-dake.jp/

一方、上記のページを見ると
　──┬─┬─┬─┬──
　　　　│あ│い│う│
　──┴─┴─┴─┴──

のように、バーの線が端まで伸びています。

こうしたバーを作成するにはどのようにCSSを書けばよいのでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： ORUKA1951
回答日時：2012/10/12 16:13

もちろん、外を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">

＿</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>

- 0
- 件

通報する

No.4

回答者： taloo
回答日時：2012/10/12 15:59

新しめのブラウザ限定。

（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;
}
などとして１つ１つ場所を指定していかないと行けないかも。

- 0
- 件

通報する

No.3

回答者： taloo
回答日時：2012/10/12 15:19

<div>

<ul>ナビ</ul>
</div>

外側にdiv要素をつくり、そのdiv要素に枠線を付けてください。

>こうしたバーを作成するにはどのようにCSSを書けばよいのでしょうか。
本来はCSSだけでなんとか出来るのが理想ですが、
デザインに合わせてHTMLを書き換えた方が作りやすい、もしくは作り替えなければならないという事も多いと思います。

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2012/10/12 12:22

　ごく簡単な例を挙げておきます。

仕組みがわかると思います。
　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_ … )
で検証済みの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">

＿</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>

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2012/10/12 10:30

width:100%;

です。
ブロック要素は、直近のstatic以外のコンテナブロックの内寸を参照しますから、それが100%なら端まで広がるはずですが？？？

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。

width:100%;は試したことがありますが、これでは上手くいきませんでした。
width:100%;をどこに指定するのでしょうか。

あと、これは私の説明不足でしたが、単純にwidth:100%;を指定するだけだと
　　　┌─┬─┬─┐
（端）│あ│い│う│（端）
　　　└─┴─┴─┘
のようになるだけだと思うのですね。

上記のページの場合、

　　　　──┬─┬─┬─┬──
（端）　　　│あ│い│う│　　（端）
　　　　──┴─┴─┴─┴──

「あ」「い」「う」の3つのボックスだけでなく、ボックスの横までバーが伸びていますよね（─┬以左、┴─以右の部分です）。
これを実装するにはどうすればよいのかが気になっています。