位置情報で子どもの居場所をお知らせ

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (4件)

#NAV,*{ }



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

*{ }

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

#NAV,#NAV * { }

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


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

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

}
    • good
    • 0
この回答へのお礼

なるほどわかりました!

#NAV,#NAV * { }とは
#NAVと#NAVの中の全ての子要素?に適用する書き方という事ですね!

ご丁寧な解説でとても助かりました!ありがとうございました!

お礼日時:2009/10/22 15:50

>なぜ#NAVを二つ並べるのでしょうか?



今回の場合では

#NAV {
margin:0;
padding:0;
}

でもかまわないのですが、一応汎用性を持たせています。
例えばhtmlの記述的に

<ul>
<li>
<p id="OMOTENASHI"><a href="#">おもてなし</a></p>
<p id="SUGOSHIKATA"><a href="#">過ごし方</a></p>
<p id="KYAKUSHITSU"><a href="#">客室</a></p>
</li>
</ul>

となるケースもあるかもしれませんし。
CSSを使ってレイアウトするとき、最初に大まかな初期化する人もいるのでそれにもあわせた感じです。
例えば初期化で一番簡単な書き方だと以下のようになります。

*{
margin:0;
padding:0;
}
    • good
    • 0
この回答へのお礼

丁寧な解説本当にありがとうございます!

なるほど、よくわかりました。

しかし、
#NAV,#NAV *{
margin:0;
padding:0;
}


#NAV, *{
margin:0;
padding:0;
}
とはならないんですね。

#NAV {
margin:0;
padding:0;
}

*{
margin:0;
padding:0;
}
が合体したものだから
#NAV, *{
margin:0;
padding:0;
}
と考えたのですが、

#NAV,#NAV *
と#NAVを二つ並べて書かないとならないロジックがいまいち分からないのですが、もしお時間が許すのであれば教えてください。

お礼日時:2009/10/09 18:53

画像の位置指定間違ってました・・・(汗



#NAV #OMOTENASHI a:hover {
background:url(​http://www.kagaya.co.jp/images/menu_gNav.gif)​ no-repeat 0 -60px;
}

#NAV #SUGOSHIKATA a:hover {
background:url(​http://www.kagaya.co.jp/images/menu_gNav.gif)​ no-repeat -160px -60px;
}

#NAV #KYAKUSHITSU a:hover {
background:url(​http://www.kagaya.co.jp/images/menu_gNav.gif)​ no-repeat -320px -60px;
}
    • good
    • 0

※先に一番下を読んでもらう方がいいかもしれません。


まずHTMLに関してですが、メニューリストという扱いになるので現状は以下のようにマークアップされることが多いです。

<ul id="NAV">
<li id="OMOTENASHI"><a href="#">おもてなし</a></li>
<li id="SUGOSHIKATA"><a href="#">過ごし方</a></li>
<li id="KYAKUSHITSU"><a href="#">客室</a></li>
</ul>

あまり多くてもやることは代わらないので、3つのメニュー項目でサンプルを書いてみます。

CSSでのレイアウトはfloatでボックスを並べて、幅と高さを指するだけです。この時、ブラウザごとにデフォルトの初期値が異なるプロパティがあるため、その部分を先に初期化しておきます。


/* 初期化 */

#NAV,#NAV *{
margin:0;
padding:0;
}

/* レイアウト */

#NAV {
width:960px;
height:60px;
}

#NAV li {
float:left;
width:160px;
height:60px;
}


ここまでで大まかなレイアウトはできていますが、a要素がまだインライン要素なので、ボタン全域をカバーできていません。なのでブロック要素にします。
メニューの●も消しましょう。


/* 初期化 */

#NAV,#NAV *{
margin:0;
padding:0;
}

/* レイアウト */

#NAV {
width:960px;
height:60px;
}

#NAV li {
list-style:none;
float:left;
width:160px;
height:60px;
}

#NAV a {
display:block;
}


今回の場合、CSSで画像を表示する方法としてbackground(背景画像)を利用します。
アクティブ時(hover)の画像だけを個別に指定し、全体の画像をul要素に一括で指定しておくと記述がすっきりします。


/* 初期化 */

#NAV {
width:960px;
height:60px;
background:url(http://www.kagaya.co.jp/images/menu_gNav.gif) no-repeat 0 0;
}

/* レイアウト */

#NAV li {
list-style:none;
float:left;
width:160px;
height:60px;
}

#NAV a {
display:block;
}

/* ロールオーバー時の画像 */

#NAV #OMOTENASHI a:hover {
background:url(http://www.kagaya.co.jp/images/menu_gNav.gif) no-repeat 0 60px;
}

#NAV #SUGOSHIKATA a:hover {
background:url(http://www.kagaya.co.jp/images/menu_gNav.gif) no-repeat 160px 60px;
}

#NAV #KYAKUSHITSU a:hover {
background:url(http://www.kagaya.co.jp/images/menu_gNav.gif) no-repeat 320px 60px;
}


最後に文字が画像にかぶっているので画面の外に飛ばして完成です。


/* 初期化 */

#NAV {
width:960px;
height:60px;
background:url(http://www.kagaya.co.jp/images/menu_gNav.gif) no-repeat 0 0;
}

