- ベストアンサー
【CSS】borderの変則指定？li要素
メニューなどを例えば#accessにして横並びに項目お置きます。 liで並べて、項目の間に仕切り線が入るようにborderを指定します。 上下にはいらないので、左右に指定します。 すると、１個目のliの右の線と２個目のliの左の線が並ぶので 1px指定しても１個目の左と最後の右だけで、残りは2pxになります。 当然ですが。。 全部1pxにしたい場合どうすればいいですか？
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
IEがネックになりますね IEを無視する場合は、こんな感じ <style> ul.access{list-style:none;} ul.access li{float:left;width:100px;text-align:center;border:1px solid #000000; border-left:0px solid;} ul.access li:first-child{border-left:1px solid;} </style> <ul class="access"> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> </ul> これにIE対策をして <style> ul.access{list-style:none;} ul.access li{float:left;width:100px;text-align:center;border:1px solid #000000; border-left:0px solid; behavior:expression( this.className+=this.previousSibling?"":(this.className?" ":"")+"firstchild" ); } ul.access li:first-child,ul.access li.firstchild{border-left:1px solid;} </style> <ul class="access"> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> </ul>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞上下にはいらないので、左右に指定します。 左右じゃなく一方だけ指定すればよいです。 <div class="header"> <p>？？？？？？</p> <div class="nav"> <ol> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ol> </div> </div> ちなみに、[HTML5]だと <header> <p>？？？？？？</p> <nav> <ol> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ol> </nav> </header> の<li>要素をinline-blockで横並びにした後、最初の<LI>のみ左右につけたら、二つ目以降の<LI>はborder-width:0 1 0 0;で右側だけborderがつく。 [HTML4.01strict]サンプル ★タブは＿に置換してあるので戻す。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.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"> <!-- div.header div.nav ol,div.header div.nav ol li{ text-align:center;list-style:none;margin:0;padding0; font-size:0; line-height:26px; } div.header div.nav ol li{ display:inline-block; width:20%; font-size:16px; border:black solid; border-width:0 1px 0 1px; position:relative; } div.header div.nav ol li+li{ border-left-width:0; } div.header div.nav ol li a{ display:block; width:90%;height:100%;margin: 0 auto; text-decoration:none; background-color:rgb(240,240,240); overflow:hidden; position:relative; } div.header div.nav ol li a:hover{ background-color:red; text-indent:-20em; } div.header div.nav ol li a:hover:after{ display:block; position:absolute;top:0;left:0; text-indent:0; width:100%; } div.header div.nav ol li a[href="/"]:hover:after{content:"トップ";} div.header div.nav ol li a[href="/Products"]:hover:after{content:"製品";} div.header div.nav ol li a[href="/Manual"]:hover:after{content:"マニュアル";} div.header div.nav ol li a[href="/contact"]:hover:after{content:"問合せ";} --> </style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿＿<div class="header"> ＿＿＿<p>？？？？？？</p> ＿＿＿<div class="nav"> ＿＿＿＿<ol> ＿＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿＿<li><a href="/Products">Products</a></li> ＿＿＿＿＿<li><a href="/Manual">Manual</a></li> ＿＿＿＿＿<li><a href="/contact">Contact</a></li> ＿＿＿＿</ol> ＿＿＿</div> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<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>
関連するQ&A
- CSSでborderの指定を解除する記述方法
CSSでborderの指定を解除する記述方法 たとえば、見出しなどで上下右だけ罫線がほしいとき、 h3 {border: 1px solid black; border-left: none;} のように上下左右ボーダーを指定しておいて、左だけ指定を解除したいです。 このときの左のボーダーを「線をなしにする」という指定方法についてお聞きします。 border-left: none 0; と、0を入れている記述を見つけたのですが、必要なのでしょうか？ 自分でも調べてみましたが、「noneと記述するだけで強制的に太さはなしになるため、0は必要ない」という意見と、0を記述しているソースとあり、どちらがベターなのかわかりません。 古いブラウザとの互換で0が必要なのかな…、と調べてみましたが、はっきりわかりませんでした。 詳しい方、お教えくださると大変助かります。 どうぞよろしくお願いします。
- ベストアンサー
- 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; }
- ベストアンサー
- デザイナー・クリエイティブ職
- CSSでborderの長さを指定、または可変にしたい。
下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。 文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。 h3{ border-width : 0px 0px 1px 5px; border-style : solid ; border-color : #FF3333; padding-left : 5px; }
- ベストアンサー
- HTML
- オンマウスにしたときのborder-colorの指定（CSS）
スタイルシートで立体的に見せるボタンを作成しています。 .menu05 ul { list-style-type: none; line-height: 170%; } .menu05 li { border-top: solid 2px #ffffff; border-right: solid 2px #c0c0c0; border-bottom: solid 2px #c0c0c0; border-left: solid 2px #ffffff; display: block; float: left; } .menu05 a:hover { border-top: solid 2px #c0c0c0; border-right: solid 2px #c6c6c6; border-bottom: solid 2px #c6c6c6; border-left: solid 2px #c0c0c0; color:#ff0000; display: block; } で、 HTMLの記述は、 <div class="menu05"> <ul><li><a href="#">ご案内</a> <li><a href="#">プラン</a> <li><a href="#">プレゼント</a></ul> </div> です。 オンマウスにしてもborder-colorが変わりませんが、どこを修正したらよいでしょうか？
- ベストアンサー
- HTML
- <li>で並べたメニューのリンク色指定class
<li>で並べたメニューのリンク色指定をクラスごとにする方法が分からず困っています。 図のような状態で、MENUは（赤）、TOPは（青）と２種類の色分けをしたメニューバーを作っています。 それぞれ、a:hoverのときに色が薄くなるよう指定したいのですが うまくいきません。 ●現在やっている方法 ・htmlでリストを組み、それぞれリンクタグにクラス指定 MENU（赤） … class="menu" TOP（青） … class="top" ・cssでclassのリンク色a、a:hoverを指定 【html】 <ul> <li><a href=～ class="menu">MENU</a></li> <li><a href=～ class="menu">MENU</a></li> <li><a href=～ class="menu">MENU</a></li> <li><a href=～ class="top">TOP</a></li> </ul> 【css】 a.menu:link { color: #000000; border-left-width: 5px; border-left-style: solid; border-left-color: #ff0000; padding-left: 5px; font-size: 10px; margin-right: 10px; } a.menu:hover { color: #cccccc; border-left-width: 5px; border-left-style: solid; border-left-color: #ffc5c5; padding-left: 5px; font-size: 10px; margin-right: 10px; } …class="top"（青）も同じ感じ ---------------------------- クラスごとのリンク色指定がうまく認識されていない気がします。 記述が間違っているのでしょうか？それともそもそもこの方法が間違っているのでしょうか？ お恥ずかしながらこの場を借りて質問させて頂きました。 色々調べてみたのですが、苦戦しています。お知恵を貸して頂けると助かります。
- 締切済み
- HTML
- ブロック要素のボーダーについて質問させて下さい。
ブロック要素のボーダーについて質問させて下さい。 お世話になっております。添付画像はナビゲーション用メニューの一部でリストにて表示させているのですが、各ブロック要素にボーダーを指定しているため、隣り合った箇所は2倍（1pxが2pxになっている）の太さになってしまいます。 これを回避するため、左サイド、右サイド、他、3種類のクラスを用いれば可能かと思われますが、クラス名など変更せずに回避することは可能でしょうか？
- ベストアンサー
- HTML
- borderについて2つの質問
こんにちは。 メニューバーが左に、メインコンテンツが右にあるホームページを作っています。 そこで、この2つを見た目で分けるために、メニューの右にborderを引いています。 つまり、border-rightを使っています。 しかし、メニューが短いのでborderが途中で切れています。 borderはメニューの長さしか表示されません。 そこで、これを一番下までもってくるにはどうすればいいのか教えてください。 もう一つお聞きしたいのは、メインコンテンツの右側にもborderを置いたのですが、 一番下まで表示されるのはいいのですが、 スクロールバーを上下に動かすとこの線の一部が欠けたりします。 何回か上下に動かしているとまた直ったりするのですが、非常に不安定です。 このサイトを実際にアップ（公開）した後もこのようなことが起こるのでしょうか。 これを解決する方法があれば教えてください。 どうぞよろしくお願いします。
- ベストアンサー
- HTML
- CSSでボーダーがとぎれてしまう・・
すみません・・普段は自分で調べても分からないときだけこちらで質問するのですが、今回は作業に追われておりまして・・申し訳ない気持ちですが、質問させていただきます。 CSSで・・・ header、main、menu、footer の順番でdivで囲まれたコンテンツ？があります。 headerが上でその下の左にmenu、右にmainと並べて、その境目にボーダー線を指定したいのですが、どちらに指定しても逆側が長くなってしまうとボーダーが途中で途切れてしまいます。 これをこれを常にfooterの位置まで表示する方法はありませんでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- ナビゲーションバー borderプロパティ
サイトの横並びのメニューバーを作成する際、それぞれのボタンの間に1pxの区切り線を2本（２色）いれて立体感を出そうとしました。 しかし、まあ当たり前ですが、cssでa要素にborder-leftとborder-rightに線を指定しても、ボタンの間は２色はいっているのですが、左右両端のボタンだけ１色ずつしか線がでません。 背景画像をrepeat-xで横長に繰り返し、テキストはhtmlタグで、区切り線はcssで表現したいと思っております。どうすればいいのでしょうか？ どなたかアドバイスをよろしくお願い致します。
- ベストアンサー
- CSS
- IEとFirefoxの見え方のずれにおけるCSSの解決法（liタグ）
こんにちは、質問させて下さい。 現在 li タグを使って、メニュー（画像）を作っていたのですが、 IEでは表示されるのですが、firefoxだとどうしても左に余白が出てしまいます。 マーカーボックスの指定が消えていないのかな、と素人ながらに思うのですが、それが正しいのか、正しくとも正しくなくとも、ではどう直せばいいのか分かりません。 どうぞご回答お願いいたします。 以下は、そのliに関連するCSSと、ソースです。 ■CSS #div{ width: 458px; float: left; text-align: center; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #333333; border-bottom-color: #333333; padding-top: 10px; padding-bottom: 10px; margin-bottom: 15px; margin-right: auto; margin-left: auto; padding-left: 10px; } #div ul{ list-style-type:none; display: block; width: 432px; text-align: center; margin: 0px; } #div li { float: left; height: 200px; width: 140px; margin-right: 4px; margin-bottom: 10px; margin-top: 0px; margin-left: 0px; } #div li img{ border:none; ■html <div> <ul> <li><a href="1.html"><img src="image/menu1.jpg" alt="品"></a></li> <li><a href="2.html"><img src="image/menu2.jpg" alt="品"></a></li> <li><a href="3.html"><img src="image/menu3.jpg" alt="品"></a></li> <li><a href="4.html"><img src="image/menu4.jpg" alt="品" /></a></li> <li><a href="5.html"><img src="image/menu5.jpg" alt="品"></a></li> <li><a href="6.html"><img src="image/menu6.jpg" alt="商"></a></li> </ul> </div> 宜しくお願いいたします。
- ベストアンサー
- HTML
