• ベストアンサー

cssでボーダーを消したい

こんにちは。 CSSのことで質問させてください。 リンクした文字色、ボーダーなどが出ないようにしたいのですが、 一部分、Firefoxで見ると、 文字色が紫で、ボーダーがでます。 *{ margin: 0; padding: 0; font-size: 100%; list-style: none; } と、リセットしています。 一部分の<ul>だけに効いていません。 どのようなことが原因として考えられるでしょうか。 どなたかよろしくお願いいたします。

  • HTML
  • 回答数2
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

混乱していて意味不明です。 >リンクした文字色 >ボーダーなど  これはまったく別物です。これらを・・などと連結しても、他との境がわからない。  リンクした色とは、「ユーザーが閲覧済みのリンク」すなわち擬似クラスの:visitedの色でしょうか?  色を消すとは見えなくすることですか?なら、   visibility:hidden;で存在しても見えなくなります。  存在自体を消したいなら   display:none;  リンクのない文字色と同じにするなら   color:+++++と色を指定してください。 ボーダーを消すのなら、それ以前に表示しているはずですから、詳細度を上げて、指定してください。  border:none;  リンクの下につく線は、borderではなく、underlineですから、  text-decoration:none; >一部分、Firefoxで見ると、文字色が紫で、ボーダーがでます。  これは以下の指定とは無関係です。この全称セレクタの指定は、最近の流行だけど、font-size: 100%;list-style: none;はやりすぎ・・ >一部分の<ul>だけに効いていません。  このリセットは、「文字色が紫で、ボーダーがでます。」にはまったく関係ないです。  list-styleが指定するのは、リストスタイルであってボーダーや色ではありません。

unkraut310
質問者

お礼

確かに意味不明な質問でした。 失礼しました。 にも関わらずご親切なご回答ありがとうございます。 解決いたしました。

その他の回答 (1)

回答No.2

あれはボーダーじゃなくて下線ですからね。text-decorationを noneにしないとダメですよ。 それから、全称セレクタでリストのパディングを消すのは、入れ子 になったときに破綻しますからやめた方がいいですね。構造を考え ないDIV厨のやり方です。

unkraut310
質問者

お礼

ご回答ありがとうございます。 今後はしっかり構造考えたいと思います。