/* レイアウト */

#NAV li {
list-style:none;
float:left;
width:160px;
height:60px;
}

#NAV a {
display:block;
text-indent:-9999px;
}

/* ロールオーバー時の画像 */

#NAV #OMOTENASHI a:hover {
background:url(http://www.kagaya.co.jp/images/menu_gNav.gif) no-repeat 0 60px;
}

#NAV #SUGOSHIKATA a:hover {
background:url(http://www.kagaya.co.jp/images/menu_gNav.gif) no-repeat 160px 60px;
}

#NAV #KYAKUSHITSU a:hover {
background:url(http://www.kagaya.co.jp/images/menu_gNav.gif) no-repeat 320px 60px;
}


と作りかたを書いたのはいいのですが・・・
この方法はサーバーの負担を減らせるので大規模サイトでの利用は考慮できますが、デメリットもあるためあまりおすすめしません。
CSSでのロールオーバーはまだ完全に環境が整っていない状況です。
現状では以下のリンク先のようなjavascriptを使う方が適していると思います。
http://css-happylife.com/log/javascript/000157.s …
    • good
    • 0
この回答へのお礼

早速の回答ありがとうございます。
よくわかりました。
解決することができましたありがとうございました!

ところで、
#NAV,#NAV *{
margin:0;
padding:0;
}
の記述がよくわからないのですが、
#NAV {
margin:0;
padding:0;
}
ではいけないのでしょうか?
なぜ#NAVを二つ並べるのでしょうか?
お時間あればご教授ください。

お礼日時:2009/10/09 15:42

このQ&Aに関連する人気のQ&A

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

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

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

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

Qプルダウンメニューのcurrentの使い方

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

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で表示させる色と、子メニューのロールオーバー時の色は一緒です。

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

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

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>

上記のプルダウンメニューだと、入れ子の...続きを読む

Aベストアンサー

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

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

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

<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>...続きを読む

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 {

にするだけ

Qページを開いているときのリンクの文字色を変えたい

パソコン初心者です。
ソフトを使わず、メモ帳で入力してホームページを作成しています。

リンクの文字で、通常は黒、マウスを乗せたとき白に変わり、クリックしてページを開いたときにも白(どのページにいるのかわかるように)としたいのですが、うまくいきません。
スタイルシートで、マウスを乗せたときのa:hoverを#ffffffと設定し、選択したときのa:activeを#ffffffと設定しています。

マウスを乗せたときには白く変わるのですが、クリックしてページを開いても、リンクの文字の色は黒のままです。
これを白に変えるにはどうすればいいのでしょうか?

どなたかアドバイスよろしくお願いします。

Aベストアンサー

開いているページのリンク色を変えるには、ちょっと小細工が必要です。

例:
HTML
<ul>
<li class="current"><a href="./">Home</a></li>
<li><a href="./link/">Links</a></li>
<li><a href="./script/">Script</a></li>
<li><a href="./contact/">Contact</a></li>
</ul>

CSS
.current a {
color: #ffffff;
}

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テーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

QCSSでボックス幅を文字列に合わせたい

ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。
テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。

Aベストアンサー

div等のblock要素ではなくspan等のinline要素によって行う。

<span style="border:solid 1px">文字幅に合わせた枠線</span>

Qシングルページでのカレント表示jQueryについて

こちらのページ(http://www.tam-tam.co.jp/tipsnote/javascript/post4996.html)を参考に、シングルページ上でのカレント表示を実装し、動作も問題ありません。

ただ、contents01の上とcontents04の下にナビゲーションでリンクしていない要素があり、
contents01より上の要素が表示されている間は<a href="#contents01>がカレント表示のまま
contents04より下の要素が表示されている間は<a href="#contents04>がカレント表示のままになってしまいます

// 現在のスクロール位置が、配列に格納した開始位置と終了位置の間にあるものを調べる
の下のifにelse if()でnavLink.removeClass('current');を追加すれば良いかと思うのですが、
()の中へどう記述すれば良いのか困っています

どなたかご助力いただけませんでしょうか
よろしくお願い致します

Aベストアンサー

こんにちは

ざっと見ただけですが・・・
現在のスクロール量が対象要素のtopとbottom位置の間にあれば、リスト内のそのリンクにcurrentクラスを付けるようになっていますので、それ以外の時はcurrentクラスを付けないようにしてあげれば宜しいかと。

スクリプト中で、該当する要素が存在したら
 navLink.removeClass('current');
 navLink.eq(i).addClass('current');
として、クラスの付け替えをしていますが、クラス削除の記述をfor文の前に持っていけば、
 「まず全体をクリアしておいて」→「該当要素があればクラスを付ける」
という処理手順に変わりますので、結果的に該当要素が無い時はクリアされたままになります。

ただし、全体のロジックが『「要素が見えていたら」ではなく「要素の中までスクロールをしたら」クラスを付与する』というようになっていますので、対象要素が連続していない一番最初のところではなんか違和感があるかも。
(もともとがそのような考え方で作られてはいるのですけれど…)

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 タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとペー...続きを読む

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。


人気Q&Aランキング