このページはCSSについて勉強しなおす中で、notionでは管理できなくなってしまったため、備忘録としてwebページ上に移動したものです。
なお、すべてChatGPTにて生成したものを再編集したものになります。
colorプロパティ
colorプロパティは、文字やテキスト装飾の色を指定するためのプロパティです。色の値は、キーワード、カラーコード、RGB値、HSL値、透過色などの方法で指定できます。
- キーワードは、色の名前を英語で指定する方法です。例えば、赤色は
red
、青色はblue
と書きます。ただし、使えるキーワードは16色に限られています。³
1 2 3 4 |
p { color: red; /* 赤色 */ } |
- カラーコードは、
#
から始まる6桁の16進数で色を指定する方法です。例えば、赤色は#ff0000
、青色は#0000ff
と書きます。カラーコードは、赤・緑・青の3原色の割合を表しています。⁴
1 2 3 4 |
p { color: #ff0000; /* 赤色 */ } |
- RGB値は、
rgb()
関数を使って赤・緑・青の3原色の強さを0から255の数値で指定する方法です。例えば、赤色はrgb(255, 0, 0)
、青色はrgb(0, 0, 255)
と書きます。RGB値は、カラーコードと同じ原理で色を表現しますが、10進数で書くことができます。⁵
1 2 3 4 |
p { color: rgb(255, 0, 0); /* 赤色 */ } |
- HSL値は、
hsl()
関数を使って色相・彩度・明度の3要素で色を指定する方法です。色相は0から360の角度で表し、彩度と明度は0%から100%の割合で表します。例えば、赤色はhsl(0, 100%, 50%)
、青色はhsl(240, 100%, 50%)
と書きます。HSL値は、色相環を使って直感的に色を指定できます。⁶
1 2 3 4 |
p { color: hsl(0, 100%, 50%); /* 赤色 */ } |
- 透過色は、
rgba()
やhsla()
関数を使って色に透明度を加える方法です。透明度は0から1の数値で表し、0は完全に透明、1は完全に不透明を意味します。例えば、半透明の赤色はrgba(255, 0, 0, 0.5)
やhsla(0, 100%, 50%, 0.5)
と書きます。透過色は、背景色や他の要素と重なったときに効果的です。⁷
1 2 3 4 |
p { color: rgba(255, 0, 0, 0.5); /* 半透明の赤色 */ } |
fontプロパティ
fontプロパティについて、詳しい例を出しながら解説しますね。😊
fontプロパティは、CSSでフォントの種類やサイズ、太さ、スタイル、行の高さなどを一括して指定するプロパティです。¹² fontプロパティは、以下のように書きます。
1 2 |
font: [style] [variant] [weight] [stretch] size[/line-height] family; |
- 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プロパティの例をいくつか見てみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* フォントのサイズを16px、フォントの種類をArialに指定する */ p { font: 16px Arial; } /* フォントのサイズを1.2em、行の高さを1.5、フォントの種類をsans-serifに指定する */ p { font: 1.2em/1.5 sans-serif; } /* フォントのスタイルを斜体、フォントの太さを太字、フォントのサイズを20px、行の高さを1.2、フォントの種類をメイリオに指定する */ p { font: italic bold 20px/1.2 "メイリオ"; } |
以上が、fontプロパティの詳しい例と解説です。
text-decorationプロパティ
文字の飾りを設定するプロパティ
1 2 3 4 5 6 7 |
a { /*文字に下線を表示しない*/ text-decoration:none; /*文字に下線を表示する*/ text-decoration:underline; } |
text-shadow
text-shadowは、CSSのプロパティで、テキストに影をつけることができます。影の色や位置、ぼかしの程度などを指定できます。影はテキストの装飾にも影響します。
text-shadowの書き方は以下のようになります。
1 2 |
text-shadow: 水平方向の距離 垂直方向の距離 ぼかしの半径 影の色; |
- 水平方向の距離は、影の横方向のオフセットを指定します。正の値であれば右に、負の値であれば左に影がずれます。
- 垂直方向の距離は、影の縦方向のオフセットを指定します。正の値であれば下に、負の値であれば上に影がずれます。
- ぼかしの半径は、影のぼかしの大きさを指定します。0であればぼかしがなく、値が大きいほどぼかしが強くなります。
- 影の色は、影の色を指定します。色名やカラーコードなどで指定できます。
text-shadowは、カンマで区切って複数の影を指定することもできます。その場合は、最初に指定した影が一番手前になります。²
text-shadowの例をいくつか見てみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* テキストに赤色の影をつける */ p { text-shadow: 2px 2px 5px red; } /* テキストに青色と緑色の影をつける */ p { text-shadow: -2px -2px 3px blue, 2px 2px 3px green; } /* テキストに白色のぼかしなしの影をつける */ p { text-shadow: 0 0 0 white; } |
以上が、text-shadowの詳しい説明と例です。