cssでリンクカラーを変更する方法
CSSでリンクのカラー設定
リンクのカラー設定について記載いたします。
基本的な設定
a{/*リンクされた文字*/
color:#000;
text-decoration:none;
}
a:link {/*未訪問のリンク*/
color:#000;
text-decoration:none;
}
a:visited {/*訪問後のリンク*/
color:#000;
text-decoration:none;
}
a:hover {/*マウスをのせたとき*/
color:#ff0000;
text-decoration:underline;
}
a:active {/*クリック中*/
color:#000;
text-decoration:none;
}
クラスで設定する際の指定
a.クラス名 {/*リンクされた文字*/
color:#000;
text-decoration:none;
}
a:link.クラス名 {/*未訪問のリンク*/
color:#000;
text-decoration:none;
}
a:visited.クラス名 {/*訪問後のリンク*/
color:#000;
text-decoration:none;
}
a:hover.クラス名 {/*マウスをのせたとき*/
color:#ff0000;
text-decoration:underline;
}
a:active.クラス名 {/*クリック中*/
color:#000;
text-decoration:none;
}
ul.クラス名 li a {/*リンクされた文字*/
color:#000;
text-decoration:none;
}
ul.クラス名 li a:link {/*未訪問のリンク*/
color:#000;
text-decoration:none;
}
ul.クラス名 li a:visited {/*訪問後のリンク*/
color:#000;
text-decoration:none;
}
ul.クラス名 li a:hover {/*マウスをのせたとき*/
color:#ff0000;
text-decoration:underline;
}
ul.クラス名 li a:active {/*クリック中*/
color:#000;
text-decoration:none;
}
ul.クラス名 li a {/*リンクされた文字*/
color:#000;
text-decoration:none;
}
ul.クラス名 li a:link {/*未訪問のリンク*/
color:#000;
text-decoration:none;
}
ul.クラス名 li a:visited {/*訪問後のリンク*/
color:#000;
text-decoration:none;
}
ul.クラス名 li a:hover {/*マウスをのせたとき*/
color:#ff0000;
text-decoration:underline;
}
ul.クラス名 li a:active {/*クリック中*/
color:#000;
text-decoration:none;
}
CSSフレックスボックスのflex: 1を使いこなす方法と応用例
7月 26, 2024CSSのcalc()関数の使い方:動的で柔軟なレイアウトを実現しよう
7月 25, 2024background-color背景色をなしにするコードの書き方
7月 18, 2024