• 締切済み

スタイルシートの動作

maikonyan3の回答

回答No.2

まず、リンクの下線ですが 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="スタイルシートのファイル名（相対パス）">を記述してください！ これでテストしてみてはいかがでしょうか？

lan_lan
質問者

お礼

補足が足りなくてお礼の部分にも書かせてもらいます。すいません。お礼も一緒に書かせてください。m(_ _)m TABLEタグを利用してスタイルを定義していなければ、 ページ全体の文字サイズは「X-small」になって表示されます。 そうなのですね。ありがとうございます。少しだけ理解できたと思います。 スタイルの宣言は同じHTMLファイルでしょうか？ それとも別のスタイルシートファイルを利用していらっしゃるのでしょうか？ スタイルシートの宣言は同じＨＴＭＬで書いており、 <HEAD>～</HEAD>内に <STYLE type="text/css"> <!-- ここにスタイルを記述 --> </STYLE> と、定義しています。これを今度外部スクリプトへ変更する予定で、まだしておりませんが、 今後は、<HEAD>～</HEAD>タグないに <LINK rel="stylesheet" type="text/css" href="スタイルシートのファイル名（相対パス）">を記述する予定です。 今のアンダーラインをなんとかしたいとは思うのですが・・・。思ったようにまだ改善されないのです。 詳しい説明をありがとうございました。

lan_lan
質問者

補足

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

