【CSS】文字の装飾をするプロパティ

このページはCSSについて勉強しなおす中で、notionでは管理できなくなってしまったため、備忘録としてwebページ上に移動したものです。

なお、すべてChatGPTにて生成したものを再編集したものになります。

colorプロパティ

colorプロパティは、文字やテキスト装飾の色を指定するためのプロパティです。色の値は、キーワード、カラーコード、RGB値、HSL値、透過色などの方法で指定できます。

• キーワードは、色の名前を英語で指定する方法です。例えば、赤色はred、青色はblueと書きます。ただし、使えるキーワードは16色に限られています。³

• カラーコードは、#から始まる6桁の16進数で色を指定する方法です。例えば、赤色は#ff0000、青色は#0000ffと書きます。カラーコードは、赤・緑・青の3原色の割合を表しています。⁴

• RGB値は、rgb()関数を使って赤・緑・青の3原色の強さを0から255の数値で指定する方法です。例えば、赤色はrgb(255, 0, 0)、青色はrgb(0, 0, 255)と書きます。RGB値は、カラーコードと同じ原理で色を表現しますが、10進数で書くことができます。⁵

• HSL値は、hsl()関数を使って色相・彩度・明度の3要素で色を指定する方法です。色相は0から360の角度で表し、彩度と明度は0%から100%の割合で表します。例えば、赤色はhsl(0, 100%, 50%)、青色はhsl(240, 100%, 50%)と書きます。HSL値は、色相環を使って直感的に色を指定できます。⁶

• 透過色は、rgba()やhsla()関数を使って色に透明度を加える方法です。透明度は0から1の数値で表し、0は完全に透明、1は完全に不透明を意味します。例えば、半透明の赤色はrgba(255, 0, 0, 0.5)やhsla(0, 100%, 50%, 0.5)と書きます。透過色は、背景色や他の要素と重なったときに効果的です。⁷

fontプロパティ

fontプロパティについて、詳しい例を出しながら解説しますね。😊

fontプロパティは、CSSでフォントの種類やサイズ、太さ、スタイル、行の高さなどを一括して指定するプロパティです。¹² fontプロパティは、以下のように書きます。

• styleは、フォントのスタイルを指定します。normal, italic, obliqueなどの値があります。³
• variantは、フォントのバリエーションを指定します。normal, small-capsなどの値があります。
• weightは、フォントの太さを指定します。normal, bold, bolder, lighter, 100から900までの数値などの値があります。
• stretchは、フォントの幅を指定します。normal, condensed, expandedなどの値があります。
• sizeは、フォントのサイズを指定します。px, em, rem, %などの単位で指定できます。
• line-heightは、行の高さを指定します。数値や単位で指定できます。
• familyは、フォントの種類を指定します。複数のフォント名やキーワードをカンマで区切って指定できます。

fontプロパティでは、sizeとfamilyは必ず指定しなければなりません。それ以外のプロパティは省略できます。省略した場合は、各プロパティの初期値が適用されます。

fontプロパティの例をいくつか見てみましょう。

以上が、fontプロパティの詳しい例と解説です。

text-decorationプロパティ

文字の飾りを設定するプロパティ

text-shadow

text-shadowは、CSSのプロパティで、テキストに影をつけることができます。影の色や位置、ぼかしの程度などを指定できます。影はテキストの装飾にも影響します。

text-shadowの書き方は以下のようになります。

• 水平方向の距離は、影の横方向のオフセットを指定します。正の値であれば右に、負の値であれば左に影がずれます。
• 垂直方向の距離は、影の縦方向のオフセットを指定します。正の値であれば下に、負の値であれば上に影がずれます。
• ぼかしの半径は、影のぼかしの大きさを指定します。0であればぼかしがなく、値が大きいほどぼかしが強くなります。
• 影の色は、影の色を指定します。色名やカラーコードなどで指定できます。

text-shadowは、カンマで区切って複数の影を指定することもできます。その場合は、最初に指定した影が一番手前になります。²

text-shadowの例をいくつか見てみましょう。

以上が、text-shadowの詳しい説明と例です。