
リンクの色を個別に変える方法はありますか?
私が作成したWebサイトでは。現在、リンクの色は青で統一しておりますが、数か所のリンクだけグレーにしたいと思っております。
現状のスタイルシートは次のようになっております。
a:link {
text-decoration: none;
color: #2b50bc;
}
a:hover{
text-decoration: none;
text-decoration:underline;
}
a:visited {
text-decoration: none;
color: #2b50bc;
}
上記のように記述し、全てのリンクは青に統一されております。
そこで、HTMLファイルのリンクをグレーにしたい単語にアンカーとクラスまたはIDを付けて、スタイルシートでそのクラスまたはIDのcolorをグレーにしてみましたが、リンクの色は青のままでした。
どのようにすれば、個別にリンクの色を変えることができるのでしょうか?
No.5
- 回答日時:
Idまたは、class専用の、a: link;a:hoverを書けばOK
仮に、<ul><li>menu1</li><li>menu2</li></ul>となっていた場合、
htmlファイルは、<ul id="test"><li.menu1</li><li>menu2</li></ul>
cssは、ul #test{color:#000080;background-color:#cccccc;}
ul#test li a:hover{text-decretion:underline;}
と記述します。
具体的に知りたいのであれば、そのcssの部分を、アップしてください!
下記参考サイト等で学んでください!
参考URL:http://dotinstall.com/lessons/basic_css
No.4
- 回答日時:
>スタイルシートでbody aでリンクを付けておりました。
この意味が分かりません。
body a{}と指定したということですか?
この場合、タイプセレクタ2個で詳細度は 0002 になりますよ。
>そこで、さっきh1の文章中の単語にクラス名を付けてリンクを付けました。
単語でしたら<span></span>で囲むことになります。
>h1の文章と、その文章中の単語へのリンクは同じ色にしたかっただけなのですが、
^^^^^^(文?)と^^^h1のこと? 単語へのリンクでしたら<span id="HTML">HTML</span>ですよ。
(注!)--本来は、この場合<abbr title="Hyper Text Markup Language" id="HTML">HTML</span>かな
あるいは単にターゲットなら<a name="HTML">HTML</a>でしょう。
⇒12.2 A要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
>改行されてしまいました。
ひょっとしてブロックの<div></div>で囲んだ???
⇒7.5.3 ブロックレベル要素と行内要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
⇒7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
>現在、通常の文章の色は黒で、他のページに移動してもらうためのリンクは青になってます。
通常のブラウザは、設定しない場合そうなるはずです。
しかし、それは
A要素に関しては
a:link{color:blue;} 詳細度0011
だけのはずです。
a{color:}の指定はなく、body{color;}詳細度(0 0 0 1)を継承しているはずです。
ところが、スタイルシートで
a[color:blue;}詳細度 0 0 0 1
body a{color:blue;}詳細度 0 0 0 2
のように指定するとブラウザのデフォルトのスタイルシートより優先順位が高いため、これが適用されてしまいます。
a:link{color:blue;} 詳細度 0 0 1 1
や
a[href]{color:blue} 詳細度 0 0 1 1
だと、リンクのない、あるいはhref属性を持たないA要素の色は変わりません。
>私は文章中に黒色でリンクを付ければ、ユーザーを混乱させずに、
ターゲットになるA要素、hrefを持たないA要素の色を変えたくないのでしたら、
a:link{color:blue;} 詳細度 0 0 1 1
か
a[href]{color:blue} 詳細度 0 0 1 1
ですよ。
>検索順位に優位になるかと思ってやってみたのですが、
検索順位には関係ないでしょう。もし、私の想像通りリンクターゲットのA要素--<a name="***"></a>でしたら、a要素の色指定を何れかにすれば良いです。
>デザインを変更せずに行うことができませんでした。
デザインのためにHTMLを書いてはなりません。デザインのためにHTMLを書くのは検索エンジンには不利でしょう。
あくまで、それぞれのタグの意味を理解して適所に使用しましょう。
折角、文書構造はHTMLでプレゼンテーションはCSSで行うのでしたら
これはSEOとして極めて重要です。
・HTMLの仕様書を通しで読んでおきましょう。
・CSSの命ともいえるカスケーディングは身につけましょう。CSSはカスケーディングスタイルシートの略です。
⇒5. セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
⇒6. 値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
ありがとうございます。
まだまだ理解しきれていないことがたくさんあって、うまく質問ができておりませんでしたが、詳しく回答をして頂きありがとうございます。
こんど仕様書にも目を通しておきます。
No.2
- 回答日時:
スタイルシートは、そのHTML文書の要素に対して、その文書構造で指定するものです。
きちんと文書構造が分かれば、それに従います。文書構造が分かりにくいときは⇒DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
class名などで、スタイルを指定する要素を特定します。
・タイプセレクタ 擬似要素セレクタ
・属性セレクタ 擬似クラスセレクタ(リンク/動的)
・一意セレクタ
・HTMLのstyle属性
などです。詳細度(特異性)は上から d=1,c=1,b=1,a=1
したがって、デザインのためにclass名などをデザインのためにつけなくても良いですし、逆に文書構造が分からないとどうすればよいかがアドバイスできないのです。
[例]
・文書のheader(div.header)内の、href属性をもつA要素の:hover時の色
・本文(section)div.section直下の、<p></p>中のa要素のうち未訪問のA要素の色
・本文中の補足記事内の記事中の(リンクをもつ)A要素の色
・foote中のナビゲーションリストのリンクの2番目以降のAの色
それぞれ、文書構造そのままに
div.header a[href]:hover{} /* 詳細度0032 */
div.section>p a:link{}
div.section div.aside a{}
div.footer div.nav a{}
となりますね。・・・HTMLみなくても、修正できますし、HTMLもシンプルで分かりやすいし、検索エンジンもこれらのclass名は理解してくれます。HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )と同じ名前ですからね。
もうすこし詳しく、HTMLの前後関係を含めて教えてください。
ありがとうございます。
スタイルシートでbody aでリンクを付けておりました。
そこで、さっきh1の文章中の単語にクラス名を付けてリンクを付けました。h1の文章と、その文章中の単語へのリンクは同じ色にしたかっただけなのですが、改行されてしまいました。
現在、通常の文章の色は黒で、他のページに移動してもらうためのリンクは青になってます。
私は文章中に黒色でリンクを付ければ、ユーザーを混乱させずに、検索順位に優位になるかと思ってやってみたのですが、デザインを変更せずに行うことができませんでした。
私がやろうとしていることはスパム扱いになる可能性はありますか?
背景と同じ色の文字でリンクを付けるという、隠しリンクではないので、大丈夫だと思っているのですが、どうなのでしょうか?
No.1
- 回答日時:
スタイルシートの記述には優先順位があります。
まずは、その優先順位が守られているかどうか。次に、aタグへのスタイルは少し特殊で、きまった順序で書く必要があります。優先順位については、いろいろあるので、簡単なところだけ上げますと、
・タグを直接指定 < クラスで指定 < IDで指定 の順で優先順位が高くなります。
・要素をネストすればするほど優先順位が高くなります。(少し語弊がありますが aよりもbody aの方が優先順位が高いということです)
・同じ指定方法の場合は、先に書かれたものが、後に書かれたものに上書きされます。
aタグへのスタイル指定は、次の順序です。また、基本的にはすべての指定が必要です。
a{
}
a:link{
}
a:visited{
}
a:hover{
}
a:active{
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」 5 2023/06/27 12:08
- HTML・CSS ただいま勉強始めたての初心者です。フォームを縦並べにしたいです。 2 2022/11/20 17:18
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
レスポンシブで困っています・・
-
HTML/CSSを使って写真のような...
-
テーブルの行を折りたたみたい...
-
HTMLタグのあるCSVファイルを利...
-
HTMLでクロス抽出したい
-
ホームページの制作について教...
-
テーブルのセルデータを自動改...
-
HTML&CSS メディアクエリにつ...
-
、URL化させるにはどうしたらい...
-
アコーディオンメニューが思う...
-
テーブルタグのセルの幅の一部...
-
GoogleSearchControlにホームペ...
-
HTML&CSS メディアクエリについ...
-
HTML&CSS メディアクエリ
-
HTML&CSSについて。
-
HTML &CSSとHTML5&CSS3 違い
-
HTML&CSSとHTML5&CSS3の違い...
-
HTML&CSSとHTML5&CSS3の違い...
-
列のどこをクリックしてもソー...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
レスポンシブで困っています・・
-
HTMLでクロス抽出したい
-
iPhoneで HTMLファイルを閲覧
-
HTML/CSSを使って写真のような...
-
ホームページの制作について教...
-
スマホでHTMLファイルを開いて...
-
GoogleSearchControlにホームペ...
-
メモ帳の段落の揃え方
-
css初心者 フレックスボックス...
-
スマホ(android)のタッチパネ...
-
WEBページを強制的に横画面で見...
-
角丸画像の背景色を透明にした...
-
、URL化させるにはどうしたらい...
-
HTMLタグのあるCSVファイルを利...
-
静止画画像をクリックすると音...
-
テーブルのセルデータを自動改...
-
テーブルタグのセルの幅の一部...
-
スマホで、左右にスワイプして...
おすすめ情報