外出自粛中でも楽しく過ごす!QAまとめ>>

こんばんは。初心者で質問自体説明不足かもしれませんが、
どなたかご教授願えたら幸いです。

CSSでサイトを制作しており、ほぼCSSでできる横型プルダウンメニューを設置しました。
以下の様に「current」を使用して現在ページのメニューボタンの色を変えているのですが、

<ul>
<li class="current"><a href="#">menu</a>
<ul>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
</ul>

上記のプルダウンメニューだと、入れ子の子メニューにも「current」
が適用されて、一緒に色が変わってしまいます。

親メニューのボタンの色だけを変えて、
子メニューの色まで変えない事はできるのでしょうか・・・。
ちなみに、currentで表示させる色と、子メニューのロールオーバー時の色は一緒です。

説明不足ですみませんが、どうぞよろしくお願い致します。

A 回答 (2件)

とりあえず、子供セレクタを理解しない古いブラウザ対応。


子供セレクタ対応のモダンブラウザなら、直接指定すると簡単です。
要は、詳細度をきちんと計算すること--常識的な結果ですが---
★リキッドデザインでデザインしてあります。
★タブは_に置換してある。

<div class="nav">
_<ul>
__<li><a href="./">トップ</a></li>
__<li class="current"><a href="./product">製品</a>
___<ul>
____<li><a href="./product/a">A群</a></li>
____<li><a href="./product/b">B群</a></li>
____<li><a href="./product/c">C群</a></li>
___</ul>
__</li>
__<li><a href="./service">サービス</a>
___<ul>
____<li class="current"><a href="./service/a">A群</a></li>
____<li><a href="./service/b">B群</a></li>
____<li><a href="./service/c">C群</a></li>
___</ul>
__</li>
__<li><a href="./profile">会社</a></li>
__<li><a href="./mail">メール</a></li>
_</ul>
</div>

div.nav{width:80%;height:34px;margin:0 auto;text-align:center;line-height:30px;}
div.nav ul,div.nav ul li{display:block;list-style:none;margin:0;padding:0;}
div.nav ul li{float:left;width:19%;}
div.nav ul li ul li{float:none;width:100%;}
div.nav ul li a{
display:block;width:100%;height:100%;
text-decoration:none;
background-color:yellow;
border:outset 2px silver;outline:none;
} /* 詳細度 0014 */
div.nav ul li a:hover{background-color:rgb(255,255,200);}/* 詳細度 0024 */
div.nav ul li.current a{background-color:red;} /* 詳細度 0024 */
div.nav ul li.current a:hover{background-color:rgb(255,200,200);} /* 詳細度 0034 */
div.nav ul li.current ul li a{background-color:yellow;} /* 詳細度 0026 */
div.nav ul li.current ul li a:hover{background-color:rgb(255,255,200);}/* 詳細度 0036 */
div.nav ul li ul{display:none;}
div.nav ul li a:active{border-style:inset;}
div.nav ul li:hover ul{display:block;}
    • good
    • 0
この回答へのお礼

お忙しい中ありがとうございました!
こんなに詳細にご説明くださり恐縮です・・・(涙)。
見よう見まねでCSSを追加してみました所、思い通りの結果となりました。
まだまだ内容を理解できていない部分もあり、自分のものにできていないので、後日しっかり内容を確認して勉強させていただきます!
初めてプルダウンに挑戦して、このプルダウンが最後の問題だったので、本当に助かりました(涙)大変勉強になりました。ありがとうございました!

お礼日時:2012/02/21 02:30

こんな要領でいかがでしょう。



.current {
background-color: red;
}

.current > ul {
background-color: blue;
}

.current > ul > li:hover {
background-color: red;
}
    • good
    • 0
この回答へのお礼

お忙しい中ありがとうございました!
まだまだ勉強不足ですぐには応用して活用できずにおりますが(汗)こういう方法もあるのですね。
次回、CSS組みなおしてやってみます!
大変勉強になりました!ありがとうございました☆

お礼日時:2012/02/21 02:33

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSのcurrentを使ったグローバルナビゲーションの作り方

CSSのcurrentを使ったグローバルナビゲーションの作り方を教えてください。

以下のように二枚のつながった背景画像をロールオーバーさせるCSSのcurrentを使ったグローバルナビゲーションの作り方を教えてください。

