- ベストアンサー
ブロック要素のボーダーに関して質問させて下さい。
ブロック要素のボーダーに関して質問させて下さい。 お世話になっております。添付画像はサイトのナビゲーションメニューの一部なのですが、各ブロック要素にボーダー（1pxのライン）を指定しているため、隣り合った箇所は2倍の太さになっています。 そこで、隣り合った箇所も1pxにしたいのですが、クラス名などを統一したままCSSなどで回避することは可能なのでしょうか？ クラス名を適時変えたり、テーブルなどであれば回避することが出来ると考えていますが、クラス名を同じにしたままで回避することが出来ればと質問させて頂きました。 お忙しいなか恐縮ですがアドバイスのほど宜しくお願い申し上げます。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- zeff
- ベストアンサー率69% (137/198)
たとえばulに上下左ボーダー、 リストに右ボーダーっていうのはどうでしょうか。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>sample</title> <style type="text/css"> <!-- div#gnavi{ width:800px; height:30px; } div#gnavi ul{ list-style-type:none; padding:0;margin:0; border-width: 1px 0px 1px 1px; border-style: solid none solid solid; height:28px; } div#gnavi ul, div#gnavi a{ border-color:black; } div#gnavi ul li{ display:inline; } div#gnavi ul li a{ float:left; display:block; width:120px; line-height:28px; text-align:center; overflow:hidden; border-width: 0px 1px 0px 0px; border-style: none solid none none; } div#gnavi ul li a:link, div#gnavi ul li a:visited, div#gnavi ul li a:hover, div#gnavi ul li a:active{ text-decoration:none; } --> </style> </head> <body> <div id="gnavi"> <ul> <li><a href="http://www.google.co.jp/">Google</a></li> <li><a href="http://www.yahoo.co.jp/">Yahoo!!</a></li> <li><a href="http://www.msn.co.jp/">MSN</a></li> </ul> </div> </body> </html>
お礼
こんにちは。早々アドバイス、ならびにソースまでご提示いただき有難う御座います。 他の影響もあり、今回アドバイスいただいた内容は見送りさせていただきますが、とても勉強になりました。ありがとうございました。
- fujillin
- ベストアンサー率61% (1594/2576)
各要素にはborder-rigth:1px だけを指定しておいて、最初の要素だけ擬似要素指定で、○○:first-child { border-left:1px ～ とか？ （擬似要素に対応できていないブラウザも残っているようですが）
お礼
こんにちは。早速のアドバイスをありがとうございます。 疑似要素指定・・初めて耳にしました。勉強になります。 ありがとうございました。
関連するQ&A
- ブロック要素のボーダーについて質問させて下さい。
ブロック要素のボーダーについて質問させて下さい。 お世話になっております。添付画像はナビゲーション用メニューの一部でリストにて表示させているのですが、各ブロック要素にボーダーを指定しているため、隣り合った箇所は2倍（1pxが2pxになっている）の太さになってしまいます。 これを回避するため、左サイド、右サイド、他、3種類のクラスを用いれば可能かと思われますが、クラス名など変更せずに回避することは可能でしょうか？
- ベストアンサー
- HTML
- tbody要素に削除出来ないマージンが入る
table要素の thead要素及びtbody要素についてですが この2つの要素は内部的に margin: 2px; が指定されたような感じになっています。(firebugなどで確認) つまり、上下左右にマージンが2px自動的に入ってます。 もちろん、table要素とtbody要素には、margin及びpadding及びborderは0を設定しています。 このマージンのようなものを取り去りたいのですが margin : 0px;などとしてもこのマージンのようなものを取り去ることは出来ませんでした。（ツールでみると、マージン及びパッディングは０なので当たり前ですが） table要素を使う限り、この2pxというものは自動的に挿入され、CSSでは取り去ることは無理なのでしょうか？ 回避策としては、margin: -2px;で回避することは可能みたいなのですが そもそもどうしても2pxが入ってしまうのか、またそれがなぜCSSで設定出来ないようになっているのか 疑問に思っています。 これは、firefox3.6(firebug) 及び ie8(開発ツール)で確認しました。 分かりにくい説明かもしれませんが宜しくお願いします。
- ベストアンサー
- HTML
- block要素を使ったものに対してのセンタリング
CSSにて、メニューボタンなどに文字をのせて表示するときに、 1行だとpaddingで制御した結果、センタリングされるのですが、2行以上になる1行を基準にした位置から下に配置されてしまいます。 vertical-aglinを使ってみようとしましたが、block要素を使っている場合、利用できないようです。 #aaa #test1 li a { display:block; height:40px; padding:14px 5px 0 48px; } 何かアドバイスがありましたら、お教えいただければ幸いです。 よろしくお願いします。
- 締切済み
- CSS
- CSSでのブロック要素に囲み線
下記、記述では#lineと#headerがぴったり重なると思うのですが、ブロック要素（#lineの部分）にborderを設定するとマージンができてしまうのですが、なぜでしょうか？border部分を削除するとぴったり重なります。 <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css" media="screen"><!-- #line { background-color:yellow;border:1px solid #808080;} #header { background-color:#23819e;text-align:center;} --></style> </head> <body> <div id="line"> <div id="header"> <p>aaa</p> </div> </div> </body> </html>
- ベストアンサー
- HTML
- CSSでブロックレベル要素をロールオーバーさせる
こんにちわ アンカータグにマウスが乗った場合に、 属する親ブロックレベル要素のスタイルを変更するのは どのように行うのでしょうか？ #HTML <div class="box"> <p>タイトル</p> <p><a href="#">あいうえお</a></p> </div> #CSS 通常時 div.box{ border: 1px #dddddd solid; } ロールオーバー時 div.box{ border: 1px red solid; }
- ベストアンサー
- HTML
- CSS スタイルを子要素の子要素に継承させたくない
スタイルシートについてまだ初心者なため質問させてください。 以下のようにテーブルのボーダーのスタイルを子要素（<table><td>）にスタイルを継承（？）させているのですが、この方法だと子要素の子要素（<table><td><table><td>）に対しても継承されてしまいます。 table.border { border-style:solid; border-width: 1px 1px 1px 1px; border-collapse: collapse; } table.border td { border-style:solid; border-width: 1px 1px 1px 1px; } table.border > td {…} という指定の方法もあるようですが、こちらは対応しているブラウザが乏しいようで事実上使用できません。 子要素の子要素に対して以下のクラスを指定しても継承が優先されるためか反映されませんでした。 table.none { border-style:none; } table.none td { border-style:none; } HTMLタグに直接以下のように指定しても同様でした。 <table style="border-style:solid;"> どこかのサイトでは継承をリセットする必要があるような事が書いてあったような気がします。 もちろん継承を利用せず<table>および<td>個々にクラスを指定すれば（不必要なタグには指定しなければ）可能だと思いますが、これだと大きなテーブルの場合に非効率で悩んでいます。 どのようにすれば子要素の子要素にスタイルを継承させないようにできるでしょうか？
- ベストアンサー
- CSS
- jsを使って2つのラジオボタンでブロック要素の出し入れをしたいのですが
jsを使って2つのラジオボタンでブロック要素の出し入れをしたいのですが、 IE7でだけチェックした結果が逆になってしまいます。 考えられる原因はなんでしょうか？ よろしくお願いいたします。 function entryChange1(){ radio = document.getElementsByName('coursetimetype1'); if(radio[0].checked) { $('#c1').css('display','none'); $('.c_void').css('display','none'); $('.c_master').css('width','262px'); }else if(radio[1].checked){ $('#c1').css('display','block'); $('.c_void').css('display','block'); $('.c_master').css('width','585px'); }
- ベストアンサー
- JavaScript
- CSSでテーブルボーダーを一発指定出来ません！
現在テーブルに対してのCSSを設定しているのですが、私の勘違いなのかうまく出来ません・・・。 例えば縦5×横5列の表が有ったとします。 そこにCSSで四方1pxのボーダーを指定します。 でも、これだけだと表の一番外枠部分にしかボーダーが表示されません・・・。（当然なのかもしれませんが） そこで、CSSを使い中のブロック？部分、<td>全てにボーダーを表示させたいのですが、そのようなことは可能なのでしょうか？ ようは、表の枠線全てをcssで表示させたいのですが、この様な事は可能でしょうか？？ ご存知の方がいましたら、アドバイスいただけますでしょうか？ 宜しくお願いいたします。
- ベストアンサー
- 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
- 2年近く使用していなかったDCP-J987Nで、コピーをしようとした際に白紙のまま用紙が出てきます
- また、携帯からの画像を印刷しても白紙で印刷されません
- お使いの環境は無線LANで接続されています
お礼
お世話になっております。早々のアドバイスをありがとうございます。 実際のソースに組み込み、描いていた結果を得ることが出来ました。 ありがとうございました。