- ベストアンサー
CSS?
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
html <body><ul id="mainMenu"> <li><a class="here" href="index.html">ＨＯＭＥ</a></li> <li><a href="page01.html">ページ01</a></li> <li><a href="page02.html">ページ02</a></li> <li><a href="page03.html">ページ03</a></li> <li><a href="page04.html">ページ04</a></li> <li><a href="page05.html">ページ05</a></li> <li><a href="page06.html">ページ06</a></li> <li><a href="page07.html">ページ07</a></li> <li><a href="page08.html">ページ08</a></li> </ul> </body> </html> に変更。HOMEのページにいると仮定します。HOMEにだけclass="here"をつけて他と区別します。 でも、スタイルはhoverとおなじでいいので、ｃｓｓでは、hoverの場所に追加します。 #mainMenu a:hover{ を #mainMenu a.here,#mainMenu a:hover{ に変えてください。 理屈を理解するより答えだけが、欲しそうだったのでとりあえず。先の理屈は忘れてください。まったく違う方法でやっています。理屈を理解したいなら、cssのセレクタの基本を勉強してください。
その他の回答 (3)
- Yama-tani
- ベストアンサー率44% (13/29)
今現在閲覧しているページにはリンクを貼らない。今いるページから今いるページへのリンクは不親切ですよね。ページが長くなる場合のリンクなら別ですが。そうすれば、他と明確に区別できます。 例えば今、メニュー3のページにいるとして <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li>メニュー3</li> </ul> css ul li{width:10em;} ul li{background:#ffaaaa;}/*マウスオーバーしている色と同じ色*/ ul li a{display:block;background:#ffffff;} ul li a:hover{background:#ffaaaa;}/*マウスオーバーしている色*/ こんな感じではどうでしょう？
お礼
ありがとうございました。
補足
駄目です。理屈が理解できません。 昨日から熱が出て、目も痛いです。 どうでしょう！? 私のタグに沿って答えを教えてはもらえませんか? 宜しくお願い致します。
- fujillin
- ベストアンサー率61% (1594/2576)
よくわかりませんけれど… 例えば、ロールオーバーのCSSでの指定が #menu a:hover { ・・・ } のようになっているとして、 閲覧中のページの部分にだけ適当なクラス名（例えばactive）を付けてあげることにして #menu a:active, #menu a:hover { ・・・ } みたいにしてあげれば、class="active"の部分にはマウスの位置に関わらずそのCSSが反映されることになります。 class="active"などの設定をどうやるかは、サイドメニューの表示方法にもよるでしょう。 1）各ページ(HTML)内に、それぞれ同じメニューの記載をしている場合 2）サーバサイドでインクルードなどを行なっている場合 3）フレーム表示でメニュー部分を別HTMLで表示している場合 1）の場合は、それぞれのページの該当部に設定してあげればよいでしょう （スクリプトなどは不要ですし、一番簡単です） 2）の場合は、サーバ側のスクリプトで同時に設定してしまうか、それができない場合は、 各ページのHTMLにページ番号を記載しておいて、3）の様な方法を取るかでしょうか （サーバ側で処理してしまった方が、下に述べる理由もあって確実です） 3）の場合は、javascriptなどを利用して、制御してあげるとか… 各ページ内に、他のページへのリンクがある場合は、それも考慮してスクリプトを作成 する必要がありそうですね。 * javascriptを利用する場合は、ユーザがオフにしていると機能しないのでご注意を。
お礼
ありがとうございました。
補足
ありがとうございます。 ここからcss-------------------------------- #mainMenu { margin:0px 0px 10px 0px;padding:0px; } #mainMenu li { display:block; margin:0px 0px 5px 0px;padding:0px; } #mainMenu a { display:block; height:22px;margin:0px; /*メニューボタンの背景画像設定*/ background-image:url(../img2/logo1_off.png); background-repeat:no-repeat; line-height:1.2em; } #mainMenu a:link {color:#555555;text-decoration:none;padding:8px 5px 0px 30px;} #mainMenu a:visited {color:#555555;text-decoration:none;padding:8px 5px 0px 30px;} #mainMenu a:hover { color:#ffffff;text-decoration:none;font-weight:bold;padding:8px 5px 0px 30px; /*ロールオーバー時のメニューボタンの背景画像設定*/ background-image:url(../img2/logo2_on.png); background-color:transparent; } #mainMenu a:active { color:#ffffff;text-decoration:none;font-weight:bold;padding:8px 5px 0px 30px; /*クリック時のメニューボタンの背景画像設定*/ background-image:url(../img2/logo3_on.png); background-color:transparent; } cssここまで--------------------------------- htmlここから--------------------------- <ul id="mainMenu"> <li><a href="index.html">ＨＯＭＥ</a></li> <li><a href="page01.html">ページ01</a></li> <li><a href="page02.html">ページ02</a></li> <li><a href="page03.html">ページ03</a></li> <li><a href="page04.html">ページ04</a></li> <li><a href="page05.html">ページ05</a></li> <li><a href="page06.html">ページ06</a></li> <li><a href="page07.html">ページ07</a></li> <li><a href="page08.html">ページ08</a></li> </ul> htmlここまで--------------------------- すみません、物分りが悪くて・・・。 こちらを御覧頂けませんでしょうか? cssとhtmlはこのようになっています。 お世話をおかけします。 宜しくお願いします。
- metametamu
- ベストアンサー率51% (153/295)
普通のナビゲーションであれば個別にページごとに指定すればいいんじゃないでしょうか。 閲覧中のページごとに勝手に切り替わるスクリプトを書くにしても、どこかで結局指定しないとダメですし。
お礼
ありがとうございました。
補足
すみません。 個別にページ毎に指定する書き方が分かりません。 検索するにしても、どのようなキーワードで検索して良いのかが分からないのです。 差し支えなければご教授をお願いします。
関連するQ&A
- flashメニューボタン
flashでメニューボタンを制作しているのですが…。 （マウスオーバーの時に徐々に明るくなるような感じで） メニュー内で他のページに飛んだ時にそのページのボタンをマウスオーバー時のときのように色を変えたいのですが何か良い方法はありますか？ サイトはオールFLASHではなく、メニュー（ヘッダー）だけFLASHです。
- 締切済み
- Flash
- メニューボタンをSSIで呼び出すときのポイント
現在fireworksで書き出したメニューボタンを使っています。マウスを乗っけると、ロールオーバーするタイプです。 そのボタンを押すと、その反転する状態を、HTMLで記述しています。 ---------------- ■■■■■■■■ トップページ＆マウスを乗せていないとき ----------------- ■■■□■■■■ トップページでマウスオーバー ＿＿＿↑ ----------------- ■□■□■■■■ ジャンプ後のコンテンツとマウスオーバー ＿↑ ---------------- これをSSI(virtualでタグを呼び出すのみ）に記述すると、当然どのページに移動しても、 ■■■■■■■■ のようになります（どれにもマウスオーバーしていない状態） 従来通り、ジャンプしたコンテンツのメニューが 色がついている状態にすることと、SSI（virtual）での呼び出しは不可能な事でしょうか？ SSIでcgiを呼び出して、アドレスからコンテンツに関するディレクトリを抜き出して、反転させるcgiにするほうがいいでしょうか？ それとも、メニューバーの下に、現在位置がわかる細いバナーを追加した方が早いでしょうか？
- ベストアンサー
- HTML
- CSSで画像を隠すとSEO的にNGですか？
通常時とマウスオーバー時の2枚の画像を使い、メニュー部分でCSSでロールオーバーを使っています。 この場合、マウスオーバー時に画像を読み込むため一瞬アイコンがちらつくようになるのを防ぐため、同じページにマウスオーバー時の画像を敷き詰め、display: noneで非表示にしています。 隠しテキストはSEO的にNGとわかりますが、隠し画像も同じ扱いなのでしょうか？ ちなみに隠している画像にはaltは付けていません。 個人サイトですが、できるだけSEOに問題ないようにしたいので、どうかご教示ください。 また2枚の画像を使ったCSSロールオーバーで、このチラつきを防ぐいい方法があれば教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- 左サイドのメニュー(画像)をCSSでonmouseで画像が変わる様にし
左サイドのメニュー(画像)をCSSでonmouseで画像が変わる様にしているのですが、例えばaboutのページを開いてる時はaboutのメニューがonmouseの状態で表示されるように出来ますか？説明が下手ですみません。 http://apanyan.client.jp/に仮に作った今の状態のものをアップしました。この状態から、どこのタグをどう直したらNEWSのページを見ている時はNEWSの画像(色)が濃い状態になるか、アドバイスして頂けたら幸いです。当方、dreamweaverCS4を使用しています。よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- CSSでグローバルナビゲーションメニューをつくりたい
CSSで、グローバルナビゲーションメニューのボタンリンクをコーディングしたいと思っています。ボタンをマウスでポインタしたらロールオーバーし、カレントページのボタンはマウスでポイントした時と、同じようにロールオーバー画像を表示させたいと思っておりますが、可能なのでしょうか？
- 締切済み
- ブラウザ
- flashのメニュー作成について
FLASHでの作成になると思うのですが、メニュー（画像）にマウス、（マウスオーバー）を置くと、そのメニューについてちょっとした説明書きが出てきて、そのメニューをクリックするとリンク先のページへとぶようにする方法を勉強したいのですが、参考サイトなどがもしありましたら教えてくださいませんでしょうか。
- ベストアンサー
- ホームページ作成ソフト
- HTML+CSSについて質問です
当方のHPは左サイドにメニューリスト、中央部分に記事を書いている2カラムです。また、ページ数は100ページくらいありますが左サイドのメニューリストは全て共通となっています。左サイドのメニューリストは定期的に更新しているのですが、一つの項目を追加したい(削除したい)場合、全てのページの左サイドメニューを更新しなければならず、かなりの手間がかかってしまいます。なので、左サイドメニューは独立したHTMLを作成し、更新の手間がかからないような形にしたいと考えています。このようなHTML＋CSSを作成する場合、どのようにすればよろしいのでしょうか？また、参考になるサイトがあればご教授よろしくお願いします。ちなみに当方のHPを作成する知識は、基本的なタグやCSSがわかる程度の初心者レベルです。
- ベストアンサー
- HTML
- 1枚の画像でナビゲーション＋ドロップダウンの設定
上記の通りになるのですが、 1枚の画像だけを用意して、ナビゲーションメニュー＋一部のメニューには プルダウンも設定したいのです。 例を言えば MENU1、MENU2、MENU3、MENU4という項目があり、 MENU1とMENU2は単純にマウスオーバーをした際に色が変わるという設定をし、 MENU3とMENU4にはマウスオーバーをした際にその下にそれぞれMENU3_1、MENU3_2、MENU4_1、MENU4_2 というメニュー階層を縦表示でつけられればと思っています（これにもマウスオンマウスオフ、アクティブ時で色変えしたい）。 単純にマウスオーバー時に変わる設定ならば CSSのhover設定とactive設定でいけるかと思っているのですが、 項目中2つだけドロップダウンを入れるとなるとペライチでどのように設定すれば いいのか……と悩んでおります。 また、もし普通のメニューは1枚画像で用意して、 ドロップダウンメニューの部分は別画像を用意して設定する、 というの方が簡単であるならばそちらの手法もご指摘いただければと思います。 サンプルとしてペライチで作成する場合の「こういう風の画像を用意して設定できればな」 という画像を添付させていただきます。（サンプルなので簡略に作成しております） 手法は特に指定しておりません。 分かりにくい説明で大変申し訳ございませんが、ご教授いただけますと幸いです。 どうぞよろしくお願いいたします。
- ベストアンサー
- CSS
- cssでコーディングしたメニューの表示について
先日この質問コーナーで教えていただき xhtml+ccssでサイドメニューにロールオーバーを着けることに成功いたしました。 そこで、その場合 今いるページのサイドメニューを固定でハイライトすることは可能でしょうか。 というか、一般的には、ロールオーバーをCSSで設定した場合、このような固定でのハイライトをすることは必要ないのでしょうか。 初歩的な質問で恐縮です。 PS.css+xhmtl コーディング猛特訓中です。 どこか参考になるサイトがありましたらご教授願います。 このblogサイトは少しずつですが見てみました。 http://www.cssnite.jp/
- 締切済み
- その他([技術者向] コンピューター)
- グローバルナビゲーション(カレントページ・マウスオーバー)の作り方を教
グローバルナビゲーション(カレントページ・マウスオーバー)の作り方を教えてください。 個別ページ毎にactなどとクラスをいちいち割り振るのではなく、JavaScriptで、パッと一気に処理したいと考えています。 ネットを探し回って、「カレントページ」「マウスオーバー」それぞれに対応する記述は見つけたのですが、それらを組み合わせると期待通りの動作となりません。具体的には、カレントページで、グローバルメニューをマウスオーバーした際、マウスオーバー画像へ変わるまではよいのですが、マウスアウトした時点で、カレントではない、ノーマル画像へと変更されてしまいます。(リロードすると、カレントメニュー画像へと戻るのですが…) 「カレントページにいるときは、マウスオーバー画像を表示させずにカレントメニュー画像のままにしとく」 あるいは、 「カレントページでマウスアウトした際はカレントメニュー画像を、その他のページでマウスアウトした際はノーマルメニュー表示させる」ようにするためには、どうしたらよいでしょうか？ スクリプトそのものを教えていただけると一番有難いのですが、難しいようであれば、参考になるサイト等でも構いません。何らしかのヒントだけでも、誰かくださいー。
- ベストアンサー
- JavaScript
お礼
ありがとうございました。