画像URLと参考サイト
http://www.kagaya.co.jp/images/menu_gNav.gif
http://www.kagaya.co.jp/index.php

Aベストアンサー

#NAV,*{ }

と記述するなら大抵の場合

*{ }

で同じ効果が得られます。
ですがこのままではナビゲーション以外の要素にもmarginとpaddingの設定がされてしまい見た目が崩れる原因になります。

#NAV,#NAV * { }

これはあくまでナビゲーションとその子要素への指定に限定している感じです。


*(全称セレクタ)を使った初期化も簡単な例として提示しましたが、実はそんなに多く使われてはいません。
全称セレクタは全ての要素に適用を対象としているので、input要素のように各ブラウザによってCSSでも調整が困難な要素にまで設定が適用されてしまうためです。
実際には以下のように個別に指定する方法が多いのではないかと思います。

body, p, ul, ol, h1 , h2 , h3 , h4 , h5 , h6 {
margin:0;
padding:0;

}

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qの意味を教えてください。

Javascriptを見ていると
<a href="#" onClick="new_open();return false">
なる記述がありますが、
この<a href="#"
の部分の意味を教えてください。
<a herf まではわかるのですが、この#はどのようないみなのでしょうか?

Aベストアンサー

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとページ最上部にジャンプしてしまいます。

このスクリプトを書いた人は onClick だけが必要だったのでしょうが、href がないとリンクの下線が出ないなどの不都合があるため、やむなく # を書いたのでしょう。

JavaScriptの内容を実行したいだけなら、
<a href="javascript:new_open()">
と書けば十分なのですが、一部のブラウザではこのタイプのリンクをクリックすると、アニメーションGIFが止まってしまうなどの弊害があるため、嫌う人もいるようです。

また、JavaScriptが有効でない環境の人は、質問に書かれたリンクをクリックしてもページ最上部に戻されるだけで、開くべきページの内容を見ることができません。
なので、
<a href="ページのURL" target="_blank" onClick="new_open(); return false">
とするなどして、非JavaScript環境にも対応した方が親切です。

長文失礼しました。

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとペー...続きを読む

QCSSナビゲーションで表示ページをハイライトさせるのをSSIを使ってする

以前から質問させていただいているのですが、よくわからないので
ここでまとめて質問させていただきます。
質問の方法が悪かったせいもあり、マルチポストに近くなってしまうのですが、ご容赦下さい。
以前の質問↓
http://okwave.jp/qa4624047.html

CSSのナビゲーションバーで現在の表示ページをハイライトしたいと思います。できるか否かわからないのですが、できないのであれば
どのように通常はしているのかを教えてください。

ただ、ssiで全ページ共通のナビゲーションバーを使用していますのでカテゴリごとにナビゲーションメニューをつくらないといけないのか
また、カテゴリーを判別して(ディレクトリで)ハイライトしてくれるajaxのようなものがあるのか。
よくわからないのです・・・

http://www.n-di.co.jp/service/analytics.html

ここのナビゲーションのようなものがつくりたいです。

わからないことばっかりで申し訳ないのですが
お力を貸していただけるとありがたいです。

以前から質問させていただいているのですが、よくわからないので
ここでまとめて質問させていただきます。
質問の方法が悪かったせいもあり、マルチポストに近くなってしまうのですが、ご容赦下さい。
以前の質問↓
http://okwave.jp/qa4624047.html

CSSのナビゲーションバーで現在の表示ページをハイライトしたいと思います。できるか否かわからないのですが、できないのであれば
どのように通常はしているのかを教えてください。

ただ、ssiで全ページ共通のナビゲーションバーを使用していますのでカ...続きを読む

Aベストアンサー

>topで呼び出すというのは、どこで呼び出せばよいのでしょうか?
>topと指定のあるリンクをクリックした時の状態のことでしょうか?

以下の記述をHTML(拡張子は.phpにします)の中に書き込んでおけば、ページが読み込まれたときに自動的に読み込まれます。
<?PHP
$navi = top;
include("navi.php")
?>

呼び出しを行っているのは「include("navi.php")」の部分です。
その前の行の「$navi = top」で、ハイライト位置を指定しています。

リンクのページでは、
<?PHP
$navi = link;
include("navi.php")
?>
とします。(2行目ので"link"としています)


