人に聞けない痔の悩み、これでスッキリ >>

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

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

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

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

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (5件)

もちろん、外を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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
    • good
    • 0

新しめのブラウザ限定。


(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;
}
などとして1つ1つ場所を指定していかないと行けないかも。
    • good
    • 0

<div>


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

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

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

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

仕組みがわかると思います。
 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">
<!--
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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
    • good
    • 0

width:100%;


です。
ブロック要素は、直近のstatic以外のコンテナブロックの内寸を参照しますから、それが100%なら端まで広がるはずですが???
    • good
    • 0
この回答へのお礼

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

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

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

上記のページの場合、

    ──┬─┬─┬─┬──
(端)   │あ│い│う│  (端)
    ──┴─┴─┴─┴──

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

お礼日時:2012/10/12 10:43

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q画面の端まで余白を残さずに表を出す方法を教えて下さい

ここのサイトや、http://www.ibm.com/jp/
このサイトのhttp://www.aimix.jp/index.htmlタイトルのところのように、フレームを使わず画面の端に余白を残さないようにするにはどうしたらよいのでしょうか?
ソースを見ると、表を使っているように思ったので、同じようにしてみたのですが余白が出来てしまいました。
ビルダー8の標準モードで作成しています。
色々調べたのですが、よく分かりませんでした。
ご存知の方がおられましたら、教えて下さい。
よろしくお願いします。

Aベストアンサー

やり方は色々あると思いますが、単純な方法は下記の通りです。

1.<div>を使う
<body style="margin:0px;">
<div style="width:100%;background-color:#C0D0FF;">test</div>
</body>

2.<table>を使う
<body style="margin:0px;">
<table border=0 width=100% style="background-color:#C0D0FF;">
<td>Title</td>
</table>
</body>

どちらにも共通している事ですが、<body>の部分で「 style="margin:0px;"」として、<body>の外側の余白(マージン)を「0ピクセル」に設定しないと余白は消えません。

「style="background-color:#C0D0FF;"」の部分は単純に背景色を設定しているだけです。

QCSS、width100%でもできる余白

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

 なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。

Q端から端まで横線を引きたい

携帯用ホームページを作りたいと思っているのですが、どの機種にも見れるようにしたいのです。
文字と文字の間に横線を引きたいのですが、どの画面サイズにしても端から端まで引けるようにするには、どんなタグを使えばいいのでしょうか?よろしくお願いします。

Aベストアンサー

<hr>で横線が描画されます。


あいうえお
<hr>
かきくけお

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;


人気Q&Aランキング