- ベストアンサー
ナビゲーションバー borderプロパティ
サイトの横並びのメニューバーを作成する際、それぞれのボタンの間に1pxの区切り線を2本（２色）いれて立体感を出そうとしました。 しかし、まあ当たり前ですが、cssでa要素にborder-leftとborder-rightに線を指定しても、ボタンの間は２色はいっているのですが、左右両端のボタンだけ１色ずつしか線がでません。 背景画像をrepeat-xで横長に繰り返し、テキストはhtmlタグで、区切り線はcssで表現したいと思っております。どうすればいいのでしょうか？ どなたかアドバイスをよろしくお願い致します。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
>左端、右端のli要素にそれぞれidを付けてborderを指定したところイメージ通りに出来ました。 例えば、ulの左右にborderを付ければ、は不要になりませんか？または、last-childを使うとか。デザインの為のidやclassはいかがなものかと存じます。 >しかしどうしてa要素のborder-left（right）とli要素のborder-left（right）がかぶらないのでしょうか？？ 完全な入れ子ですから、被りません。margin.borderの中にwidthがありますので、border同士は特別な事をしないと、かぶらないです。また、a要素には文字のみならず範囲でリンクを反応させたい為、display:blockを当てる事が多いですが、その場合はwidth:100%を指定しているようなものです。 >また、このような方法は一般的なのでしょうか？？ 文章構造を利用してのcssは一般的です。
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTML4.01版 <!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"> <!-- div.header div.nav ol{ width:80%;min-width:470px; list-style:none; font-size:0; background-color:aqua; text-align:center; } div.header div.nav ol,div.header div.nav ol li{ line-height:30px;height:30px; margin:0 auto;padding:0; position:relative; } div.header div.nav ol li{ width:18%; display:inline-block; position:relative; padding:0 4px; } div.header div.nav ol li,div.header div.nav ol li a{ border-style:solid; border-width:0 2px; border-color:transparent; } div.header div.nav ol li a{ font-size:16px; display:block;width:100%;height:100%; position:relative; left:-2px; text-decoration:none; } div.header div.nav ol li a:hover{background-color:yellow;} div.header div.nav ol li{border-color: transparent red transparent blue;} div.header div.nav ol li a{border-color: transparent blue transparent red;} div.header div.nav ol li+li{border-color: transparent red transparent transparent;} div.header div.nav ol li+li a{border-color: transparent blue transparent transparent;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1 id="title">Your title</h1> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li><a href="/Products">製品</a></li> ＿＿＿＿<li><a href="/News">新製品</a></li> ＿＿＿＿<li><a href="/Contact">会社案内</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<div class="aside"> ＿＿＿<h3>Something aside</h3> ＿＿</div> ＿＿<h2>A smaller heading</h2> ＿＿<p> ＿＿</p> ＿</div> ＿<div class="section"> ＿＿<h2>A smaller heading</h2> ＿＿<p> ＿＿</p> ＿</div> ＿<div class="footer"> ＿＿<h3>A nice footer</h3> ＿</div> </body> </html>
お礼
丁寧なご回答ありがとうございました。 大変参考になりました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
本体忘れてました。 HTML5です。 タブは＿に置換してあるので戻す。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="ORUKA1951"> <style media="screen"> <!-- nav ol{ width:80%;min-width:470px; list-style:none; font-size:0; background-color:aqua; text-align:center; } nav ol,nav ol li{ line-height:30px;height:30px; margin:0 auto;padding:0; position:relative; } nav ol li{ width:18%; display:inline-block; position:relative; padding:0 4px; } nav ol li,nav ol li a{ border-style:solid; border-width:0 2px; border-color:transparent; } nav ol li a{ font-size:16px; display:block;width:100%;height:100%; position:relative; left:-2px; text-decoration:none; } nav ol li a:hover{background-color:yellow;} nav ol li{border-color: transparent red transparent blue;} nav ol li a{border-color: transparent blue transparent red;} nav ol li+li{border-color: transparent red transparent transparent;} nav ol li+li a{border-color: transparent blue transparent transparent;} --> </style> </head> <body> ＿<header> ＿＿<h1 id="title">Your title</h1> ＿＿<nav> ＿＿＿<ol> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li><a href="/Products">製品</a></li> ＿＿＿＿<li><a href="/News">新製品</a></li> ＿＿＿＿<li><a href="/Contact">会社案内</a></li> ＿＿＿</ol> ＿＿</nav> ＿</header> ＿<section> ＿＿<aside> ＿＿＿<h3>Something aside</h3> ＿＿</aside> ＿＿<h2>A smaller heading</h2> ＿＿<p> ＿＿</p> ＿</section> ＿<section> ＿＿<h2>A smaller heading</h2> ＿＿<p> ＿＿</p> ＿</section> ＿<footer> ＿＿<h3>A nice footer</h3> ＿</footer> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
<header> <h1 id="title">Your title</h1> <nav> <ol> <li><a href="/">Top</a></li> <li><a href="/Products">製品</a></li> <li><a href="/News">新製品</a></li> <li><a href="/Contact">会社案内</a></li> </ol> </nav> </header> (タブは （全角スペース２個)に置換してあるので戻す。) header nav ol{ width:80%;min-width:470px; list-style:none; font-size:0; background-color:aqua; text-align:center; } header nav ol,header nav ol li{ line-height:30px;height:30px; margin:0 auto;padding:0; position:relative; } header nav ol li{ width:18%; display:inline-block; position:relative; padding:0 4px; } header nav ol li,nav ol li a{ border-style:solid; border-width:0 2px; border-color:transparent; } header nav ol li a{ font-size:16px; display:block;width:100%;height:100%; position:relative; left:-2px; text-decoration:none; } header nav ol li a:hover{background-color:yellow;} header nav ol li{border-color: transparent red transparent blue;} header nav ol li a{border-color: transparent blue transparent red;} header nav ol li+li{border-color: transparent red transparent transparent;} header nav ol li+li a{border-color: transparent blue transparent transparent;} [HTML4.01版] <div class="header"> <h1 id="title">Your title</h1> <div class="nav"> <ol> <li><a href="/">Top</a></li> <li><a href="/Products">製品</a></li> <li><a href="/News">新製品</a></li> <li><a href="/Contact">会社案内</a></li> </ol> </nav> </header> div.header div.nav ol{ width:80%;min-width:470px; list-style:none; font-size:0; background-color:aqua; text-align:center; } div.header div.nav ol,div.header div.nav ol li{ line-height:30px;height:30px; margin:0 auto;padding:0; position:relative; } div.header div.nav ol li{ width:18%; display:inline-block; position:relative; padding:0 4px; } div.header div.nav ol li,div.nav ol li a{ border-style:solid; border-width:0 2px; border-color:transparent; } div.header div.nav ol li a{ font-size:16px; display:block;width:100%;height:100%; position:relative; left:-2px; text-decoration:none; } div.header div.nav ol li a:hover{background-color:yellow;} div.header div.nav ol li{border-color: transparent red transparent blue;} div.header div.nav ol li a{border-color: transparent blue transparent red;} div.header div.nav ol li+li{border-color: transparent red transparent transparent;} div.header div.nav ol li+li a{border-color: transparent blue transparent transparent;}
- DrFell
- ベストアンサー率55% (305/551)
メニューバーとのことなので、a要素だけでなくli要素を使ってませんか？ そっちに入れればいいのでは？
補足
本当にありがとうございます。 左端、右端のli要素にそれぞれidを付けてborderを指定したところイメージ通りに出来ました。しかしどうして a要素のborder-left（right）とli要素のborder-left（right）がかぶらないのでしょうか？？（ちなみにボタンのwidthはli要素にだけ、heightはa要素だけに指定してます。） また、このような方法は一般的なのでしょうか？？ さらに初歩的な質問で申し訳ないです……。教えてくださると本当に助かります。
お礼
大変わかりやすいご回答ありがとうございます。 すっきりしました。初歩的な質問に丁寧に答えてくださりありがとうございました。