こうすると、「include("navi.php")」の結果は
$navi = top のときは
<SPAN class="NaviC just"><A href="./">トップ</A></SPAN>
<SPAN class="Navi just"><A href="link.php">リンク</A></SPAN>
になり、
$navi = link のときは
<SPAN class="Navi just"><A href="./">トップ</A></SPAN>
<SPAN class="NaviC just"><A href="link.php">リンク</A>
になります。
Navi と NaviC の位置を見てください。


以下同じように、ページごとに「$navi = ○○」の値を変えます。
例えばinfomation.phpを追加するには、
infomation.phpは
<?PHP
$navi = info;
include("navi.php")
?>
としておいて、
navi.phpに、
if($navi=="info"){print"<SPAN class=\"NaviC just\">";}else{print"<SPAN class=\"Navi just\">";} print"<A href=\"infomation.php\">お知らせ</A></SPAN>";
を追加します。
こうすると、infomatin.phpが開かれたときは、「お知らせ」がハイライトされます。

>topで呼び出すというのは、どこで呼び出せばよいのでしょうか?
>topと指定のあるリンクをクリックした時の状態のことでしょうか?

以下の記述をHTML(拡張子は.phpにします)の中に書き込んでおけば、ページが読み込まれたときに自動的に読み込まれます。
<?PHP
$navi = top;
include("navi.php")
?>

呼び出しを行っているのは「include("navi.php")」の部分です。
その前の行の「$navi = top」で、ハイライト位置を指定しています。

リンクのページでは、
<?PHP
$navi = link;
include("na...続きを読む

Q[CSS] tableの行の間隔をあける

table {
 border-collapse: separate;
 border-spacing: 5px;
}

とすれば、セル同士の間隔が広がるのですが、行同士の間隔だけをあける方法はありますか?

イメージ的には以下の様な感じです

<table>
<tr style="margin-bottom: 5px">....</tr>
<tr style="margin-bottom: 5px">....</tr>
<tr style="margin-bottom: 5px">....</tr>
</table>

よろしくお願いします

Aベストアンサー

<table summary="見本の表" border="1">
 <tbody>
  <tr>
   <th abbr="項1">1項</th><th abbr="2項">2項</th><th abbr="項3">3項</th>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
 </tbody>
</table>
table[summary="見本の表"]{
border:blue double 4px;
border-collapse: separate;
border-spacing:0 5px;
line-height:1.6em;
}
table[summary="見本の表"] th,
table[summary="見本の表"] td{
border:solid 1px green;
width:10em;
text-align:right;
}
table[summary="見本の表"] th{
border-color:red green;
text-align:center;
}

<table summary="見本の表" border="1">
 <tbody>
  <tr>
   <th abbr="項1">1項</th><th abbr="2項">2項</th><th abbr="項3">3項</th>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
 </tbody>
</table>
table[summary="見本の表"]{
border:blue double 4px;
border-collapse: separate;
border-spacing:0 5px;
line-height:1.6em;
}
table[summary="...続きを読む

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Q一部CSSを無効にする

数ページのテーブルをcssファイルを使って半透明化させ背景が薄く見えるようにしています。
そこでテーブル自体だけでなくテーブル内の画像や文字も半透明化されるのですが、あるページのテーブル内にある数枚の画像のみを半透明化したくない場合、どのように書けば良いですか?
CSSはあまり、というか全く詳しくなくて、idやclassというのも調べてみたのですが、
目的のものに辿りつけず…困っています。宜しくお願いします。

Aベストアンサー

 とりあえず下記サイトは読まれましたか?下記は比較的わかりやすく説明していると思います。

参考URL:http://www.tohoho-web.com/css/basic.htm

Qテーブル内の文字列を改行させたい

<TABLE border="1">
<tr> <TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
</tr>
</TABLE>

これを、ある一定の幅を指定して改行させたいのですが、
CSSを使おうが使わず指定しようが、反映されません。
全角文字だと反映されます。

IE6、IE7で対応させたいと思っています。

CSSでも何でも良いので、どうすれば対応出来るのか
ご教示下さい。

Aベストアンサー

英数半角文字だと、続けて入力した場合、一つの単語とみなして禁則処理をしてしまうんだと思います。
なので、<br>で改行するのがいいのかと思いますが、
IEで対応したいということなので、IE7で動作するかはわかりませんが、
word-break:break-all;
の指示で単語の切れ目を無視して改行してくれると思います。

参考URL:http://www.htmq.com/style/word-break.shtml

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;


人気Q&Aランキング