 Re: リンクにマウスが乗ったときの個別設定の仕方について ( No.1 ) |
- 日時： 2005/12/01 08:28
- 名前： Newのり太
- リンクの定義済みクラスをクラス分けするには
スタイルシートマネージャーでクラス名を入力する際に
ちょっと工夫が必要です。こちらを参考に。
http://www.wsb.jp/hpb/css/link.htm#05
上記手順で解決しない場合は、実際のページを見てみないとわかりません。
|
| Re: リンクにマウスが乗ったときの個別設定の仕方について ( No.2 ) |
- 日時： 2005/12/01 09:14
- 名前： はな
-
Newのり太様
早急のお返事ありがとうございます。
参考に載せて頂いたホームページを見ながらパソコンと格闘すること２０分、ページ/ソースを確認したら原因がわかりました！
そこでまた質問があるんです。
下記が私がスタイルシートのクラスで作ったものが反映されているコードなのですが、これだと新規で立てた内容のようにうまくいかないのです。
<A href="******.html" class="class:HOVER">class</A>
そこで、参考のホームページのコードと比較しながら
class:HOVER"のところの:HOVERを取り除いてみると、うまくいったのです！！
やったー！と思いましたけど、果たして何が間違ってこの:HOVERがコードに入ってしまうのかわかっていないし、毎回ページ/ソースから取り除く作業をせねばならぬのかしら。。。と疑問に思っております。
そこで、どのようにクラスの設定を変えれば良いのか教えてくださいますでしょうか。
長々となってしまったのですが、要するに私の作りたいコードはこれなのです。
<A href="******.html" class="class">class</A>
でもこれだとどこに「マウスが上にあるリンク」のHOVERがないのになあ。。。と思ったり私には不思議すぎます。。。
説明いただけると大変助かります。
お手数ですが、どうぞよろしくお願い致します。
|
| Re: リンクにマウスが乗ったときの個別設定の仕方について ( No.3 ) |
- 日時： 2005/12/01 13:51
- 名前： Newのり太
- えっと、どのような操作をされているのかわかりませんので
HPBでの操作方法（一例）のみ書いておきます。
1.スタイルシートマネージャー＞追加＞HTMLタグ名の欄に
a.sample:hover と記入。その後スタイルを設定。
2.編集画面にて、該当リンク部分を選択。
※編集画面右上の選択中のタグが a となっていることを確認。
右クリック＞スタイルの設定。クラス名欄に先ほどつけたクラス名（sample）を記入。
前回提示した http://www.wsb.jp/hpb/css/link.htm#05
『クラスのスタイルを適用する(スタイルクラスのツールバーを利用する場合)』
で、そのまま「クラス名:hover」を選択すると
<A href="******.html" class="class:HOVER">class</A>
↑のようになってしまいますね。確認不足でした。ごめんなさい。
「a.sample:hover」だけでなく、「a.sample」にスタイルを設定した場合には、
スタイルクラスのツールバー でも、「sample」のみを選択できるようです。
> でもこれだとどこに「マウスが上にあるリンク」のHOVERがないのになあ。。。と思ったり私には不思議すぎます。。。
「a:hover」は、すでに擬似クラスとして定義されていますので、
該当のaタグに付加するクラス名は「クラス名」のみでいいわけです。
まさに、実際に「マウスがのったとき」というのが「hover」なのですから。
# 自分でも書いてて意味わからん。。^_^;
|
| Re: リンクにマウスが乗ったときの個別設定の仕方について ( No.4 ) |
- 日時： 2005/12/02 04:25
- 名前： はな
-
Newのり太様
またまた返信ありがとうございます。
今度こそはっ！とはりきってやってみましたが、やっぱりうまくいきません。。。。せっかく教えてくださったのに申し訳ないです。。。
>1.スタイルシートマネージャー＞追加＞HTMLタグ名の欄に
a.sample:hover と記入。その後スタイルを設定。
>2.編集画面にて、該当リンク部分を選択。
※編集画面右上の選択中のタグが a となっていることを確認。
右クリック＞スタイルの設定。クラス名欄に先ほどつけたクラス名（sample）を記入。
でやってみました、この時にHTMLタグ名の欄に記入となっていますが、「クラスのスタイルを設定」ではなく、「HTMLタグのスタイルを設定」ですよね？
そうするとHTMLタグ名を「a.sample:hover」とし、「HTMLのタグの候補」というところは何になるのでしょうか？
この方法でやってもやはり、
<A href="******.html" class="class:HOVER">class</A>
となってしまい、ソースから:HOVERを取り消さねばなりません。
でもここで一度ソースから取り除く作業を一回でもすれば、次回にクラス個別設定を同じようにすると、もう:HOVERは取り除かれていて、問題ないのです。
なんでなんだろう。。。。。くーーーっ。
もしかしてオプションとかに変な設定でも入っているのかな。。HPBのせいにする始末でございます。
初心者でしてわかりにくい書き方でごめんなさい。
もしまたよろしかったらお助けください。
|
| Re: リンクにマウスが乗ったときの個別設定の仕方について ( No.6 ) |
- 日時： 2005/12/02 10:03
- 名前： はな
- 状態： 解決!
-
Newのり太様
返信ありがとうございます。
教えて頂いた方法を注意深くやってみると。。。できましたっ！！
感動です。なんとお礼していいやら、本当に時間を割いて丁寧に教えていただきありがとうございました。
私はNewのり太さんのご指摘通り、
＞クラス名欄に class:HOVER と書いて（またはリストから選択して）しまっているとか
をやっていました。手入力で「class」と打ち込んでOKするとうまくいきました。
素朴な疑問なのですが、クラスの設定で、「a.class:hover」と作り、右クリック、クラスの設定で、リストから作った「class:HOVER」を選ばず、「class」と手で打ち込むあたりがなんでなんだろうと思いました。
（もちろんこれでうまくいくのですけれど、私の初心者的疑問です）
問題はまさしくNewのり太様のおかげで解決したのですが、もしよろしかったら私の素朴な疑問にもお付き合い頂ければ大変うれしいです。
重ね重ねありがとうございました。
|
| Re: リンクにマウスが乗ったときの個別設定の仕方について ( No.7 ) |
- 日時： 2005/12/02 11:16
- 名前： Newのり太
- すいません。
>>4 に対する返信記事を修正しようと思って間違えて削除してしまいました。
その間に、誤って削除した記事に返信がついていました。（汗）
順番がヘンになりますが、とりあえず内容は以下です。。
<!-- 記事No.4 に対する返信ここから -->
> 「クラスのスタイルを設定」ではなく、「HTMLタグのスタイルを設定」ですよね？
どちらでも構いません。
スタイルシートマネージャー画面左上のリストが何であっても
下の記入欄にタグ名を書けばタグのスタイル、
. に続けてクラス名を書けばクラスのスタイル、
# に続けてID名を書けばIDのスタイルと認識されます。
で、今回は、>>1 にも書いたとおり、単なるクラスのスタイルではなく、
「擬似クラスに対するクラス」といった、HPB（のスタイルシートマネージャー）では
想定されていない指定の仕方をするので、指定の仕方が通常とは少し異なるのです。
> 「HTMLのタグの候補」というところは何になるのでしょうか？
そこは通常、現在選択中のタグが「候補」としてあげられますが、
必ずしもその中から選ばなければならないというものではありません。
今回は、自分でクラス名を書くので無視してかまいません。
っていうか、気になるようでしたら「クラスのスタイルを設定」を選んでください。
> この方法でやってもやはり、
> <A href="******.html" class="class:HOVER">class</A>
> となってしまい、ソースから:HOVERを取り消さねばなりません。
> でもここで一度ソースから取り除く作業を一回でもすれば、次回にクラス個別設定を同じようにすると、もう:HOVERは取り除かれていて、問題ないのです。
ちょっと当方では現象が再現できないのですが、
｜右クリック＞スタイルの設定。クラス名欄に先ほどつけたクラス名（sample）を記入。
のときに、クラス名欄に class:HOVER と書いて（またはリストから選択して）しまっているとか、
前回の指定がそのまま残ってしまっているとか、そのようなことではないかと思われます。
> でもここで一度ソースから取り除く作業を一回でもすれば
特定のタグからクラス属性を取り除くには、上記のように直接ソースで削除するほかに、
前述の
｜右クリック＞スタイルの設定。
で、クラス名欄からクラス名を削除することでも可能です。
逆に言えば、ここに、「class」と書かれていると、ソースでは class="class" となりますし、
ここが「class:HOVER」となっていれば、ソースでは class="class:HOVER" となるはずです。
<!-- 記事No.4 に対する返信ここまで -->
> 素朴な疑問なのですが、クラスの設定で、「a.class:hover」と作り、右クリック、クラスの設定で、リストから作った「class:HOVER」を選ばず、「class」と手で打ち込むあたりがなんでなんだろうと思いました。
> （もちろんこれでうまくいくのですけれど、私の初心者的疑問です）
今回はたまたま a:hover だけですが、はなさんの理屈でいくと、
では他の擬似クラス、たとえば a:visitedにもクラスを適用する場合はどうしましょう？
>>3 でも触れましたが、
｜「a:hover」は、すでに擬似クラスとして定義されていますので、
｜該当のaタグに付加するクラス名は「クラス名」のみでいいわけです。
｜まさに、実際に「マウスがのったとき」というのが「hover」なのですから。
｜# 自分でも書いてて意味わからん。。^_^;
自分で書いてて意味不明だと感じたのですが、やはりうまく伝わらなかったようですね。
うまく説明できないのですが、クラスが入れ子になっているというか、
とにかく、そのリンク部分のクラス名は、class であり、
hoverや、visitedについては、スタイルシート部分で定義しておけば
ブラウザが勝手にhoverであるか、visitedであるかを判断し
それらのスタイルを適用するわけです。
ついでに言えば、クラス名に「class」ってのはやめておくほうが無難です。
http://allabout.co.jp/computer/hpcreate/closeup/CU20051008A/index.htm
まあ、あくまでも「例え」なのでしょうが。。
|
| Re: リンクにマウスが乗ったときの個別設定の仕方について ( No.8 ) |
- 日時： 2005/12/02 11:28
- 名前： はな
-
Newのり太様
丁寧に説明頂きありがとうございました。
またまた感動してこんな親切な人いるのかーと独り言が出ました。。。
はい！私の素朴な疑問、Newのり太さんの説明で今度こそわかったような気がしますっというかわかりました９０％。
残りの１０％で私またHPBをいじくりながら理解をより深めていきたいと思います。
本当にありがとうございました。
心より感謝いたします。
|
リンクにマウスが乗ったときの個別設定の仕方について