HTMLのaタグで作ったリンクの色を変える方法
「aタグを使ったリンクについている色を変えないようにしたい！」
「なんでaタグで作ったリンクは最初から色が変わるんだろう？」
上記のように、aタグで作ったリンクに標準搭載されている色が悩みの種となっている方も多いのではないでしょうか？
今回WEBCAMP MEDIAでは、HTMLのaタグで作ったリンクの色を変える方法について解説していきます。
- リンクの色が変わる理由
- リンクの色を変えない方法
以上の項目について解説します。
この記事を読むことで、aタグで作るリンクの色が変わる理由と変えないようにする方法について理解できるので、ぜひチェックしてみてくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
aタグで作るリンクの色はなぜ変わるのか？
aタグで作ったリンクにはデフォルトで下記のCSSが指定されています。
//aタグにデフォルトで指定されているCSS
a:link {
color: #0000EE;
text-decoration: underline;
}
a:visited {
color: #551A8B;
text-decoration: underline;
}
a:hover {}
a:active {
color: #FF0000;
text-decoration: underline;
}上記のコードにより、CSSを指定する前から青色で架線がついているリンクが表示されるのです。
リンクの色を用途別で指定できる擬似要素
aタグにデフォルト設定されているCSSには、下記の擬似要素が使われています。
- link：クリックされていない要素にスタイルを適用
- visited：一度クリックした要素にスタイルを適用
- hover：要素にマウスオーバー したときにスタイルを適用
- active：クリックしたときにスタイルを適用
aタグで作ったリンクのデフォルトCSSでは、linkとvisitedという擬似要素を使ってクリックしたリンクとしていないリンクで色分けされています。
また、active要素にcolor:FF0000を指定することで、クリックした瞬間にリンクが赤色に変わる仕様になっています。
aタグで作ったリンクの色を変えない方法
aタグにデフォルトで設定されているCSSを無効化してリンクの色を変えないようにするには、下記のコードを利用します。
HTML
<body>
<a href="#">テスト</a>
</body>CSS
a{
a text-decoration: none;
}colorプロパティに指定している「inherit」は、親要素のCSSを継承する役割があります。
text-decorationプロパティに「none」を指定することで、リンクの下線を無効化できます。
まとめ
今回は、HTMLのaタグで作ったリンクの色を変える方法について解説しましたが、いかがでしたでしょうか？
aタグにはデフォルトで色や下線をつけるCSSが搭載されているので、最初から色が変わっています。
色を変えないようにするには「color:inherit」で文字の色を親要素から継承して「text-decoration: none」で下線を消すことができます。
ぜひ参考にして見てくださいね！
プログラミングやパソコンを使って働きたい！
そのように考え、成長しているIT業界への転職を考えている方も増えてきました。
『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』
反対にこのような声も聞く事があります。
そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
