タイポグラフィ - CSSリファレンス

#color

テキストの色を定義します。

color: transparent;

テキストに透明な色を適用します。テキストは、本来占めるべきスペースを占有します。

color: red;

140以上の色名のいずれかを使用できます。

color: #05ffb0;

16進数カラーコードを使用できます。

color: rgb(50, 115, 220);

rgb() カラーコードを使用できます。

最初の値は赤用です
2番目の値は緑用です
3番目の値は青用です

それぞれ、0から255の間の値を取ることができます。

color: rgba(0, 0, 0, 0.5);

rgba() カラーコードを使用できます。

最初の3つの値はrgb用です
4番目の値はalphaチャンネル用で、色の不透明度を定義します

alpha値は、ゼロの0（透明）から1の1（不透明）までです。

color: hsl(14, 100%, 53%);

hsl() カラーコードを使用できます。

最初の値はhue用で、0から359までです
2番目の値はsaturation用で、0%から100%までです
3番目の値はluminosity用で、0%から100%までです

color: hsla(14, 100%, 53%, 0.6);

hsl()a カラーコードを使用できます。

最初の3つの値はhsl用です
4番目の値はalphaチャンネル用で、色の不透明度を定義します

alpha値は、ゼロの0（透明）から1の1（不透明）までです。

#font-family

font-family: "Source Sans Pro", "Arial", sans-serif;

複数の値を使用する場合、フォントファミリーのfont-familyリストは、ブラウザがフォントファミリーを選択する優先度を定義します。

ブラウザは、ユーザーのコンピューターと、@font-faceリソース内の各ファミリーを探します。

リストは左から右に優先順位が付けられます。利用可能な場合は最初の値を使用し、リストの最後まで到達するまで次の値に進みます。デフォルトのフォントファミリーは、ブラウザの設定によって定義されます。

この例では、ブラウザはSource Sans Proが利用可能な場合はそれを使用しようとします。見つからない場合は、Arialを使用しようとします。どちらも利用できない場合は、ブラウザのsans-serifフォントを使用します。

font-family: serif;

ブラウザはセリフフォントファミリーを使用します。すべての文字にストロークの端があります。

font-family: sans-serif;

ブラウザはサンセリフフォントファミリーを使用します。ストロークの端を持つ文字はありません。

font-family: monospace;

ブラウザは等幅フォントファミリーを使用します。すべての文字の幅が同じです。

font-family: cursive;

ブラウザは筆記体フォントファミリーを使用します。

font-family: fantasy;

ブラウザはファンタジーフォントファミリーを使用します。

#font-size

テキストのサイズを定義します。

デフォルト font-size: medium;

テキストはブラウザのデフォルトのmediumサイズを使用します。

font-size: 20px;

ピクセル値を使用できます。

font-size: 1.2em;

em値を使用できます。

値は親のfont-sizeに相対的です。
その結果、子要素で使用すると、値はカスケードします。

font-size: 1.2rem;

rem値を使用できます。

値はルート要素のfont-sizeに相対的で、それは<html>要素です。
その結果、値はHTML階層における要素の深さに応じて変化せず、コンテキストに依存しないままになります。

font-size: 90%;

パーセント値を使用できます。これらは em 値のように機能します。

値は親のfont-sizeに相対的です。
その結果、子要素で使用すると、値はカスケードします。

font-size: smaller;

相対キーワードを使用できます。値は親要素を基準にします。

以下が利用可能です。

larger
smaller

font-size: x-large;

絶対キーワードを使用できます。値はルート要素である <html> を基準にします。

以下が利用可能です。

xx-small
x-small
small
medium
large
x-large
xx-large

#font-style

テキストの傾き具合を定義します。

default font-style: normal;

テキストは傾いていません。

font-style: italic;

フォントのイタリックバージョンを使用します。文字がわずかに傾いています。

font-style: oblique;

フォントのオブリークバージョンを使用します。文字がイタリックよりもさらに傾いています。

#font-variant

各文字に使用するグリフを定義します。

default font-variant: normal;

各文字は標準のグリフを使用します。

font-variant: small-caps;

各文字はスモールキャピタルバージョンを使用します。

#font-weight

テキストの太さを定義します。

default font-weight: normal;

テキストは標準の太さです。

font-weight: bold;

テキストが太字になります。

font-weight: 600;

数値を使用できます。これらはすべて特定の名前付きの太さに対応します。

100 Thin
200 Extra Light
300 Light
400 Normal
500 Medium
600 Semi Bold
700 Bold
800 Extra Bold
900 Ultra Bold

フォントファミリーが要求された太さを提供しない場合、最も近い利用可能な太さが使用されます。

