- ベストアンサー
リンクのカラー
教えてください。 リンク部の文字の色を変えようとすると、擬似クラスをつかって、次のようなコードで実現できるところまでは、わかります。 -----html----- <p class="sample"><a href="a.html">リンク</a></p> -----css----- .sample a:link { color: #FF0000; } ここで、<p>タグを使うと改行されてしまうため、<span>等の改行が入らないタグでリンク文字の色指定をしたいのですが、上手くいきません。 <span>じゃなくても良いのですが、改行が入らない、リンク文字の色指定の方法があれば、教えてください。
- xyz_1990
- お礼率66% (127/191)
- HTML
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
3さんのおっしゃる通りですが、部分的にリンクの色を変えたい場合は以下のようにすると可能です。 -----html----- <a href="a.html" class="sample">リンク</a> -----css----- a.sample:link { color: #FF0000; }
その他の回答 (3)
- ICHI-yan
- ベストアンサー率33% (45/134)
<a href="a.html">リンク</a> -----css----- a:link { color: #FF0000; } これでOKです。 無理に<p>や class 入れなくても良いです。ブロックを論理的に分けていたら、<p>のリンクは赤、<table>内は青、等といっぱい指定できます。さらに<p>のなかでも、class=sapmleだけは、黄色でと細かくいろいろ区別できます。 本来<p>は段落を書く時に使用するものです。cssを導入するなら、論理的にすることを学ばれないとかなりややこしいことになっちゃいますよ。
<span class="sample"><a href="a.html">リンク</a></span> -----css----- .sample a:link { color: #FF0000; } これではダメなんですか？
- 345itati
- ベストアンサー率48% (795/1639)
直接アンカータグにスタイルを適用させて、 CSS部分 a#T1:link { color: #0000ff; } a#T2:link { color: #ff0000; } HTML部分 <a id="T1" href="a.html">リンク１</a>こっちは<a id="T2" href="b.html">リンク２</a> という事では駄目ですか？
関連するQ&A
- HTMLでテーブル内のリンクに色付けしたい。
＝＝ＨＴＭＬ <table class="class1"> <tr> <td class="class2"> <p> ああああああああああ <span class="class3"> <a href="xxx.html">別サイトへ</a> </span></br> </p> <p>あああああああああ</p> </td> </tr> </table> ＝＝ＣＳＳ td.class2 .class3 { /*ダウンロードの文字*/ text-align:right; /*行揃えの位置や、均等割付を指定*/ float:right; /*要素の左または右寄せを指定*/ color:#FF0009 /*文字の色を指定*/ } 部分抜粋でこんな感じのプログラムを書きました。 ＣＳＳの text-align と float:right はＨＴＭＬの『別サイトへ』の文字にかかってしっかり右端に寄ってくれます。 しかし文字の色が変化してくれません。 問題はリンクなので <a........>別サイトへ</a> となっていて<a>の指定をＣＳＳ側でもやってあげないといけないのはわかっているのですがどう書けばいいのか分りません。 ・td.class2 a.class3 { ・td.class2.class3 a.class3 { ・.class2.class3 a.class3 { などで初めて td.class2 .class3 { /*ダウンロードの文字*/ text-align:right; /*行揃えの位置や、均等割付を指定*/ float:right; /*要素の左または右寄せを指定*/ } td.class2.class3 a.class3 { color:#FF0009 /*文字の色を指定*/ } などと書いたりしたのですが文字の色に変化がありません。 この場合どう書けば文字の色に変化をつけれるんでしょうか？
- 締切済み
- HTML
- リンクの文字とリンクの文字を横に並ばす時に適度にスペースを入れたいので
リンクの文字とリンクの文字を横に並ばす時に適度にスペースを入れたいのですがどうすればよいでしょうか？特に「はいそうです。」と「いいえ、違います」のリンク文字の間にスペースをキーボードから打ち込もうとすると、リンクの下線が伸びてしまうのですが・・・。文字の下のリンクの下線は残したまま、スペースの時に下線が伸びないようにするにはどうすればよいでしょうか？ <style type="text/css"> <!-- .style1 { font-size: x-large; font-weight: bold; } --> </style> </head> <body> <p class="style1"><img src="../image/web_013.gif" alt="引越元も引越先も1階かつ目の前でこちらが用意した台車は使用可能ですか？" width="400" height="77" /></p> <div align="justify"> <a href="link3.html"><span class="style1">１．はいそうです。 </span></a> <a href="link0.html"><span class="style1"> ２．いいえ、違います。</span></a><br /> </div> <p><span class="style1"> <img src="../image/web_024.gif" alt="引越元と引越先" width="300" height="357" /></span> <a href="link1.html"></a></p> <a href="link1.html"> <p align="left" class="style1"><input type="button" value="前へ戻る" onclick="window.history.back()" /> </p> </a> <a href="../index.html"> <p align="center">トップページへ戻る</p> </a> <p class="style1"> </p> </body> </html>
- ベストアンサー
- HTML
- 訪問済みリンク色を設定したいが難易度高いです
以下のHTMLのハイパーリンクになってる文字列に対し、「訪問済みリンク色（a:visited）」だけ新たに設定したいです。 現在はすべて文字色は赤で、訪問済みリンクであっても色は赤のままです。それを訪問済みリンクなら青になるようにしたいです。 ブラウザの設定で変更する方法ではなく、CSSで変更したいです。 <body>タグの中は「一切いじれない状態」なので、<body>の外部に新たにcssを書き、そこから色を変更したいですが、ハイパーリンクの文字列は、タグの挟まれ方の種類が以下のとおり(5)種類あります・・・ <a>タグは、<a href="http://*" class="title">と<a href="http://*"> の(2)種類、 他にも<span>や<strong>の位置が違ってたりしますが、<body>の中はいじらずに訪問済みリンク色だけ変更することは可能でしょうか？ <body> <div class="blogbody"> <div class="text"> ■文字列(1) <li><span style="color: red"><a href="http://*"><strong><span style="color: red">文字列(1)</span></strong></a><strong>★</strong></span><span style="color: black">DATE</span></li> ■文字列(2) <li><a href="http://*" class="title"><strong><span style="color: red">文字列(2)</span></strong></a>DATE</li> ■文字列(3) <li><a href="http://*" class="title"><span style="color: red"><strong>文字列(3)</strong></span></a><span style="color: red"><strong>★</strong></span><span style="color: black">DATE</span></li> ■文字列(4) <li><a href="http://*"><span style="color: red"><strong>文字列(4)</strong></span></a><span style="color: red"><strong>★</strong></span><span style="color: black">DATE</span></li> ■文字列(5) <li><a href="http://*"><strong><span style="color: red">文字列(5)</span></strong></a>DATE</li> </div> </div> </body>
- ベストアンサー
- HTML
- リンク色を動的に変更したい。innerHTMLでcssを書き換えましたがうまくいきません。
innerHTMLでcssのコードを直接書き換えたいのですがうまくいきません。 Firefoxでは反映されるのですが、IEでは書き換えられません。 欲しい結果としては疑似クラスを変更してリンク色を変えたいです。 DOMで疑似クラスを変更できればいいのですが、やりかたがわかりません。 リンク色を変更できる方法だれか教えてください。 宜しくお願いします。 <html> <head> <title>Css</title> <script language="javascript"> <!-- function CssRewrite() { $cssString1 = '<style type="text/css">'; $cssString1 += '<!--'; $cssString1 += '.test a:link {color: '; $cssString1 += '#AAAAAA;}'; $cssString1 += '.test a:visited {color: '; $cssString1 += '#AAAAAA;}'; $cssString1 += '// -->'; $cssString1 += '</style>'; alert($cssString1); document.getElementById("css0").innerHTML = $cssString1; } window.onload = CssRewrite; // --> </script> </head> <body> <span id="css0"></span> <span class="test"><a href="#">css</a></span> </body> </html>
- ベストアンサー
- JavaScript
- 文章によって違うリンクカラーの指定をするには
同じページ内で文章によって違うリンクカラーの指定はできるのでしょうか？ 現在外部のCSSファイル内において下記の指定をしています。 a:link { color: #000000; text-decoration: none} a:active { color: #FF0000; text-decoration: none} a:visited { color: #000000; text-decoration: none} a:hover { color: #FF0000; text-decoration: none} これを文章によっては、a:linkとa:visited の色を別の色にしたいのですが、どのような方法がありますか？IDやclass指定を使えば可能なのでしょうか？アドバイスおねがいいたします。
- ベストアンサー
- HTML
- テキストのアンカーリンクに、訪問済みリンクカラーが効かない
ｃｓｓで「リンクカラー」「訪問済みリンクカラー」を指定したのですが、アンカーリンクのみ「訪問済みリンクカラー」が適用されません。 リンク後は親ページが訪問済みの色に変わってしまいます。 アンカーリンクのテキスト部分のみ「訪問済みリンクカラー」にするには、どうしたらよいでしょうか。 ｃｓｓは外部をリンクしております。 ＨＰ制作は ・windows XP ・dreamweaver8 現在、このように記述しております。 .sample { font-size: 12px; line-height: 22px; padding-left: 10px; color: #333333; } .sample a:link { color: #0000ff; } .sample a:visited { color: #810081; }
- ベストアンサー
- ネットトラブル
- リンクカラーが変わりません。
外部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でリンク文字のカラーを指定していますが、一部分のみリンク文字の色を変えたいと思っています。 そこで、 .whitelink a:link{color: #FFFFFF;} を外部CSSに記入し、 <TD class="whitelink">と埋め込みましたが、リンク文字の一部分のみが変更され、元の設定と混ざった状態になりました。 何が原因でそうなるのかが不明です。 またほかに、設定方法がありますでしょうか？ 教えていただければ助かります。
- ベストアンサー
- CSS
- リンクをかけた文字がマウスをあてると動いてしまう
文字にリンクをかけると、その文字にマウスをあてたら、その文字や隣の文字が改行されたように動いてしまいます。今まで経験のない現象なので、何が原因か分からなくって。アドバイスよろしくお願いします。 ページのスタイルシートへのリンクは、 <link rel="stylesheet" type="text/css" href="CSS/css1.css"> CSSというフォルダにcss1.cssを入れて読み出しています。 外部css1.cssのリンク設定は下記のような記述をしているのですが…。 a:link {color :#0000cc; text-decoration : none; } a:active {color :#000099; } a:hover { color: #ff0000; background-repeat : no-repeat; display: block; }
- ベストアンサー
- ホームページ作成ソフト
- 一部文字の上下padding設定について
以下ソースを作成しました。 最後にPタグ、Aタグの中身に 文字を記述しています。 ・文章 <p class="pst">ここに<span class="try">テスト</span>文章段落1</p> <a class="ast" href="#">ここに<span class="try">テスト</span>リンク1</a> 両方の文章に存在するspanで囲まれている[テスト]という文字の上下paddingを設定して、 テストだけ文字位置の高さを変えたいのです20pxほど「テスト」という文字を、上または下に動かしたい。(=ずらしたい) 以下ソースを記述しましたが、 左右のpaddingは有効になったのですが、 上下paddinが有効になりません。 どのようにしたら良いのでしょうか ご教授よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> .pst{ background-image: url("back.jpg"); padding:10px; } .ast{ display:block; padding:10px; background-image: url("back.jpg"); } .try{ padding:10px; } </style> </head> <body> <p class="pst">ここに<span class="try">テスト</span>文章段落1</p> <a class="ast" href="#">ここに<span class="try">テスト</span>リンク1</a> </body> </html>
- ベストアンサー
- CSS
お礼
皆様ありがとうございます。 説明不足で、申し訳なかったのですが、リンクの種類によって何種類かの色を設定したかったので、 ANo2、ANo4の方法が、ベストマッチでした。