テキストのアンカーリンクに訪問済みリンクカラーが効かない
- アンカーリンクのテキスト部分のみ「訪問済みリンクカラー」にする方法を教えてください。
- 現在、アンカーリンクのテキストに適用した「訪問済みリンクカラー」が効かない問題が発生しています。
- リンク後に親ページの訪問済みリンクカラーが適用されてしまう現象を防ぐにはどうすれば良いですか。
- ベストアンサー
テキストのアンカーリンクに、訪問済みリンクカラーが効かない
ｃｓｓで「リンクカラー」「訪問済みリンクカラー」を指定したのですが、アンカーリンクのみ「訪問済みリンクカラー」が適用されません。 リンク後は親ページが訪問済みの色に変わってしまいます。 アンカーリンクのテキスト部分のみ「訪問済みリンクカラー」にするには、どうしたらよいでしょうか。 ｃｓｓは外部をリンクしております。 ＨＰ制作は ・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; }
- cococo555
- お礼率84% (11/13)
- ネットトラブル
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
a.sample:visited 以下同様に
関連するQ&A
- 外部CSSでリンクカラー指定
外部CSSでwebサイトを作っています。 リンクカラーの指定をbody全体にしているのですが、 フッターだけ色を変えることはできますか？ その際フォントカラーも変えられればと思っています。 現在のCSSは a{/*リンクされた文字*/ color:#002AD1; font-style:normal; text-decoration:underline; } a:link {/*未訪問のリンク*/ color:0000ff; font-style:normal; text-decoration:underline; } a:visited {/*訪問後のリンク*/ color:#002AD1; text-decoration:underline; } a:hover {/*マウスをのせたとき*/ color:#335BFF; font-style:normal; text-decoration:underline; } a:active {/*クリック中*/ text-decoration:none; } 現在サイト全体のフォントカラーはグレーで、 リンクは上記の通り青系です。 footerは白から濃い紺の帯にするので、 文言やリンクが見えなくなってしまうのです。 フッターのCSSに個別にカラー指定しても変わりません。 .footer { border : none; width : 838px; heigth : 100%; text-align: left; padding : 0px 0px 0px 20px; color: #ffffff; ←このようにフォントを白にしても変化がないです line-height: 160%; font-size: 11px; } 何が原因でしょうか？ またそのようにする方法があれば教えてください。 よろしくお願いいたします。
- ベストアンサー
- 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 } -->
- ベストアンサー
- その他（プログラミング・開発）
- 「アンカーテキスト」について
HTMLチェックサイトを使用してHTMLチェックをしたところ、アンカーテキストを作成して内部リンクを張る箇所で下記のようなエラーが大量に出てきました。 <div>～</div>内に<a>を入れたところ、画面が崩れてきれいに表示されません。 ＜該当サイトの左側のメニューです。＞ ホームページを作成すること事態初めてで、SEO対策も全然分かってなく基本的な質問で申し分けありませんがご教授お願い致します。 ●HTMLチェックサイト（Another HTML-lint gateway） http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html ●エラー内容 -------------------------------------------------- <div>を145行目の<a>～</a> 内に書くことはできません。<div>～</div>内に<a>を書くことはできます。 -------------------------------------------------- ●html（変更前） -------------------------------------------------- <li><div align="left"><a href="syurui.html#okyaku1" target="_self"><div style="margin-left:10em;">Ｏ脚</div></a></div></li> -------------------------------------------------- ●css -------------------------------------------------- #sub { float: left; width: 226px; display: inline; margin-left: 37px; } #sub p { padding-top: 0.5em; padding-bottom: 0.5em; } #sub .submenu { text-align: center; padding-bottom: 10px; border-bottom: 5px solid #FF7F00; margin-bottom: 20px; border-right: 1px solid #FF7F00; border-left: 1px solid #FF7F00; } #sub .submenu a { color: #FF7F00; text-decoration: none; border-bottom: 1px dotted #FF7F00; display: block; width: 224px; } #sub .submenu a:hover { background: #f5f5f5; } --------------------------------------------------
- ベストアンサー
- CSS
- divでくくった中の要素にa link
以下のdivでくくった中の要素にa link等の カラーの指定をしたいのですが、どのように記述したらよいでしょうか。 div.main { width: 560px; padding-top: 15px; padding-left: 20px; line-height: 130%; } --------------- div指定していないところでは a:link, a:visited { color: #000000; font-size: 12px; line-height: 120%; text-decoration: none; } a:hover { color: #0066CC; text-decoration: underline; } a.navia:link, a:visited { font-size: 8pt; color: #666666; text-decoration:none;} a.navia:hover { color: #FF6633 ; text-decoration:underline } の2つを記述しています。
- ベストアンサー
- HTML
- 訪問済リンクを未訪問の状態に再び戻す方法
質問お願いします。 フレームで上部に組んだメニューボタンの訪問済リンクが、 ページを移動するごとに訪問済みが増えて、 どのページを現在、訪問しているのかわからなくなります。 訪問済リンクを未訪問の状態に再び戻す方法を教えてください。 CSS部分 body { background-color: #FFFFFF; margin:0; padding:0; } #menu{ position:absolute; top:0px; width:800px; height:219px; left:-1px; margin:0; padding:0; background-image:url(../topimage/title.gif); background-repeat:no-repeat; } #menu #bottom{ position:absolute; float:left; top:149px; width:800px; height:70px; left:0px; } #bottom ul{ list-style:none; padding:0; margin:0; } #bottom ul li{ padding:0; margin:0; float:left; } #bottom a.c,#bottom a.c:link { display:block; width: 115px; height:70px; background-image:url(../top/img/menu/b1.gif); background-repeat:no-repeat; background-position:0% 0%; } #bottom a.c:visited { background-position:100% 0%; } #bottom a.c:hover { background-position:33% 0%; } #bottom a.c:active { background-position:66% 0%; } 以下ボタン７つのソースがほぼ同じ為、省略します。 HTML部分 <div id="menu"> <div id="bottom"> <ul> <li><a href="../new/top.html" target="main" class="c"></a></li> <li><a href="../product/top.html" target="main" class="d"></a></li> <li><a href="../example/top.html" target="main" class="e"></a></li> <li><a href="../company/top.html" target="main" class="f"></a></li> <li><a href="../rinen/top.html" target="main" class="j"></a></li> <li><a href="../faq/top.html" target="main" class="g"></a></li> <li><a href="../info/top.html" target="main" class="h"></a></li> <li><a href="../recruit/top.html" target="main" class="i"></a></li> </ul> </div> </div>
- 締切済み
- HTML
- リンクの色について
スタイルシート部分を .navi1 a:link, .navi1 a:visited{ display:block; background-image:url(images/1.gif); text-decoration:none; line-height:30px; font-size:12px; text-align:left; height: 30px; padding-left:11px; font-weight: bold; color: #00FF00; } .navi1 a:hover, {text-decoration:none; color:#FFFF00;} .top a:link, .rank a:visited{ color:#379E02; } .top a:hover{ color: #FF0066;} HTML部分を <div class="navi1"><a href="#">テキスト１</a></div> <div class="top"><a href="#">テキスト２</a></div> とした時に、IEでは思ったように表示されるのですが FirefoxやChromeではテキスト１は#00FF00のままマウスを乗せても色が変わらず テキスト２は色が紫になっています。 これをIEと同じ様に表示させるにはどうすればいいのでしょうか？
- ベストアンサー
- HTML
- クリックしてからページが切り替わるまでにアンカーリンク周囲に現れる点線について
FireFoxでブラウザしながらサイトを制作しています。 クリックしてからページが切り替わるまでにアンカーリンク周囲に現れる点線が、ボタンからはみ出て関係ないところまで広がってしまいます。 リストを横並びにしたナビゲーションリンクです。 リスト要素に記述したテキストをindentで画面外に飛ばし背景画像でボタン内容を表示しているのですが、そのせいか、画面外まで点線が及ぼうとしているかのようです。 そもそも、この点線が出ないように制御する事ができるのか、 或は、cssでの記述で何か思い当たるフシがありましたら 教えて頂けないでしょうか？ リスト内のテキスト項目のアンカーにそれぞれ次の様な cssを用意して制作しています。 a.othersche{ display:block; width:184px; height:52px; text-indent:-9999px; background:url(imageothersche.jpg) no-repeat; margin:0px 0px 10px 10px; float:left; } よろしくお願いします。
- ベストアンサー
- HTML
- 文章によって違うリンクカラーの指定をするには
同じページ内で文章によって違うリンクカラーの指定はできるのでしょうか？ 現在外部の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
- CSSのdivのposition:relative;で位置がずれない
IE6を使用しています。 次のような 「sample.css」 .sample {height:90px; background-color:#00ff00; font-weight:bold; position:relative; top 40px; } .sample2 {color:#ff0000; position:absolute; top:10px; left:10px } .sample3 {color:#ff0000; position:absolute; top:30px; left:30px } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="sample"> position:relative <div class="sample2"> sample2 </div> <div class="sample3"> sample3 </div> </div> </body> </html> を実行した場合に、ブラウザのトップから40pxだけ下にclass="sample"にある内容を 表示させたいのですが、どうも下にずれてないようなのです・・・ 何が原因なのでしょうか？
- ベストアンサー
- HTML
- テキストの揃え方について
CSSの勉強を始めて間もないのですが、下記のようにホームページを作成し、左右に均等の間隔を指定して、テキストも中央揃えになっています。<div id="01">を5段、<div id="02">で1段、この後<div id="03">と<div id="04">で合わせて2段にしたいと考えています。そのうえで、<div id="03">以降は左右に均等の間隔になっている幅の中(<div id="01">や<div id="02">が配置されている400pxの位置)で、テキストを左揃えにして配置したいと考えています。text-align: left;をCSSのいろいろなところに書いているのですが、ウィンドウの左端に配置されてしまいます。どのようにCSSに書いたら実現できるのでしょうか。CSSレベル2までの書き方でお教えください。 【HTMLの<body>内】 <div id="01_05"> <div id="01"> <ul> <li><a href="link01.html">リンク01</a></li> <li><a href="link02.html">リンク02</a></li> <li><a href="link03.html">リンク03</a></li> <li><a href="link04.html">リンク04</a></li> <li><a href="link05.html">リンク05</a></li> </ul> </div> <div id="02"> <img src="gazou01.jpg" alt="画像01" width="400" height="300" border="0"> </div> <div id="03"> </div> <div id="04"> </div> </div> 【CSS】 body { margin: 0; padding: 0; width: 100%; text-align: center; overflow: hidden; } #01_05 { margin: 0 auto; padding: 0; width: 400px; } #01 { position: relative; margin: 0; width: 100%; } ul { position: relative; left: 50%; float: left; margin: 0; padding: 0; } li { position: relative; left: -50%; float: left; display: inline; margin: 0; padding: 0; } li a { float: left; width: 80px; display: block; margin: 15px 0; padding: 15px 0; } #02 { clear: left; width: 100%; } #03 { float: left; margin: 0; width: 200px; } #04 { float: left; margin: 0; width: 200px; }
- ベストアンサー
- CSS
お礼
回答ありがとうございました。 なぜか、うまくいかないままです。