font-weight: lighter;

相対キーワード：lighterまたはbolderを使用できます。ブラウザは次に利用可能な太さを使用します。

#font

font-style font-variant font-weight font-size line-height および font-familyの省略形プロパティです。

#letter-spacing

テキストブロックの文字間の間隔を定義します。

default letter-spacing: normal;

文字間の間隔は通常です。

letter-spacing: 2px;

ピクセル値を使用できます。

letter-spacing: 0.1em;

em値を使用できます。これにより、間隔がフォントサイズに対して相対的なままになります。

#line-height

テキストの1行の高さを定義します。

default line-height: normal;

ブラウザのデフォルト値に戻ります。

recommended line-height: 1.6;

単位なしの値を使用できます。行の高さはフォントサイズに対して相対的になります。

line-height: 30px;

ピクセル値を使用できます。

line-height: 0.8em;

em値を使用できます。単位なしの値と同様に、行の高さはフォントサイズに対して相対的になります。

#text-align

要素のテキストコンテンツを水平方向にどのように配置するかを定義します。

text-align: left;

テキストコンテンツは左に配置されます。

text-align: right;

テキストコンテンツは右に配置されます。

text-align: center;

テキストコンテンツは中央に配置されます。

text-align: justify;

テキストコンテンツは両端揃えになります。

#text-decoration

要素のテキストコンテンツをどのように装飾するかを定義します。

default text-decoration: none;

テキストの装飾をすべて削除します。

text-decoration: underline;

テキストコンテンツに下線を引きます。

#text-indent

要素のテキストの最初の行のインデントを定義します。

default text-indent: 0;

テキストはインデントされていません。

text-indent: 40px;

ピクセル、(r)em、パーセントなどの数値を使用できます。

最初の行のみがインデントされていることに注意してください。

text-indent: -2em;

負の値も使用できます。

#text-overflow

非表示のテキストコンテンツがオーバーフローした場合の動作を定義します。

デフォルト text-overflow: clip;

テキストコンテンツは切り取られ、アクセスできません。

text-overflow: ellipsis;

オーバーフローしたコンテンツは省略記号：…に置き換えられます。

#text-shadow

テキストコンテンツの影を定義します。

デフォルト text-shadow: none;

テキストコンテンツには影がありません。

text-shadow: 2px 6px;

少なくとも2つの値が必要です。

1つ目は水平方向のオフセット
2つ目は垂直方向のオフセット

影の色はテキストの色から継承されます。

text-shadow: 2px 6px red;

最後の値として色を定義できます。

colorと同様に、色の名前、16進数、rgb、hslなどを使用できます。

text-shadow: 2px 4px 10px red;

オプションの3番目の値は影のぼかしを定義します。

この例では、色は不透明から透明まで10pxにわたって拡散します。

#text-transform

テキストコンテンツをどのように変換するかを定義します。

デフォルト text-transform: none;

テキスト変換を削除します。テキストはHTMLコードと同じように表示されます。

text-transform: capitalize;

各単語の最初の文字を大文字に変えます。

text-transform: uppercase;

すべての文字を大文字に変えます。

text-transform: lowercase;

すべての文字を小文字に変えます。

#white-space

要素の空白をどのように処理するかを定義します。

デフォルト white-space: normal;

スペースの連続は1つにまとめられます。
改行は無視されます。
テキストコンテンツは折り返されます。

white-space: nowrap;

スペースの連続は1つにまとめられます。
改行は無視されます。
テキストコンテンツは折り返されず、1行に表示されます。

white-space: pre;

空白は正確に保持されます。

スペースの連続は保持されます。
改行は、新しい行と<br>でのみ行われます。

white-space: pre-wrap;

空白はほぼ保持されます。

スペースの連続は保持されます。
改行は、新しい行、<br>だけでなく、要素の端に達したときにも行われます。

white-space: pre-line;

新しい行のみが保持されます。

スペースの連続は1つにまとめられます。
改行は、新しい行、<br>だけでなく、要素の端に達したときにも行われます。

#word-break

行の最後に達したときに単語がどのように分割されるかを定義します。

デフォルト word-break: normal;

スペースのない単語は分割されません。途切れない文字の連続は1行に表示されます。

word-break: break-all;

スペースのない単語は、行の終わりに達するとすぐに分割されます。

#word-spacing

テキストブロック内の単語間の間隔を定義します。

デフォルト word-spacing: normal;

文字間の間隔は通常です。

word-spacing: 5px;

ピクセル値を使用できます。

word-spacing: 2em;

em値を使用できます。これにより、間隔がフォントサイズに対して相対的なままになります。