7.1 プロパティ text-decoration
CSSは、ウェブページ上でのテキストのスタイリングとデコレーションに関連するさまざまなプロパティを提供しています。text-decoration、
text-transform、そしてtext-shadowは、下線を引いたり、テキストのケースを変えたり、影を作ったりするのに役立ち、
テキストをより表現力豊かで魅力的にします。
text-decorationプロパティは、下線、上線、取り消し線など、テキストの装飾効果を管理します。また、テキストを装飾する際に使用される線の色やスタイルを設定することもできます。
値:
none: すべてのテキストデコレーションを削除underline: テキストに下線を引くoverline: テキストの上に線を追加line-through: テキストに取り消し線を追加blink: テキストが点滅（すべてのブラウザでサポートされているわけではない）text-decoration-color: デコレーションのラインの色を設定text-decoration-style: ラインのスタイルを設定（solid, double, dotted, dashed, wavy）text-decoration-thickness: デコレーションのラインの太さを設定
使用例:
CSS
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.custom-decoration {
text-decoration: underline wavy red;
}
HTML
<body>
<p class="underline">このテキストは下線が引かれています。</p>
<p class="overline">このテキストは上線が引かれています。</p>
<p class="line-through">このテキストは取り消し線が引かれています。</p>
<p class="custom-decoration">このテキストは赤い波線で下線が引かれています。</p>
</body>
7. 2 プロパティ text-transform
text-transformプロパティは、テキストの変換を管理し、文字のケースを変更します。これは、ヘッダーや小文字のテキストへの自動変換に役立ちます。
値:
none: 変換しない（デフォルト値）capitalize: 各単語の最初の文字を大文字にするuppercase: すべての文字を大文字にするlowercase: すべての文字を小文字にするfull-width: テキストを全角（ダブルサイズ）に変換（すべてのブラウザでサポートされているわけではない）
使用例:
CSS
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
HTML
<body>
<p class="capitalize">このテキストは各単語の最初の文字が大文字になります。</p>
<p class="uppercase">このテキストはすべて大文字になります。</p>
<p class="lowercase">このテキストはすべて小文字になります。</p>
</body>
7.3 プロパティ text-shadow
text-shadowプロパティはテキストに影を追加し、ウェブページ上での視覚効果を作り出し、テキストの読みやすさを向上させます。
値:
<offset-x>: X軸に対する影のオフセット（水平）<offset-y>: Y軸に対する影のオフセット（垂直）<blur-radius>: 影のぼかし半径（任意）<color>: 影の色（任意）
使用例:
CSS
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.multiple-shadows {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);
}
HTML
<body>
<p class="text-shadow">このテキストは影があります。</p>
<p class="multiple-shadows">このテキストは複数の影があります。</p>
</body>
コードの説明:
text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);: 横方向に2px、縦方向に3pxのオフセット、4pxのぼかし半径と半透明の黒で影を追加text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);: 異なるパラメータで2つの影を追加し、より複雑な視覚効果を作成
GO TO FULL VERSION