Webサイトのヘッダにあるナビゲーションバーのデザインに関する質問です。
ulタグでコンテンツを箇条書きにしたあと、CSSで横書きに変更して、borderで文字の上下左右に線を引くという方法でナビゲーションバーを作成していますが、この方法だと
┌─┬─┬─┐
│あ│い│う│
└─┴─┴─┘
(AAで上手く表現できているか分かりませんが)
のように、バーの線がページの端まで届かず、ページの中央で浮いた状態になってしまいます。
http://award.sendenkaigi.com/
http://www13.koko-dake.jp/
一方、上記のページを見ると
──┬─┬─┬─┬──
│あ│い│う│
──┴─┴─┴─┴──
のように、バーの線が端まで伸びています。
こうしたバーを作成するにはどのようにCSSを書けばよいのでしょうか。
A 回答 (5件)
- 最新から表示
- 回答順に表示
No.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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
No.4
- 回答日時:
新しめのブラウザ限定。
(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つ場所を指定していかないと行けないかも。
No.3
- 回答日時:
<div>
<ul>ナビ</ul>
</div>
外側にdiv要素をつくり、そのdiv要素に枠線を付けてください。
>こうしたバーを作成するにはどのようにCSSを書けばよいのでしょうか。
本来はCSSだけでなんとか出来るのが理想ですが、
デザインに合わせてHTMLを書き換えた方が作りやすい、もしくは作り替えなければならないという事も多いと思います。
No.2
- 回答日時:
ごく簡単な例を挙げておきます。
仕組みがわかると思います。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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
No.1
- 回答日時:
width:100%;
です。
ブロック要素は、直近のstatic以外のコンテナブロックの内寸を参照しますから、それが100%なら端まで広がるはずですが???
回答ありがとうございます。
width:100%;は試したことがありますが、これでは上手くいきませんでした。
width:100%;をどこに指定するのでしょうか。
あと、これは私の説明不足でしたが、単純にwidth:100%;を指定するだけだと
┌─┬─┬─┐
(端)│あ│い│う│(端)
└─┴─┴─┘
のようになるだけだと思うのですね。
上記のページの場合、
──┬─┬─┬─┬──
(端) │あ│い│う│ (端)
──┴─┴─┴─┴──
「あ」「い」「う」の3つのボックスだけでなく、ボックスの横までバーが伸びていますよね(─┬以左、┴─以右の部分です)。
これを実装するにはどうすればよいのかが気になっています。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html/cssの、navを2段にする...
-
<ul>~</ul>が二つ続くと間に改...
-
ol要素の番号とリスト項目の離...
-
html <li>の中の文字一部に色を...
-
htmlの<ol>タグで、数字などを...
-
番号付きリスト(<Ol><Li>・・...
-
css ol liにdisplay:inlineを設...
-
ulタグやliタグの中でbrタグ...
-
プルダウンメニューの背景色を...
-
箇条書きcssのul liで一部のli...
-
HTMLもしくはCSSのULでリンクを...
-
正規表記について「除く」の表...
-
ホームページビルダーで同じ行...
-
HTMLで画像を3つ並べる方法
-
CSSのセンタリングが、「div」...
-
リストマーカーをボックス内に...
-
文法チェックの<A>と</A>の間が...
-
ol li の回り込みの避け方について
-
liタグの左寄せ方法を教えてく...
-
SWIFTでHtmlのソースの一部を取得
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
html/cssの、navを2段にする...
-
ulタグやliタグの中でbrタグ...
-
リストの数字のフォントサイズ...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
<ul>~</ul>が二つ続くと間に改...
-
<ul><li></li></ul>にするメリ...
-
レスポンシブWebデザインでリン...
-
html <ul></ul>の並びで一行空...
-
display:table;を多段表示させたい
-
HTMLで組織図を作成する方法
-
divタグ内のコンテンツが重なっ...
-
番号付きリスト(<Ol><Li>・・...
-
ulとliで囲った文字の一部を変...
-
htmlの<ol>タグで、数字などを...
-
HTML5のfooterに見出しを付けて...
-
css 横並びのナビゲーションバ...
-
疑似クラス :activeが効きません
-
list-style-type部分だけ大きく...
おすすめ情報