ここから本文です

訪問中のメニューに変化をつけるには??? cssに取り組み始めた全くの素人...

m4_********さん

2011/9/217:01:53

訪問中のメニューに変化をつけるには???

cssに取り組み始めた全くの素人です。見よう見まねでメニューを作っています。
首記のようにしたいのですが、分かりません。
cssの一部は次のとおりです。

}
.menulist a{
color: blue;
display: block;
width: 174px;
padding: 8px 4px 3px 28px;
font-size: 13px;
text-decoration: none;
background-image: url(img/menu.gif);
background-repeat: no-repeat;
}
.menulist a:hover{
color: blue;
background-image: url(img/menu-hover.gif);
background-repeat: no-repeat;
}

menu.gifを変化させるとか、menu-hover.gifを表示させたままにするとか
なんでもかまいません。

なお余談ですが、訪問済とか未訪問とかは必要ありませんが、
もしやこんな設定と同類なのでしょうか???

インターネットで調べようとしましたが、この類井の解説が見つかりませんでした。

どうぞ、よろしくお願いいたします。

閲覧数:
3,791
回答数:
1

違反報告

ベストアンサーに選ばれた回答

min********さん

2011/9/220:31:03

今見ているページのメニューの色(画像)だけ変化させ、他は普通どおり(CSSの設定どおり)に見せたい…ということでしょうか?

希望のものとは構造がまるっきり違いますが、考え方(やり方)は全く同じ、というサンプルがありました。
http://www.1uphp.com/con2/menu/tab51.html

classを複数作って、それを適用させる…という訳です。


例えばHTMLを下記のように書いたとします。
<ul>
<li class="menulist">メニュー1</li>
<li class="menulist">メニュー2</li>
<li class="current">メニュー3</li>
<li class="menulist">メニュー4</li>
<li class="menulist">メニュー5</li>
</ul>

今見ているページはメニュー3をクリックして表示されるページ、だとしたら、上記のように書きます。
メニュー3だけクラス名が違っていますよね?
後はそれぞれのクラス名に対してCSSを指定すればOK、というだけです。

つまり、ページによりHTMLを変える必要があります。
メニュー2のページならば、メニュー2がcurrent、メニュー3はmenulistに戻ります。


訪問済み、未訪問、の場合は、リンクの疑似クラス(a:hoverもリンクの疑似クラス)を使えば簡単に表現を変えられます。


HTMLとCSSを使ってひとつのサイトを作り上げる…という内容の書籍がいくつか出回ってますから、そういうものを見て仕組みを理解し、あとは色々なサンプルを見て回るのがいいですよ。
上手くいかないならば、何故上手くいかないのかを考えるのも、勉強のひとつです。
方法が根本的に間違っているからなのか、それともCSSの仕様上の問題なのか、ブラウザによる問題なのか、HTMLの書き方がまずかっただけなのか、などなど、上手くいかない原因はアッチコッチにありますから、そういうものをひとつずつ潰していくのです。
短絡的に答えだけを求めても、勉強としては中途半端になり、イマイチ身にならない事が多いですから。

頑張ってみて下さい。

質問した人からのコメント

2011/9/5 11:24:18

CSSに取り組む姿勢についてアドバイスいただき本当に
ありがとうございました。
早速、入門書を購入し、先ずは簡単にできることからと自分なりの
cssを書き始めています。
おかげさまで興味もわいてきて、楽しさも感じられそうです。

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる