- ベストアンサー
ナビゲーションバー borderプロパティ
- みんなの回答 （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要素だけに指定してます。） また、このような方法は一般的なのでしょうか？？ さらに初歩的な質問で申し訳ないです……。教えてくださると本当に助かります。
関連するQ&A
- HTMLのborderについてです
このHTMLとCSSを見てください HTML部分 <div id="frame"> <h2>Bookmark</h2> <ul> <li><a target="_blank" href="">ブログ</a></li> <li><a target="_blank" href="">google</a></li> </ul> </div> CSS部分 #frame { border-style:solid; border-width:1px; border-color:black; width: 200px; padding:0 1px; } h2{ background-image: url("ex05_titlebg.png"); background-repeat: repeat*20; border: #808080 2px solid; padding: 0 7px 0 } ul>li>a { text-decoration: none; } これで表示したときに上下の線と内容の間に隙間があいてしまいますこの隙間を埋めるにはどうしたらいいでしょうか？ あとliのところが左側に寄ってくれてなくて左側の線と間があいてしまっているのでこちらの間も埋めたいです 調べてみましたが分からず周りに詳しい知り合いもいないので質問しました もしこういう質問に特化した掲示板などがあるならそちらも合わせて教えていただきたいです
- ベストアンサー
- HTML
- 上下だけのボーダーなのに左に意図しないボーダー発生
. hrタグの上下にボーダーを以下のようにして入れたのですが、親要素に沿って左側に<hr>の高さ分のボーダーができてしまいました。とりあえず border-left: none; で消したのですが、左に出た意図しないボーダーは何が原因なのでしょうか？ hr { height: 30px; border-top:2px solid gray; border-bottom:2px solid gray; } .
- ベストアンサー
- CSS
- ナビゲーションバーを端まで伸ばす方法
Webサイトのヘッダにあるナビゲーションバーのデザインに関する質問です。 ulタグでコンテンツを箇条書きにしたあと、CSSで横書きに変更して、borderで文字の上下左右に線を引くという方法でナビゲーションバーを作成していますが、この方法だと ┌─┬─┬─┐ │あ│い│う│ └─┴─┴─┘ （AAで上手く表現できているか分かりませんが） のように、バーの線がページの端まで届かず、ページの中央で浮いた状態になってしまいます。 http://award.sendenkaigi.com/ http://www13.koko-dake.jp/ 一方、上記のページを見ると ──┬─┬─┬─┬── │あ│い│う│ ──┴─┴─┴─┴── のように、バーの線が端まで伸びています。 こうしたバーを作成するにはどのようにCSSを書けばよいのでしょうか。
- 締切済み
- CSS
- <li>タグを使って横並びメニューボタンを作成する際ベストな手法とは？
CSSで、横並びのメニューボタンを作成しています。 （文字も画像にしています。） imgタグで並べるのではなく、liタグを使って、テキストは表示しないようにしたいと思い、下記のようなソースで記述しました。 /*htmlソース*/ <li class="tmenu01"><a href="sample">はじめに</a></li> /*cssソース*/ li.tmenu01 { display:block; width:126px; height:31px; background:url(image/menu01.gif) no-repeat; text-indent:-9999px; float: left; } しかし、text-indent:-9999px;とfloat: left;をいっしょに使用すると、背景画像・文字とも表示されなくなってしまいます。 いろいろネットを調べてみたのですが、文字を飛ばす+横並びのバージョンの解決方法が見つからず、方法がわかりません。 いい方法がありましたら、どなたか教えてください…m(_ _)m
- ベストアンサー
- ホームページ作成ソフト
- テキストをボーダーで囲むCSS
CSSを本を見ながらやっていますが、 下記の例文でテキストをボーダーで囲むものをやってみました。 この中で、 margin-left:100px; margin-right:100px; というころですが、これはブラウザに対しての両サイド空きを意味していると思うのですが、逆に囲んでいる幅のほうを指定するにはどうしたらよいのでしょうか。 または、そのようなことはできないのでしょうか。 <STYLE TYPE="text/css"> <!-- P.text {text-align:justify; text-justify:distribute; line-height:154%; margin-left:100px; margin-right:100px; border-style:solid; border-width:2px; border-color:#dd8888; padding:10px} --></STYLE> *****HTML <P CLASS="text"> テーブルみたいになるテキスト</P>
- ベストアンサー
- HTML
- borderの位置を調整する方法を教えてください
【html】 <ul> <li>A</li> <li>B</li> </ul> 【ｃｓｓ】 li{ border-left: 1px solid #CCCCCC; } このような状態の場合、線の表示される位置を調整するには どうすればいいのでしょうか？ 初歩的な質問だと思いますが、よろしくお願いします。
- ベストアンサー
- HTML
- CSSボーダーの設定（横並びボタンの間にだけボーダーを）
教えてください。 横並びのナビボタンを作成したのですが、ボタンが隣接する箇所だけにボーダーを設定することは可能なのでしょうか。 左だけ指定しますと、右端のボタンの右の線がなく、左端のボタンには左に線がでて、バランスが悪いです。 左右に指定すれば、合間だけ線が太くなります。 かつ、現在ページ（リンクなし）ボタンは、下の線は設定なしで、他ページへのボタン(リンクのあるページへのナビボタン）は下部に線を入れてます。 以下は「左」のみの指定、hover時の下部線を設定しています。 よろしくご指導お願い申し上げます。 ul#lc_navi{ margin: 0px; font-size: 12px; font-weight: bold; color: #646464; list-style-type:none; width:754; } ul#lc_navi li{ display:block; float: left; width: 150px; height:22px; list-style-type: none; text-align: center; font-weight: bold; line-height:20px; color: #646464; background-color:#FFFFFF; } ul#lc_navi a{ width:150px; height:22px; text-decoration:none; color: #646464; background-color:#E9C3F6; border-bottom: solid; border-width:1px; } ul#lc_navi a:hover{ background-position:top center; text-decoration:underline; color: #646464; background-color:#E1F9FA; }
- ベストアンサー
- デザイナー・クリエイティブ職
- borderの範囲
cssコーディングに関しての質問です。 現在以下のようなスタイルとHTMLを組んでいます。 ==css============ #style1 { width:500px; padding: 15px 0 0 15px; border-left:1px solid #ccc; border-top: 1px solid #ccc; } #style1 p { margin:0; padding:0; } .style2 { float:right; clear:both; margin:0 0 20px 30px; } .style2 img{ margin:0; padding:0; } ==html============ <body> <div id="style1"> <div class="style2"><img src="sample.jpg" width="200" height="200"></div> <div class="style2"><img src="sample.jpg" width="200" height="200"></div> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </body> イメージをfloat:right;に指定し、 縦並びにしたいので、clear:both;を入れた所、 border-left:1px solid #ccc;のborderが文字までは表示されるのですが、 画像の延長上は無くなって表示されてしまいます。 右に画像を配置し borderを伸ばしたい時はどのようにすればよいのでしょうか？ よろしくお願いします！
- ベストアンサー
- HTML
- CSSでborderの長さを指定、または可変にしたい。
下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。 文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。 h3{ border-width : 0px 0px 1px 5px; border-style : solid ; border-color : #FF3333; padding-left : 5px; }
- ベストアンサー
- HTML
- Firefox15.0におけるborderの挙動
Firefox15.0環境でのborderの挙動についての質問です。 divをfloatで並べてレイアウトし、borderで境界線を描画しております。 その際、border-widthを1pxで設定しているのですが、Firefox15.0環境だとborderが若干太くなってしまい、レイアウトが崩れるケースがあります。 Firebugにて確認した所、1pxの指定が実際には1.1167pxという半端な値が設定されていました。 ところが、問題のレイアウト箇所のみ別HTMLに抜き出して確認した所、border-widthは1pxのままでレイアウトは崩れませんでした。 この状況から、他のCSS設定や親要素からの継承が影響しているのだろうと考え、調べたのですが、Firebug上ではレイアウトが崩れる場合（完全版）と、レイアウトが崩れない環境（抜粋版）との間にCSSの設定の相違はありませんでした。 ちなみに、他に試したブラウザです IE6 IE9 Firefox12 では上記問題は起こらず、正常に表示されました。 書くまでもないぐらいのざっくりした感じですがソースは以下のようなイメージです。 //css div.main{ width:500px; height:500px; } div.a{ width:30px; height:30px; border:1px solid black; float:left; } div.main{ width:60px; height:30px; border:1px solid black; float:left; } //html <div class="main"> <div> <div class="a"></div><div class="a"></div><div class="a"></div><div class="a"></div> </div> <div> <div class="b"></div><div class="b"></div> </div> </div> これだけの情報では解決策を頂けないのは重々承知しているので、何かヒントや直接的には繋がりがなくとも、border-widthのおかしい挙動について何かご存知の方が居ましたら教えて頂けないでしょうか？
- 締切済み
- HTML
お礼
大変わかりやすいご回答ありがとうございます。 すっきりしました。初歩的な質問に丁寧に答えてくださりありがとうございました。