ウェブデザインにおいて、文字の装飾は重要な要素のひとつです。CSSを使って、文字にさまざまな装飾を施すことができます。この記事では、初心者向けにCSSでの文字装飾の基本を総まとめします。
1. 文字の色を変更する
CSSでは、colorプロパティを使って文字の色を指定します。色は名前、HEXコード、RGBなどで指定できます。
使用例
p {
color: #ff5733; /* 文字色をオレンジに設定 */
}
この例では、段落の文字色がオレンジ色に変更されます。
2. 文字の太さを変更する
文字の太さは、font-weightプロパティを使って指定します。一般的な値には、normal（通常）やbold（太字）、数値（100〜900）があります。
使用例
h1 {
font-weight: bold; /* 見出しを太字に設定 */
}
この例では、見出しの文字が太字になります。
3. 文字サイズを変更する
文字サイズは、font-sizeプロパティを使って指定します。単位にはピクセル（px）、em、rem、パーセンテージ（%）などがあります。
使用例
h2 {
font-size: 24px; /* 見出しの文字サイズを24ピクセルに設定 */
}
この例では、見出しの文字サイズが24ピクセルに設定されます。
4. 文字のスタイルを変更する
文字のスタイルは、font-styleプロパティを使って指定します。italic（斜体）やnormal（通常）が一般的です。
使用例
em {
font-style: italic; /* 強調テキストを斜体に設定 */
}
この例では、<em>タグで囲まれた強調テキストが斜体になります。
5. テキストの装飾を追加する
テキストに装飾を追加するには、text-decorationプロパティを使います。underline（下線）、line-through（打ち消し線）、none（装飾なし）などが使用できます。
使用例
a {
text-decoration: underline; /* リンクに下線を追加 */
}
この例では、リンクテキストに下線が追加されます。
6. 文字の間隔を調整する
文字の間隔は、letter-spacingプロパティを使って指定します。間隔を広げることで、文字が読みやすくなります。
使用例
h3 {
letter-spacing: 2px; /* 見出しの文字間隔を2ピクセルに設定 */
}
この例では、見出しの文字間隔が2ピクセルに設定されます。
7. 文字を大文字や小文字に変換する
文字を大文字や小文字に変換するには、text-transformプロパティを使います。uppercase（すべて大文字）、lowercase（すべて小文字）、capitalize（単語の最初の文字を大文字）があります。
使用例
p.uppercase {
text-transform: uppercase; /* 段落の文字をすべて大文字に設定 */
}
この例では、class="uppercase"が指定された段落の文字がすべて大文字に変換されます。
8. まとめ
CSSを使って文字装飾を行うことで、ウェブページのデザインが大きく向上します。color、font-weight、font-size、text-decorationなどのプロパティを活用して、テキストを魅力的に演出しましょう。初心者でも簡単に使えるこれらのプロパティを駆使して、より良いデザインを目指してください。