この回答がついた質問に戻る
回答 全件
こんにちは。 お書きになられたスタイルシートで問題ないはずですが、 …
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 外部スタイルシートについて・・・

    外部スタイルシートを書きたいのですが、 まだ良くわかってない点があるので教えてくださると嬉しいんですが・・・（ＴＴ） 今はＨＴＭＬのヘッダ内に書いております。 <style TYPE="text/css"> </style> Ｑ１，上の部分は外部スタイルシートにすると、いらないのでしょうか？ Ｑ２，下の部分は外部スタイルシートにしてもスタイルシート内に、書く事ができますか？書くと不具合の原因になるのでしょうか？ <!-- //忘れてしまうので、ここにコメント書きたいです。 できれば、スタイルシートを表示できない？ブラウザの人へ配慮したいと思うので、 <!-- は、あった方が自分が忘れなくていいかと思うのですが・・・。 Ｑ３，ブラウザによって変になる、例えばとっても古いバージョンのネスケなどでも表示できるといいのですが 下記で問題あるのでしょうか？ もし良かったら下の内容をこうした方がいいという アドバイスがあると嬉しいです。 質問の仕方が良くないかもしれませんが教えて下さい（ＴＴ） <style TYPE="text/css"> <!-- //忘れてしまうので、ここにコメント書きたいです。 a:link {font-size: 11pt; text-decoration:none; color:#C7A17E;} a:visited {font-size: 11pt; text-decoration:none; color:#C7A17E;} a:active {font-size: 11pt; text-decoration:none; color:#C7A17E;} a:hover {font-size: 11pt; text-decoration:underline; color:#FF9966;} td {font-size: 11pt;} span {font-size: 11pt;} BODY {font-size: 11pt; } LI {font-size: 11pt;} --> </style>

    • ベストアンサー
    • HTML
  • スタイルシートのリンクについて

    スタイルシートを下記の様に記述しました。 そこでリンクの部分なのですが ポインタが上にのった時にff6666になるようにしているのですが、 ff9900のままなのです。 通常はffcc00 既読はff9900 ポインタ上にのった時にff6666 クリックした時にff0000としたいのです。 どなたかお教え下さい。 <style type="text/css"> <!-- BODY { SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #ffcc00; SCROLLBAR-ARROW-COLOR: #ffcc00; SCROLLBAR-BASE-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR : #ffffff; SCROLLBAR-3DLIGHT-COLOR : #ffcc00} body,tr,td {font-size: 9pt;} body,tr,td {color: #ffcc00;} a {text-decoration: none;} a:link {color: #ffcc00;} a:hover {text-decoration: underline;} a:hover {color: #ff6666;} a:active {color: #ff0000;} a:visited {color: #ff9900;} body { background-repeat: no-repeat; background-position: 100% 100%; background-attachment: fixed;} --> </style>

    • ベストアンサー
    • CSS
  • 文字の色をスタイルシートで設定した時、ハイパーリンクの文字の色を変えたいのですが

    スタイルシートの定義で質問です。 文字の色をスタイルシートで設定したとき、ハイパーリンクの文字の色を変えたいのですが やり方が分かりません。よろしくお願いします。 htmlは次の様に書いてます。 これだと、ハイパーリンク文字にマウスをおいても白文字のままです。 この時、赤色にかえたいのですが。 <head> <style type="text/css"> .style1 { color: #FFFFFF; font-size: small; } a:hover { color: red; text-decoration: none; } </style> </head> <body> <a href="xxxx.htm"> <span class="style1">ハイパーリンク文字</span></a> ・ ・ </body>

  • cssで投稿した画像を中央に表示たい！！！！！

    blogで投稿した画像を中央に表示したい！！！！！ css詳しい人、教えてください！！！！！ 今、エキサイトブログの設定を行っているんですが、cssなど全くの初心者なので、右も左もわかりません。 そこで、現在、http://tenjikunik.exblog.jp/　のようになっています。 太陽の投稿画像をブラウザの中央付近に表示したいのですが、次のhtmlまたはcssをどう変更すべきでしょうか？助けてください。 css /* excite blog skin css */ body { margin : 0; padding: 0; background: #151414; color : #e7e7e7;} body,td,div,li{ font-size : 13px; font-family : verdana,arial,sans-serif; line-height : 150%; letter-spacing:1px; word-wrap: break-word;} a:link{ color: #cfcbc4; text-decoration: underline; } a:visited{ color: #cfcbc4; text-decoration: underline; } a:active{ color: #cfcbc4; text-decoration: underline; } a:hover{ color: #cf9712; text-decoration: none;} #im{ width:100%; clear: none;} td.im_hit{ background: url(http://image.excite.co.jp/jp/portal/im/imach_icon_orange.gif) no-repeat 0.5em 0.5em; padding: 0.5em 0.5em 0.5em 25px; cursor:pointer;cursor:hand; line-height: 100%; width: 550px;text-align:left;color:#cfcbc4;} div.im_title{font-size:x-small;color:#666;text-align:right;margin-bottom:10px;} div.im_title a{color:#666;} td.im_hit:hover{background-color:#fffee1; color:#333333;} table.im_summary{margin-top:3px;} td.im_summary {font-size:small;font-family:"Arial";line-height:160%;} span.im_url{font-size:small;font-family:"Arial"; text-decoration: underline;} span.im_titletext{text-decoration: underline;} #cmtviewfrm{ display:none !important;} #main { width:1899px; margin:0 auto; text-align:left; padding-bottom: 20px;overflow: hidden;} #Headarea{ height: 401px; width:1899px; margin: 0 auto; position: relative; } #titlearea{ width: 8020px; position: absolute; bottom: 0; left: 0; background: #a0a0a0;filter: alpha (opacity=80); -moz-opacity:0.8; opacity:0.8; padding: 10px;} div.HEADER{ font-size: 16px; font-weight: bold; line-height : 100%;} #titlearea a{ color: #fff; text-decoration:none; } #postArea{ margin-top:20px; width: 565px; float: left;} 字数が足りません。いって頂いたら開示いたします。

    • ベストアンサー
    • HTML
  • スタイルシートでリンク色を

    現在、以下のようなスタイルシートを外部スタイル シートにして使っています。 H1 {COLOR: SILVER;} TD {COLOR: INDIGO;} TBODY {FONT-SIZE: 12px; LINE-HEIGHT: 18px;} A {COLOR: #INDIGO; TEXT-DECORATION: none;} A:hover {COLOR: DEEPPINK; TEXT-DECORATION: underline;} A:active {COLOR: DEEPPINK; TEXT-DECORATION: underline;} この場合で、H1タグを使用したテキストにリンクを 貼ると4行目のスタイルが優先されてしまい、テキス ト色がINDIGOに変更されてしまいます。H1タグのテ キストは、リンクの有無にかかわらず、SILVERにし たいのですがスタイルシートを書き換えることで対応 できますでしょうか。 このスタイルシートを使用したHTMLファイルが既に かなりのページ数になっていますので個別にHTMLファ イルをいじるのは避けたいのです。どなたか解決法を ご教示くださいませ。 よろしくお願い致します。

  • CSS、おかしいですか？

    CSSですが、本を見てやっています。 下記のように記述したのですが、書かなくてもよい記述とか、おかしいところ、ありますでしょうか？ <style type=text/css> body{font-size:10pt} td {font-size:10pt; line-height:12pt} tr {font-size:10pt line-height:12pt} dive {font-size:10pt;line-height:12pt} a:link {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#990000} a:visited {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#990000} a:active {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#ff0099} a:hover {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#ff0099} </style>

    • 締切済み
    • CSS
  • スタイルシートのアンカー部分

    スタイルシートを利用してのアンカー部分の指定についてです。 a:link {color: yellow; text-decoration: none; } a:visited {color: yellow; text-decoration: none; } a:active {color: yellow; text-decoration: none; } a:hover {color: red; font-weight: bold; text-decoration: underline; } 現在、このように記述しています。 今までは、ページ毎に<STYLE TYPE="text/css">タグを使用し、本文中に記述していたのですが、その代わりとして新たに外部読み込みのcssファイルを使用してみました。 ところが、未訪問リンクだけが反映されないのです。 青文字で、下線付きで表示されてしまいます。 未訪問以外は、bodyなども含め、きちんと反映されています。 色々試行錯誤してみましたが、全然駄目だったので、 再び本文内に書き込む形を取りました。 IE5.5で動作確認しています。 この理由及び対策を御存知の方、教えていただけませんでしょうか？

    • ベストアンサー
    • HTML
  • 携帯でスタイルシートが利用できますか？

    携帯電話で見れるホームページで文字サイズの指定をしたいと思っております html言語で<font size="7">フォントサイズを指定したい</font>とすれば文字サイズが変更できるのですが スタイルシートを利用して下記のように記述すると フォントサイズが変更されません。携帯ではスタイルシート利用できないのでしょうか？詳しい方お教えください。 <style type="text/css"> .large {font-size:large} .small {font-size:small} </style> <body> スタイルシートで<span class="large">フォントサイズを指定したい</span> </body>

    • ベストアンサー
    • HTML
  • スタイルシートの記述について

    お世話になります。 スタイルシートでリンク箇所にアンダーバーを つけないために下記の記述をしているのですが a:link { Color: #0000cc; text-decoration: none; } a:visited { color: #0000cc; text-decoration: none; } a:hover { color: #ff0000; text-decoration: underline; } a:active { color: #0000cc; text-decoration: none; } ブラウザを起動してみてみるとアンダーバーが 表示されます。 一度リンクをクリックするとアンダーバーの 表示が消えます。 どこかミスがあるのでしょうか？ よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • Operaのバージョン９でa:hover { text-decoration: underline; }が動作しない

    Operaのバージョン９で以下のCSSが正常に動作しません。 症状：リンクにマウスオーバーしても下線が表示されない。 使用OS：Windows XP SP2 <html> <head> <style type="text/css"> a { text-decoration: none; } a:hover { text-decoration: underline; } </style> </head> <body> <ul> <li><a href="#">sample</a></li> <li><a href="#">sample</a></li> <li><a href="#">sample</a></li> </ul> </body> </html> この問題を解決するにはどうすればよいのでしょうか？ ご存知の方がおられましたらご回答をよろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する
質問する