• 締切
  • すぐに回答を!

スタイルシートの動作

  • 質問No.911222
  • 閲覧数50
  • ありがとう数3
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 66% (8/12)

すいません。どうしても動作が思ったように動かずに・・・
HPなどを読んでも難しかったため、教えてもらえると嬉しいです。

先日聞いた事なのですが、下記を教えてもらいやってみました。
a:link, a:visited {font-size: x-small; text-decoration: none; color:#C7A17E;}
a:hover {font-size: x-small; text-decoration: underline; color:#FF9966;}
a:active {font-size: x-small; text-decoration: underline; color:#C7A17E;}
td {font-size: x-small;}
span {font-size: x-small;}
body {font-size: x-small;}
li {font-size: x-small;}
これで、動作を確認していろいろ試してみたのですが
マウスを乗せた時だけにアンダーラインがでるようにしたいのです。(マウスを乗せてない時やマウスを乗せた後、マウスをどかしたらアンダーラインはでないように。)
しかし、マウスを乗せる前からアンダーラインが表示されていて、どうしたら良いかわからないので教えて下さい。順番を変えてみたりいろいろ試したのですが上手く動作しないのです。

また、表などで複雑だったりすると、BODYは必要かと思うのですが、
td {font-size: x-small;}
span {font-size: x-small;}
body {font-size: x-small;}
li {font-size: x-small;}
上記のspan, Li, tdがない場合フォントサイズは
表や枠の中などで思った表示はできないのでしょうか?

回答 (全2件)

  • 回答No.2

ベストアンサー率 34% (16/47)

まず、リンクの下線ですが

A:link { font-size : x-small ; text-decoration : none ; color : #C7A17E ; }
A:visited { font-size : x-small ; text-decoration : none ; color : #C7A17E ; }
A:hover { font-size : x-small ; text-decoration : underline ; color : #FF9966 ; }
A:active { font-size : x-small ; text-decoration : none ; color : #C7A17E ; }

でテストされてはいかがでしょうか?
リンク部分のスタイルは『擬似クラス』といい、
リンクを表す<A>タグに「:」で区切ってスタイルを定義していきます。
その際、記述の順番ですが、
1)リンク部分のスタイル A:link
2)リンク済み部分のスタイル A:visited
3)リンク部分にマウスが重なった際のスタイル A:hover
4)リンクボタンを押している間のスタイル A:active
になります。
記述の際は、この順番を守ってください。

また、表などで複雑だったりすると・・・とありましたが、
おっしゃる内容が少しわかりません。
通常、BODYで定義した内容は、ページ全体に反映されますので、
TABLEタグを利用してスタイルを定義していなければ、
ページ全体の文字サイズは「X-small」になって表示されます。
部分的にスタイルを使用したい場合は
<SPAN>タグや<DIV>タグにスタイルを定義する事もできますし、
クラスセレクタというものも利用してみてはいかがでしょうか?

また、表示に関してですが、
スタイルの宣言は同じHTMLファイルでしょうか?
それとも別のスタイルシートファイルを利用していらっしゃるのでしょうか?

同じHTMLファイルでのスタイル定義なら
<HEAD>~</HEAD>内に
<STYLE type="text/css">
<!--
ここにスタイルを記述
-->
</STYLE>
でスタイルを定義してください。

また、別のスタイルシートをリンクする場合も
<HEAD>~</HEAD>タグないに
<LINK rel="stylesheet" type="text/css" href="スタイルシートのファイル名(相対パス)">を記述してください!

これでテストしてみてはいかがでしょうか?
補足コメント
lan_lan

お礼率 66% (8/12)

maikonyan3さんの書いてくださった内容で試してみました。
リンク先をまだクリックしてない部分だけが、
アンダーラインがでてしまいます。
リンク先を(visited)表示した後のものはアンダーラインが消えるという症状です。
できればリンクは全て最初はアンダーラインがない状態がいいのです・・・(ToT)

いろいろとありがとうございます。
投稿日時:2004/07/01 17:09
お礼コメント
lan_lan

お礼率 66% (8/12)

補足が足りなくてお礼の部分にも書かせてもらいます。すいません。お礼も一緒に書かせてください。m(_ _)m

TABLEタグを利用してスタイルを定義していなければ、
ページ全体の文字サイズは「X-small」になって表示されます。
そうなのですね。ありがとうございます。少しだけ理解できたと思います。

スタイルの宣言は同じHTMLファイルでしょうか?
それとも別のスタイルシートファイルを利用していらっしゃるのでしょうか?

スタイルシートの宣言は同じHTMLで書いており、
<HEAD>~</HEAD>内に
<STYLE type="text/css">
<!--
ここにスタイルを記述
-->
</STYLE>
と、定義しています。これを今度外部スクリプトへ変更する予定で、まだしておりませんが、
今後は、<HEAD>~</HEAD>タグないに
<LINK rel="stylesheet" type="text/css" href="スタイルシートのファイル名(相対パス)">を記述する予定です。
今のアンダーラインをなんとかしたいとは思うのですが・・・。思ったようにまだ改善されないのです。

詳しい説明をありがとうございました。
投稿日時:2004/07/01 17:17
  • 回答No.1

ベストアンサー率 47% (23/48)

こんにちは。
お書きになられたスタイルシートで問題ないはずですが、
OSとブラウザは何をお使いですか?
また、他にもスタイルシートを定義しているということはないでしょうか。

ブラウザはなるべく最新のバージョンにして、下記のような最小限の記述で試してみると良いと思います。

//普通のリンクや、訪問済みのリンクは装飾表示しない
a:link,a:visited {text-decoration:none}
//マウスが乗った時やクリックした時はアンダーラインを表示
a:hover,a:active {text-decoration: underline;

>上記のspan, Li, tdがない場合フォントサイズは
>表や枠の中などで思った表示はできないのでしょうか?

タグが入れ子状になった場合、より内側にある指定が有効になります。
bodyで文字サイズを指定していても、tdで指定していないとbodyの指定はtd内に反映されません。
補足コメント
lan_lan

お礼率 66% (8/12)

初心者のため説明不十分な点を申し訳ないです。
OSとブラウザは、ウインドーズのXPで、IEの6.0を使っています。

a:link,a:visited {text-decoration:none}
a:hover,a:active {text-decoration: underline;
で、やってみました。
アンダーラインについては変わりなく、最初から表示されてます。(ToT)

タグが入れ子状になった場合、より内側にある指定が有効になります。
bodyで文字サイズを指定していても、tdで指定していないとbodyの指定はtd内に反映されません。

と、ありましたので、やはりbodyで指定しても
フォントのサイズ指定を入れ子になっている部分で指定していた方がちゃんとx-small表示されるようですね。ありがとうございます。
投稿日時:2004/07/01 17:03
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