- ベストアンサー
スタイルシートで一部分だけ リンクの色を変えたい
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
この方法は如何でしょうか。 <html> <header> <style type="text/css"> <!-- a:link {color:red; } a:visited { color:orange; } #poi { color: green ; } --> </style> </header> <body> <a href="poi.html">りんく１</a><BR> <a href="poi.html" id="poi">りんく２</a> </body> </html>
その他の回答 (6)
- goldfox
- ベストアンサー率49% (123/249)
クラス名は<a>タグは後ろ、<p>、<div>などは前に付けます。注意しましょう。 a.aa {color:#555555} a:vlink.aa {color:#FF0000} a:hover.aa {color:#0000FF} .bb a {color:#cccccc} .bb a:vlink {color:#FF00FF} .bb a:hover{color:#00FF00} <a href="aaa.html" class="aa">aaa</a> <p class="bb"><a href="bbb.html">bbb</a></p>
お礼
クラス名の位置のことわかりやすかったです ありがとうございました
- rabu_chihaha
- ベストアンサー率66% (8/12)
こんな感じですか？ a.style1 {color: #FF00FF} a.style2 {color: #FF0000} a.style3 {color: #000000} <a href="aaa.html" class="style1">aaa.html</a> <a href="bbb.html" class="style2">bbb.html</a> <a href="ccc.html" class="style3">ccc.html</a> どうでしょう？
お礼
よくわかりました ありがとうございました
aタグにクラス設定すればよいのではと思われます。 (divやspanでも可能でしょう) a:link.aaa {color:xxx} a:visited.aaa {color:xxx} <a href="" class="aaa"></a>
お礼
a.aaa:linkという書をしていましたが普通しないんですね ありがとうございました
- z_liang_00
- ベストアンサー率42% (45/107)
＃２です。 「とほほ」に、色々と詳しく載っていますよ。
お礼
見てみることにします ２度の回答どうもありがとうございました
- partita
- ベストアンサー率29% (125/427)
＞今まではクラスは単独で使ってきましたが クラスはpでもaでもinputでも、なんでも使えると思ってください。ただし、記述方法に注意。 a.link { color:black } のようにクラス設定すると、タグ<a>内に限定されますが、 .link { color:black } にすると、タグ指定がないので、pやa、spanなど複数種のタグにまたがって適用可能です。
お礼
ありがとうございました。 HTMLを軽量化できました＾＾
- partita
- ベストアンサー率29% (125/427)
a.link1:link a.link1:visited a.link2:link a.link2:visited のように、aタグにクラスを設定することは可能です。 それぞれのクラスで別々の色を設定すればいいです。
補足
クラスはaタグにしか使えないのでしょうか？ 今まではクラスは単独で使ってきましたが、pタグなどには使えないのですか？ 初心者ですみません
関連するQ&A
- css リンクの色が全部変わってしまう。
１、 css div#link a:link{#ff0000;} div#link a:visited{#999999;} と設定したリンクの行があるとします。 ひとつのリンクをクリックすると、全ての並んでいる、リンクがvisitedの色に変わってしまいます。 原因と直し方を教えてください。 ２、 また、firefox（IEもかもしれない）では一度visitedの色になるとブラウザを再起動しても、いつまでもvisitedの色のままです。 これは正常な動作なのでしょうか。 異常である場合の直し方を教えてください。 正常である場合、むやみにlink色とvisited色は違う色にしない方がよろしいということでしょうか。 回答お願いします。
- ベストアンサー
- CSS
- リンクカラーが変わりません。
外部CSSでリンクカラー設定したいのですがうまくできません。 最初からvisited設定カラーとなり、visitedはactive設定カラーで表示されてしまいます。（link設定カラーが適用されません。） 前回同じような質問をさせていただき、解決したと思ったのですが、作り直しているうちにまた解らなくなってしまいました。ページ自体は問題なくジャンプするのですが、どこが間違っているのでしょうか？ よろしくご指導お願い致します。 [site] ├[contents] │ └ [index] │ └ index.html │ └[styles-site.css] └ navi.css index.html <html> <head> <link href="../../styles-site.css/navi.css" rel="stylesheet" type="text/css"> </head> <body> <div class="navi"> <div><a href="index.html">top</a></div> </div> </body> </html> .navi.css <style type="text/css"> <!-- .navi div { float:left; width:45px; text-align:center; } a:link { color:#ff9933 } a:visited { color:#cccccc } a:active { color:#0000f5 } a:hover { color:#009700 } -->
- ベストアンサー
- その他（プログラミング・開発）
- CSSの添削をお願いします。リンク色が反映しません
閲覧ありがとうございます。下記CSSの 「.CLASS li a:link,a:visited{ color:red; text-decoration:none;」 の部分が反映されず、ブラウザの標準設定のままになってしまいます。 本来のstyleの全文はbodyや他のクラスの記述もしているのですが、それらが影響しているわけではないことを確認してあります。 <style> .CLASS ul{ padding:0; } .CLASS li{ border-top: solid pink 1px; list-style-type: none; } .CLASS li a:link,a:visited{ color:red; text-decoration:none; background-color:lightgray; display: block; } .CLASS li a:hover { background-color:gray; } </style> <div class="CLASS"> <ul> <li> <a href=""> 反映されてない…リンク文字色red、デコレーションnone</a> </li> <li> <a href="">反映されてる…リンク背景色lightgray、ホバー背景色gray</a> </li> </ul> </div> 宜しくお願いします
- 締切済み
- CSS
- スタイルシートの外部リンク方法は間違っていますか？
外部ＣＳＳファイルからＨＴＭＬファイルへリンクしてみましたが 文字化けの羅列になります ページのレイアウトの枠組みなのですが homepageフォルダにindex.html style.cssの2つのファイルを作成し style.cssのファイルの中に body { text-align:center; } #outline { width:750px; text-align:left; margin:0 auto; } .outline-margin { margin:0 10px; } .main { width:480px; float:right; } .side { width:260px; float:left; } .c-both { clear:both; } と記述しtext2.cssと名前を付けたカスケードスタイルドキュメントを入れてあります これをＨＴＭＬに <html> <herd> <link rel="styleseet" href="style.css" type="text2.css"> </herd> <div id="outline"> <div class="header"> タイトルなど </div><!-- end header --> <div class="outline-marign"> <div class="main"> メインスペース </div><!-- end main --> <div class="side"> サイド </div><!-- end side --> <div class="c-both"><br></div> </div><!-- end outline-marign --> <div class="footer"> フッターなど </div><!-- end footer --> </div><!-- end outline --> </html> のように記述しました リンク方法はこれで間違えていますでしょうか？ ブラウザで見ると文字化けの羅列です ＣＳＳをＨＴＭＬに組み込むときちんと表示されるのでブラウザの問題ではない初歩的ミスだと思うのですが 御教授お願い致します
- ベストアンサー
- その他（インターネット・Webサービス）
- スタイルシート（CSS）の外部リンク方式を使用したテキストリンクの色変更
お手数ですが、webページ作成に詳しい方は回答お願いします。 webページを作成しております。 スタイルシート（CSS）を外部リンク式でhtml文書に適用して、テキストリンクの色を変更しようとしています。 未訪問リンクは青色、訪問済みリンクはグレー、マウスオーバーリンクは赤色が希望ですが、うまくいきません。 未訪問、訪問済み、マウスオーバー時に関わらず常に赤色です。 ちなみに内部埋め込み式ではうまくいきました。 以下html及びスタイルシート詳細です。 （外部リンク式html） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <a name="jump"></a> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <LINK rel="stylesheet" href="css/body.css" type="text/css"> <SCRIPT type="text/javascript" src="css/default_css.js"></SCRIPT> <TITLE></TITLE> </style> </HEAD> ～抜粋～ <TABLE width="740" border="0" cellspacing="0" cellpadding="0"> <TR> <TD height="40" align="center" bgcolor="#504040" class="t0"> <div id="footer"> <br /> <a href="home.html">HOME</a> |<a href="sitemap.html">サイトマップ</a> <br /> </div> （外部リンク式スタイルシート） a:link {color:blue;} a:visited {color:gray;} a:hover {color:red;} body{ color:#666666;} #main { line-height: 150%;} （埋め込み式html） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <a name="jump"></a> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- a:link {color:blue;} a:visited {color:gray;} a:hover {color:red;} body{ color:#666666;} #main { line-height: 150%;} #footer { color:#ffffff; font-size: 100%;} --> <SCRIPT type="text/javascript" src="css/default_css.js"></SCRIPT> <TITLE></TITLE> </style> ～抜粋～ <TABLE width="740" border="0" cellspacing="0" cellpadding="0"> <TR> <TD height="40" align="center" bgcolor="#504040" class="t0"> <div id="footer"> <br /> <a href="home.html">HOME</a> <a href="sitemap.html">サイトマップ</a> <br /> </div> </TD> </TR> </TABLE></TD> よろしくお願いします。
- 締切済み
- HTML
- CSSでのリンク色の変更で
HPのリンク色(a:link)の色をa:link{color:#ffffff;}(色は例です)で変えたんですが、 何故か色が反映されず、デフォルトの青色で表示されてしまいます。 ・hover、active、visitedも同じように変更しているが、そっちは反映されている ・リンクの色を変えようとするページにcss(仮にAとB)ファイルを２つ使っている ・Aではリンクに関する設定は記述してない。またAを省いても変わらない ・Bのリンク以外の指定を消しても同じ ・そもそも青色で設定している文字がない ・HTML文にも色変えの記述はない ・ブラウザ指定もしていない 何度自分で見直しても全く分からないのでお願いします
- ベストアンサー
- HTML
- ＣＳＳでのリンク色の優先順位を教えて。
<div class="t1"> <div class="t2"> aaa </div> </div> .t2 {color:orange;} .t1 {color:green;} 上記の様なプログラムの場合は、「aaa」はオレンジ色になります。 <div class="t1"> <div class="t2"> <a href="#">aaa</a> </div> </div> .t2 a{color:orange;} .t1 a{color:green;} 上記の様に、<a>タグでリンクをつけた場合は、「aaa」は緑色になります。 リンクの無い文字列の場合は、内側のclassが優先される。 リンクが有る文字列の場合は、ＣＳＳで下に記述した方が優先される。 この様な解釈で良いですか？ http://creativememomemo.com/css_a_link_color/ 上記のサイトの内容は大体理解しています。 しかし、上記のサイトの結論では、内側のclassが優先になる様に思います。 私のどこに勘違いがあるのでしょうか？
- 締切済み
- CSS
- スタイルシートの指定に関して
<body>タグにクラスを与えて、以下のようにしました。 <body class="home blog"> 一般的に、このような記述の場合、<body>に class="home"と、class="blog"の属性が与えられます。ここまでは理解出来ています。 2つのファイル home.html と index.html ファイルを作成しました。 html の記述は全て同じとします。参照する CSS ファイルを同一とします。 上記の条件で、home.html と index.html でデザインを変えたいと思います。希望として home.html には、class="home" のみを反映し、 index.html には、class="blog" のみを反映させたい。 以下にサンプルを表記します。 html ファイル home.html / index.html <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>テストページ</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body class="home blog"> <div id="container"> <p>テストページ</p> </div> </body> </html> css ファイルは home.html / index.html で共通 @charset "UTF-8"; body { margin: 0; padding: 0; text-align: center; background-color: #FFF; } .home #container { width: 800px; height: 200px; text-align: center; margin: 0 auto; padding: 0; background-color: #FFE; } .blog #container { width: 800px; height: 200px; text-align: center; margin: 0 auto; padding: 0; background-color: #FEE; } 上記の記述だと home.html も CSS の記述順通り、バックグランドカラーが、#FEE になります。 <body class="home blog"> の記述は、WordPress が生成している記述です。デザインを別けることが出来るのかなと思っています。 自分のスキルでは無理だと思うのですが・・・。 CSS の記述でデザインを別けることが出来るのでしょうか。
- ベストアンサー
- CSS
- スタイルシート…
たぶん、初歩的な問題なんですが…自力では調べてもわからなかったので… スタイルシートで、画像を固定し、尚且つ、 リンクの貼ってある文字の上にカーソルがくると文字色が変わるようにしたいのですが、 どのようにすればよいのでしょうか？ 一応、 <style type="text/css"> <!-- body { background-image : url("画像のURL"); background-attachment: fixed; background-position: 100% 0%; background-repeat: no-repeat ; } a{text-decoration:none;} a:link {color:#色;} a:active {color:#色;} a:visited {color:#色;} a:hover {color:#色;} --> </style> じゃないかな…？と思って、試してみたのですが、画像は固定できてるんですが、 リンクの文字色は変わりませんでした…。 アドバイスお願いします！
- ベストアンサー
- HTML
- リンク色の取得方法
ページ全体のリンク色を取得するためには、documentオブジェクトの、linkColor,linkColor,vlinkColorプロパティを参照すれば良いですが、cssを使って部分的にリンク色が設定されている場合の取得方法がわかりません。 このように部分的に適用されているオブジェクトのリンク色（a:link、a:visited、a:hover、a:active）を取得する方法を教えていただきたいと思います。
- ベストアンサー
- JavaScript
補足
#α id=α これは具体的に何をしているのか簡単でいいので説明していただけますか？