みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

オンマウスにしたときの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が変わりませんが、どこを修正したらよいでしょうか?

投稿日時 - 2004-11-10 12:59:21

QNo.1078164

困ってます

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

#3 です。

> ちなみにdisplayのinline;とは何ですか?

端的に言ってしまうと、

display: block; ==> 段落
display: inline; ==> 段落を形成する要素

かな。(上手く表現できない)

【例文】

 1).
   <p>語句の組み合わせ</p>
   <p>語句の組み合わせ</p>
 2).
   <p><em>語句の組み合わせ</em>
   <em>語句の組み合わせ</em></p>

上記の例文をブラウザで表示すると、

(1)は、
  語句の組み合わせ
  語句の組み合わせ

(2)は、
  語句の組み合わせ 語句の組み合わせ

のように表示され、改行の違いがありますよね。
これは、<P> が“block”要素に用いるダグ、<EM> が“inline”要素に用い
るダグと最初から決まっているからです。

p { display: inline } とすれば、<P> 要素は段落を形成する一要素になり、
em { display: block } とすれば、<EM> 要素は、それ自体が段落となります。

これで分かりますかね!?

因みに、li { float: left } と指定しているのを見て、<LI>要素を改行なし
で横に並べたいんだと解釈して、先の投稿となりました。
“float”と“display”指定の違いは、前後の要素に及ぼす影響などを、い
ろいろ実験してください。

投稿日時 - 2004-11-10 18:15:27

ANo.4

このQ&Aは役に立ちましたか?

7人が「このQ&Aが役に立った」と投票しています

回答(5)

ANo.5

#3 です。

#4 の投稿を読み直して、少し補足します。

<html><head><title>TEST</title>
<style type="text/css"><!--
p { display: inline }
em { display: block }
--></style>
</head><body>
<p><em>語句の組み合わせ</em>
<em>語句の組み合わせ</em></p>
</body></html>

上記の状態では、“block”要素となる <EM> 部分が、“inline”要素の <P>
に内包されています。
これは、明らかにおかしい状態だと思います。(自分で書いておいて・・・)

財布の中にお札を入れることは出来るけど、
お札の中に財布を入れることは出来ない。

状態と言うのでしょうか。
ブラウザは何の問題もないように描画しているようですが、文法的には間違
っていることを認識しておいてください。

投稿日時 - 2004-11-11 08:08:14

ANo.3

オリジナルにある“border”指定は、1つは <LI> に、もう1つは <A> 要素
を対象にしていますよね。このCSS定義で“a:hover”による書式変更は、
<LI> の書式には及ばないことに注意してください。

で、ちょっとCSSの内容を編集しました。望む結果になるかな!?


<html><head><title>TEST</title>
<style type="text/css">
<!--
.menu05 ul {
list-style-type: none;
margin: 1em 0;
}
.menu05 li {
display: inline;
margin: 0;
padding: 0 4px;
}
.menu05 a {
padding: 2px 8px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #666;
border-bottom: 2px solid #666;
color: #00c;
background: #ccc;
text-decoration: none;
}
.menu05 a:hover {
border-top: 2px solid #666;
border-left: 2px solid #666;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
color: #f00;
background: #aaa;
}
-->
</style>
</head><body>
<div class="menu05">
<ul>
<li><a href="#">ご案内</a>
<li><a href="#">プラン</a>
<li><a href="#">プレゼント</a>
</ul>
</div>
</body></html>

投稿日時 - 2004-11-10 16:17:20

お礼

回答ありがとうございます。
先にaで定義しないとダメなんですね~。なるほどぉぉぉぉ!
ありがとうございました!
ちなみにdisplayのinline;とは何ですか?
CSSはおもしろいけど、なかなかむずかしいです。

投稿日時 - 2004-11-10 16:52:10

ANo.2

#1さんのお答えで解決かもしれませんがちょっとだけ蛇足を。気になったので…。
 スタイルの指定が

.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;
}

 となっていますが、線種と太さと色はそれぞれ別に指定しなくて良いのでしょうか。例えば、

.menu05 a:hover {
border-style: solid;
border-width:2px;
border-top-color: #c0c0c0;
border-right-color: #c6c6c6;
border-bottom-color: #000000;
border-left-color: #c0c0c0;
border-color:#ff0000;
display: block;
}

 こんな感じ…?。
ひょっとしてまとめ指定が出来るんでしたら余計な口出しですが。済みません不勉強なもので…。気になっただけなのでスルーされても構いません。
 失礼しました。

投稿日時 - 2004-11-10 13:40:00

補足

回答ありがとうございます。
線種と太さは初めはまとめて指定していたのずが、反映されないので、
一辺ずつ指定しないと反映しないのかなぁ~と書き換えましたが、やっぱり反映されなかったです。

投稿日時 - 2004-11-10 13:59:23

ANo.1

こんにちは。
.menu05 a:hover {
にある
color:#ff0000; → border-color:#ff0000;
です・・・。
(^^ゞ

投稿日時 - 2004-11-10 13:28:57

補足

回答ありがとうございます。
color:#ff0000;
は文字色です。
border-colorを変えたいのですが…。

投稿日時 - 2004-11-10 13:56:37

あなたにオススメの質問