質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.37%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Q&A

2回答

1777閲覧

a:linkが効かない

cop

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

0グッド

0クリップ

投稿2021/06/17 03:44

こんにちは。おたずねします。
a:linkが効かない場合の対処法を教えてください。
初歩的な質問ですみません。
よろしくお願いします。

<!-- html --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3-ホーム</title> <link rel="stylesheet" type="text/css" href="2-TechAcademy.css"> </head> <body> <div class="main"> <h1>サンプル</h1> <a href="#a">サンプル</a> <a href="#b">サンプル</a> <a href="#c">サンプル</a>
<a href="#d">サンプル</a> </div>
</body>

/CSS/
a:link{
color: chartreuse;
}
a:visited {
color: blue;
}
a:hover {
text-decoration: none;
background-color: coral;
}

-Mac バージョン11.0.1を使用

コード

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

K_3578

2021/06/21 01:22

とりあえず、ソースコードはMarkDownのcode機能で提示しましょう。 HTMLファイルとCSSファイル毎に、 ```言語名 ソースコード ``` という形になるようにしてみてください。ブロック間は1行以上スペースを空けましょう。 くっついていると一つのブロックとして扱われます。 ちゃんと出来ていると、自分の回答の様になっていると思います。 編集画面の右側にプレビューが表示されているので、見ながら調整してみてください。
guest

回答2

0

そもそも

html

1<!DOCTYPE html> 2<html> 3 4<head> 5<meta charset="UTF-8"> 6<title>3-ホーム</title> 7<link rel="stylesheet" type="text/css" href="2-TechAcademy.css"> 8</head> 9 10<body> 11<div class="main"> 12<h1>サンプル</h1> 13<a href="#a">サンプル</a> 14<a href="#b">サンプル</a> 15<a href="#c">サンプル</a> 16 17<a href="#d">サンプル</a> 18</div> 19 20</body> 21</html>←これがないとそもそもhtml閉じれてませんが

んで、本題ですが
まずそもそもcss自体が指定出来ていない可能性(パスが間違っている)が高いと
思います。階層を確認してみてください。

投稿2021/06/17 03:52

K_3578

総合スコア1282

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cop

2021/06/21 00:52 編集

ありがとうございます。 </html>をつけ忘れていました。 今の状態ですが、 a:link   反応せず… a:visited 反応◯ a:hover  反応◯ a:linkのみ反応しません。。。 パスはあっていました。
K_3578

2021/06/21 02:23 編集

反応せず、というのは color: chartreuse;が適用されていないと言うことですよね? 自分の環境では、cssが効いているのを確認していますので、 他の場所で上書きされているのかもしれません。 Chromeなどでhtmlファイルを開けばデベロッパーツールで適用されているcssが確認出来るので それを使って見ては。
guest

0

そのCSSが2-TechAcademy.cssというファイル名でHTMLと同じ階層にちゃんとあるかを確認してみてください。階層が違うとか、ファイル名のタイプミスとか、そういう事ではないかと思います。

投稿2021/06/17 03:51

itagagaki

総合スコア8402

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cop

2021/06/21 00:50

ありがとうございます。 同じ階層でした。 なぜか a:link 反応せず。 a:visited  反応◯ a:hover 反応◯ の状態です。。
itagagaki

2021/06/21 02:01

質問に貼ったコードは抜粋ではなくてすべてですか? 何か別のCSSが優先順位の高い状態で効いている可能性が考えられます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問