text-decorationプロパティは、テキストに引く線の種類・スタイル・色を指定します。
使用できる値
セレクタ {
text-decoration: -line -style -color
}
指定できる値は
プロパティと同じです。
-line
| 値 | 表示スタイル | |
|---|---|---|
| normal | 標準 | あいうえお |
| underline | 下線 | あいうえお |
| overline | 上線 | あいうえお |
| line-through | 中央線 | あいうえお |
詳しいサンプルはこちら：text-decoration-line プロパティ – CSS サンプル・リファレンス
-style
| 値 | 表示スタイル | |
|---|---|---|
| solid | 1本 | あいうえお |
| double | 2本 | あいうえお |
| dotted | 点線 | あいうえお |
| dashed | 破線 | あいうえお |
| wavy | 波線 | あいうえお |
詳しいサンプルはこちら：text-decoration-style プロパティ – CSS サンプル・リファレンス
-color
| 値 | |
|---|---|
| 色の指定 | キーワード, HEX形式, RGB形式などで色を指定します。 |
詳しいサンプルはこちら：text-decoration-color プロパティ – CSS サンプル・リファレンス
使用例
ここではテキストの下に赤い二重線を引くサンプルを紹介します。
text-decoration プロパティでまとめて指定しても、種類・スタイル・色を別々に指定してもどちらも同じ結果になります。
<p>ここに<span class="line1">テキスト</span>が入ります。
ここに<span class="line2">テキスト</span>が入ります。</p>.line1 {
text-decoration: underline double red;
}
.line2 {
text-decoration-line: underline;
text-decoration-style: double;
text-decoration-color: red;
}
対応ブラウザ
関連するHTML要素
関連するCSSプロパティ
- text-decoration-color：テキストに引く線の色を指定
- text-decoration-line：テキストに引く線の種類を指定
- text-decoration-style：テキストに引く線のスタイルを指定
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。
オンラインスクールを選ぶときのポイント
- 無料体験があること
- 個別サポートがあること
自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。（無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。）
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。
ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい????
1. TechAcademy（テックアカデミー）
オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。
2. CodeCamp（コードキャンプ）
一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。
3. Treehouse
英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。