関連するQ&A

  • IEでCSSが適用されません。

    現在作成中のページがあるのですが、IEで作成状況をF12で確認すると、 全くCSSが反映されず、グチャグチャに表示されてしまいます。 FireFoxでは、問題なく表示されるのですが・・ div, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote { font-size:100%; font-weight:normal; list-style-image:none; list-style-type:none; margin:0; padding:0; } dl { font-size:100%; font-weight:normal; list-style-image:none; list-style-type:none; margin:0; padding:0; } dt, dd { margin-bottom:2px; margin-top:2px; } 上記をCSSに組み込んで、リストタグの中黒を消すようにしているのですが、IEでは中黒が表示されたままです。 どうすれば良いのでしょうか。 教えて下さい!!

  • CSSの優先順位について

    うまく説明できるかわかりませんが・・・ XHTMLとCSSでページを作成しています。 デザインは全て外部CSSを参照しているのですが、 トップページだけ、一部個別設定したいと思っています。 リストメニューのデザインを現在このようにしています。(外部CSS) ul{ list-style-type:none; margin-left:0; padding-left:0; padding:0; margin-top:30px; width:120px; float:left } li{ padding-right:10px; font-size:0.75em; margin-bottom:10px; border-bottom:solid 1px #66aa66 } --------------------------------------- トップページだけ、 ul{ list-style-type:none; margin-left:0; padding-left:0; background-color:#efef77; padding:3px 20px; margin-top:0 } li{ display:inline; padding-right:10px; font-size:0.75em } ----------------------------------- この設定にしたいので、トップページヘッダーにこちらを入力しました。(外部CSSよりヘッダーを優先するとテキストに書いてありました) しかし、 li{ display:inline; } だけは、外部CSSを参照してしまいます。 なぜでしょうか?? 優先させる為に li display:inline !important; } としてみましたが、ダメでした。 どなたかご教授願いますm(__)m

  • CSSを使いたいのですが上手くいきません

    テーブル型のメニューを マウスオンで背景の色を変えたいのですが… CSSの解説HPを見たのですが、どこの記述に誤りがあるのか 恥ずかしながら分かりません。 お分かりになる方いらっしゃいましたら、ご教授お願い致します。 <html> <head> <meta Http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <title>テスト</title> <style type="text/css"> <!-- container{ width:100px;} container ul{ margin:0; padding:0; list-style:none; border-top:1px solid #666666; border-left:1px solid #666666; font-size:small; line-height:150%; border-right:1px solid #666666;} container ul li{ margin:0; padding:0; display:inline;} container ul li a{ margin:0; padding:5px 0; width:180px; display:block; text-align:center; color:#000000; text-decoration:none; background:#CCCCCC; border-bottom:1px solid #666666;} container a:hover{ color:#FFFFFF; text-decoration:none; background:#666666;} --> </style> </head> <body> <div id="container"> <ul> <li><A Href="01.html" Title="test">test1</A></li> <li><A Href="02.html" Title="test">test2</A></li> </ul> </div> </body> </html>

  • cssに詳しい方ご教授ください

    cssは概念はなんとなーくわかるのですが、 以下のcssについて教えてください。 ul.list05 { list-style-type: none; margin: 8px 0 10px 0; } >ulの部分をlist05でspanなどで囲った部分でしょうか? ul.list05 li { padding-left: 0.6em; text-indent: -1.3em; font-size: 86%; line-height: 140%; } >ulの部分をclassなどでlist05を指定したらliに反映される部分でしょうか? ul.list05 li.list01-1 { margin: 0 0 5px; padding-left: 2.0em; text-indent: -2.8em; font-size: 86%; line-height: 140%; } >ulをlist05でclassなどで指定し liはspanでlist01-1を定義すればいいのでしょうか? 初心者過ぎて質問の意味もわからないかもしれませんが、 ご教授いただけると幸いです。 よろしくお願いします。

  • CSSでa要素全体をリンク出来るようにしたいのですが

    CSSでa要素全体をリンク出来るようにしたいのですが、 Firefoxなら出来るもののIE8、Sleipnirでは文字の上しかリンクされません。(文字の上にマウスを当てると全体の色は変わったりするのですが。) 5時間くらい迷ってるので少しでも分かる方、いらっしゃいましたら 何でもお願いします。。 色々検索してソースに付け加えたりしてるので適切ではないものが多々あるかと思いますが、とにかくCSSソースをそのまま載せます。 div#link ul { list-style: none outside; overflow : hidden; padding: 0; margin: 0; letter-spacing:7px; font-weight: bold; } div#link li a { display: block; width: 100%; overflow : hidden; padding: 5px; padding-left: 20px; padding-right: 0px; font-size: 14px; color: #0000ff; } div#link li a:hover { display: block; overflow : hidden; background-color: #ffff33; color: #000; } HTMLは <div id="link"> <ul> <li><a href=".html">あいうえお</a></li></ul></div>です。 なにとぞ宜しくお願い致します。

    • ベストアンサー
    • HTML
  • border: noneでボタンの境界線が消える

    cssは全くの初心者です。教本で勉強しながらサンプルを動かしています。 reset.cssとstyle.cssの二つを利用し、 resetでブラウザの設定をリセットする形をとっています。 resetの内容は下記です。 ------------------------- @charset "UTF-8"; * { margin: 0; padding: 0; list-style: none; font-size: 100%; border: none; } img { vertical-align: top; } ------------------------- ところが、実験的に検索ボタンを設けようと <input Type="submit" name="subm" value="検索"> を追加したら、ボタンの境界線が消えてしまいました。 これを回避するにはどうしたらいいのでしょうか? ちなみに<div>で囲って個別に境界線を設定する、という方法もあり、やってみましたが、 ボタンらしく見えませんでした。検索ボタンだけreset.cssの「border: none;」を 適用しない、なんて方法はあるのでしょうか?

    • ベストアンサー
    • HTML
  • リンク区切る罫線の高さを文字の大きさに揃える

    リンク区切る罫線の高さを文字の大きさに揃える .footer_menu li a { font-size: 0.75em; } .footer_menu li { display: inline; list-style-type: none; border-left: solid 1px #ddd; margin-left: 8px; padding-left: 12px; } .footer_menu li.first { border-left: none; margin-left: 0; padding-left: 0; } .footer_menu ul { margin: 0; padding-top: 0; } 文字の高さに対して罫線の方が長い状態です。 文字の高さに合わせた線にしたいのですが… border-left: solid 1px #ddd; この高さを設定するにはどうしたらよいですか? 初歩的内容ですが、アドバイスをどうぞよろしくお願します。

    • ベストアンサー
    • HTML
  • CSSの継承について...

    CSSの勉強をしつつ、HPビルダー17を使ってHPの制作しているですが、 前のulタグで使った背景画像がずっと継承されて困っております。 当方の内容です↓ 【CSS記述】 ----------------------- #manu-nanyo{ display: block; position: absolute; background-image: url(fu/area_nanyo.png); background-repeat: no-repeat; background-position: center top; color: black; width: 200px; height: 40px; } .job-menu ul{ display: block; list-style-type: none; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-top: 10px; padding-bottom: 10px; border-right-width: 1px; border-right-style: solid; border-right-color: silver; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: silver; text-decoration: none; } .job-menu li{ margin: 0; padding: 0; background: url(img/migi_aka.png) left no-repeat; } .job-menu a{ display: block; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 14px; color: black; font-size: 15px; text-decoration: none; } .job-menu a:hover{ background-color: rgb(204, 204, 204); color: red; } #newshop_bunner{ frot: left; width: 200px; padding-top: 10px; text-align: left; background-position: top left; } .newshop-banner ul{ margin-top: 20px; margin-left: 0; padding-left: 0; } .newshop-banner li{ text-decoration : none; text-align : right; font-size: 12px; } .newshop-banner a{ margin-top: 0px; padding-top: 5px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; color: blue; font-size: 12px; text-decoration: none; text-align: right; } .newshop-banner a:hover{ background-color: white; color: lime; } ul.sample{ width:100%; margin-top:20px; font-size:10px; padding-left:0; margin-left:0; } ul.sample li{ list-style-position: outside; background-color: transparent; background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; background-size: auto auto; background-origin: padding-box; background-clip: border-box; padding-top: 3px; padding-right: 10px; padding-bottom: 3px; padding-left: 10px; width: 120px; float: left; border-width: 2px; border-color: rgb(255, 238, 219); border-style: ridge; } .list-test1{ float: left; list-style-type: none; margin-top: 40px; padding-top: 40px; color: orange; } 【HTML記述】 ----------------------- <div id="manu-nanyo"> <div class="job-menu"> <ul> <li><a href="*">野球</a> <li><a href="*">サッカー</a> <li><a href="*">テニス</a> <li><a href="*">ゴルフ</a> <li><a href="*">バスケ</a> </ul> </div> <div id="newshop_bunner"><img src="img/newstore-img.png" alt="新店舗"> <ul class="newshop-banner"> <li><a href="*"><img src="#">店名○○○○○お店ネーム</a> <li><a href="*"><img src="#">店名○○○○○お店ネーム</a> </ul> <ul class="sample"> <li><a href="#">テスト1</a> <li><a href="#">テスト2</a> <li><a href="#">テスト3</a> <li><a href="#">テスト4</a> <li><a href="#">テスト5</a> </ul> <ul class="list-test1"> <li><a href="#">トップページ</a> <li><a href="#">テストページ1</a> <li><a href="#">テストページ2</a> </ul> </div> ----------------------- .job-menu li で使った背景画(矢印)・スタイルが、その後 li を使う度に継承されてしまいます。 クラス名やID名を付けてそれぞれの属性を指定すれば分居ができるのかと色々と試してみたのですが旨くいかず・・・ (ul属性・a属性で分けても継承されてしまいます) 試し過ぎて、もう意味が分からなくなってしまって自分では解決出来そうにないので、初歩的なことで申し訳ありませんが、質問をさせて頂きました。 ネット等で調べた感じでは、「クラスを分けて指定すればulの住み分けが出来る」と判断したのですが、そういうことではないのでしょうか? それとも根本的な何かを履き違えしているのでしょうか? 宜しくお願い致しますm(_ _)m

  • liに画像と文字を表示するCSSの方法

    HTML <ul> <li class="home11"><h3><a title="Homeページ" href="../index.html" class="moji5011">Home</a></h3> </ul> CSS a.moji5011 { color: #c60; font-size: 85%; font-weight: 700; text-decoration: none; margin-left: 0; padding: 3px; width: 80px; height: 20px } a:hover.moji5011 { color: #000; font-weight: 700; text-decoration: none; margin-left: 0; padding: 3px } li.home11 { background-image: url("http://www6.big.or.jp/~neon/BTNFLD/BTNIMG/BTN03/btn04smp.gif"); background-repeat: no-repeat; text-align: center; list-style-type: none; margin-right: 5px; width: 80px; height: 20px; float: left } と設定しているのですが、エクスプローラーでは画像の上にHomeが中央に位置しているのですが、Firefoxでは文字が上部に位置して、これをFirefoxでも中央に表示するにはどのようにすればいいのでしょうか。 ボタン全部をリンク対象にするようにしています。

    • ベストアンサー
    • HTML
  • 初心者です 画像横に文字を入れたい css

    web制作を始めたばかりの初心者です。 画像右側に文字を入れたいのですが、うまくいきません。 本当にはじめたばかりでなんとなくcssの意味が分かりかけたところです。 どうぞご教示ください。 html <ul>     <li><a href="index.htm"><img src="画像"width=""height=""></a></li>     <div class="text">文字列</div> <li><a href="index.htm"><img src="画像" width=""height=""></a></li>    <div class="text">文字列</text> </ul> </div> css .site ul {margin: 0; padding: 0; list-style: none} .site li a {display: block; padding: 5px; font-size: 14px; text-decoration: none} .site li a img {border: none } .site a:after {content: ""; display: block; clear: both} .site img {float: left; width: 250px} .site .text {float: none; width: auto; margin-left: 60px; padding-left: 15px; color: #000000; font-size: 18px}

専門家に質問してみよう