- 締切済み
スタイルシートの動作
すいません。どうしても動作が思ったように動かずに・・・ ＨＰなどを読んでも難しかったため、教えてもらえると嬉しいです。 先日聞いた事なのですが、下記を教えてもらいやってみました。 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;} これで、動作を確認していろいろ試してみたのですが マウスを乗せた時だけにアンダーラインがでるようにしたいのです。（マウスを乗せてない時やマウスを乗せた後、マウスをどかしたらアンダーラインはでないように。） しかし、マウスを乗せる前からアンダーラインが表示されていて、どうしたら良いかわからないので教えて下さい。順番を変えてみたりいろいろ試したのですが上手く動作しないのです。 また、表などで複雑だったりすると、ＢＯＤＹは必要かと思うのですが、 td {font-size: x-small;} span {font-size: x-small;} body {font-size: x-small;} li {font-size: x-small;} 上記のspan, Li, tdがない場合フォントサイズは 表や枠の中などで思った表示はできないのでしょうか？
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- maikonyan3
- ベストアンサー率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>タグに「：」で区切ってスタイルを定義していきます。 その際、記述の順番ですが、 １）リンク部分のスタイル A:link ２）リンク済み部分のスタイル A:visited ３）リンク部分にマウスが重なった際のスタイル A:hover ４）リンクボタンを押している間のスタイル 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="スタイルシートのファイル名（相対パス）">を記述してください！ これでテストしてみてはいかがでしょうか？
- tomuo2
- ベストアンサー率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内に反映されません。
補足
初心者のため説明不十分な点を申し訳ないです。 OSとブラウザは、ウインドーズのＸＰで、ＩＥの6.0を使っています。 a:link,a:visited {text-decoration:none} a:hover,a:active {text-decoration: underline; で、やってみました。 アンダーラインについては変わりなく、最初から表示されてます。（ＴｏＴ） タグが入れ子状になった場合、より内側にある指定が有効になります。 bodyで文字サイズを指定していても、tdで指定していないとbodyの指定はtd内に反映されません。 と、ありましたので、やはりbodyで指定しても フォントのサイズ指定を入れ子になっている部分で指定していた方がちゃんとx-small表示されるようですね。ありがとうございます。
お礼
補足が足りなくてお礼の部分にも書かせてもらいます。すいません。お礼も一緒に書かせてください。m(_ _)m TABLEタグを利用してスタイルを定義していなければ、 ページ全体の文字サイズは「X-small」になって表示されます。 そうなのですね。ありがとうございます。少しだけ理解できたと思います。 スタイルの宣言は同じHTMLファイルでしょうか？ それとも別のスタイルシートファイルを利用していらっしゃるのでしょうか？ スタイルシートの宣言は同じＨＴＭＬで書いており、 <HEAD>～</HEAD>内に <STYLE type="text/css"> <!-- ここにスタイルを記述 --> </STYLE> と、定義しています。これを今度外部スクリプトへ変更する予定で、まだしておりませんが、 今後は、<HEAD>～</HEAD>タグないに <LINK rel="stylesheet" type="text/css" href="スタイルシートのファイル名（相対パス）">を記述する予定です。 今のアンダーラインをなんとかしたいとは思うのですが・・・。思ったようにまだ改善されないのです。 詳しい説明をありがとうございました。
補足
maikonyan3さんの書いてくださった内容で試してみました。 リンク先をまだクリックしてない部分だけが、 アンダーラインがでてしまいます。 リンク先を（visited）表示した後のものはアンダーラインが消えるという症状です。 できればリンクは全て最初はアンダーラインがない状態がいいのです・・・（ＴｏＴ） いろいろとありがとうございます。