Webサイト制作をしているとaタグ(リンク)にデフォルトで設定されている下線を削除したい。色を変更したい。と思う場面があります。
この記事ではCSSでaタグにデフォルトで表示される下線を消したり、下線の装飾方法を詳しく解説します！
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
CSSでリンクの下線を制御するプロパティ text-decoration
HTMLでリンクを出力するにはaタグを使用します。aタグはデフォルトの状態だと下線が表示されます。
<a href="#">リンク</a>出力結果
aタグの下線を消したり、装飾するプロパティがtext-decorationです。
text-decorationの基本的な使い方は以下になります。
基本書式
a {
text-decoration: 値;
}
CSSでリンクの下線を消す方法
リンクの下線を消すには、text-decoration: none;を適用します。
<a href="#">下線を消します。</a>a {
text-decoration: none;
}出力結果
text-decorationは一括指定
text-decoraitonプロパティは下記のプロパティを一括で指定することができます。
一括指定できるプロパティ
- text-decoration-line：装飾の種類
- text-decoration-color：装飾の色
- text-decoraiton-style：線のスタイル
- text-decoration-thickness：線の太さ
これらのプロパティについて一つずつ解説していきます！
text-decoration-lineは装飾の種類を制御する
text-decoration-lineは線の装飾を制御するプロパティです。
表現できるのは下記3つの線です。
- 下線
- 上線
- 中央線
また、複数の線を引くこともできます。
<a class="underline" href="#">下線を表示します。</a>
<a class="overline" href="#">上線を表示します。</a>
<a class="line-through" href="#">中央に線を表示します。</a>
<a class="lines" href="#">複数の線を表示します。</a>.underline {
text-decoration-line: underline;
}
.overline {
text-decoration-line: overline;
}
.line-through {
text-decoration-line: line-through;
}
.lines {
text-decoration-line: line-through underline;
}表示結果
text-decoration-colorは線の色を制御する
text-decoration-colorは線の色を変更することができます。
<a class="color" href="#">線の色を指定します。</a>.color {
text-decoration-color: rgb(255, 0, );
}表示結果
text-decoration-styleは線のスタイルを制御する
text-decoration-styleは線のスタイルを変更することができます。
線のスタイルは以下の種類に変更できます。
線の種類
- 単独線
- 二重線
- 点線
- 破線
- 波線
<a class="solid" href="">単独線を表示します。</a>
<a class="double" href="">二重線を表示します。</a>
<a class="dotted" href="">点線を表示します。</a>
<a class="dashed" href="">破線を表示します。</a>
<a class="wavy" href="">波線を表示します。</a>.solid {
text-decoration-style: solid;
}
.double {
text-decoration-style: double;
}
.dotted {
text-decoration-style: dotted;
}
.dashed {
text-decoration-style: dashed;
}
.wavy {
text-decoration-style: wavy;
}表示結果
text-decoration-thicknessは線の太さを制御する
text-decoration-thicknessは下線、上線などの線の太さを制御することができます。
<a href="">線を太くします。</a>a {
text-decoration-thickness: 20px;
}
まとめ
aタグの下線を削除する方法を理解できましたか？
この記事を読めば、aタグに自分の思い通りにスタイルを当てることができるようになります。
実は、aタグごとにtext-decorationを適用するのは手間で効率的ではありません。
例えば全リンクの下線を非表示にするならreset.cssやスタイル全体にtext-decoration: none;を適用して、記述量を減らす工夫ができます。
aタグのスタイルを自由にいじれるようになった方は、より良いコードを書けるように試行錯誤してみましょう！
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
