文字の書式設定

fontとは、フォントに関連する設定を一括して指定するためのプロパティです。具体的には、font-style、font-variant、font-weight、font-size、line-height、font-familyで指定する値をスペースで区切って指定します。ただし、その中には指定する順序や省略が不可能なプロパティもあるので、注意が必要です。

font-family （フォントの種類）
font-style （フォント・スタイル）
font-variant (Schriftvariante)
font-size （文字の大きさ）
font-weight （文字の太さ）
font-stretch (Schriftlaufweite)
font （文字一般）
word-spacing (語の間隔)
letter-spacing （文字の間隔）
text-decoration (テキストの装飾)
text-transform (Text transformation)
color （テキスト、文字の色）
text-shadow （テキストの影）

font-family 書体

font-familyとは、フォントの種類を指定するためのプロパティです。複数のフォントファミリー名やキーワードをカンマで区切って指定することができます。その場合、先に指定されているものほど優先して適用されます。

フォントファミリー名にスペースが含まれている場合は、そのフォントファミリー名全体を引用符で囲う必要があります。

なお、キーワードにはserif、sans-serif、cursive、fantasy、monospaceがあります。

Functional list
書式	font-family: [[<family-name> \| <generic-family>],]* [<family-name> \| <generic-family>]
値	<family-name> どのような文字種類名でも使われる <generic-family> serif（セリフ）（欧文活字のひげ飾り） (例,Times) sans-serif（サンセリフ）（セルフのないもの） (例,ArialやHelvetica) cursive（筆記体） (例,Zapf-Chancery) fantasy（奇抜） (例,Western) monospace（等幅） (例,Courier)
初期値	ブラウザに依存する
適用要素	全要素
継承性	可能

font-family宣言はこの様になります

P {
font-family: "New Century Schoolbook", Times, serif }

例:実例: このようになります。

フォントファミリー Impact


フォントファミリー Impact

font-style文字の形

font-styleとは、フォントのスタイルを指定するためのプロパティです。初期値はnormalであり、標準を指定します。このほかに、イタリック体で表示するためのitalic、斜体で表示するためのobliqueを指定することができます。

Functional list
書式	font-style: <value:値>
値	normal \|イタリック \|斜体
初期値	normal
適用要素	全ての要素
継承性	可能

font-styleプロパティーは、文字が三通のどれか一つで表示されるのを定義します：normal・italicかoblique（斜傾した）。

font-style宣言をしたスタイル・シートの例は、以下のようになります：

H1 { font-style: oblique }
P { font-style: normal }

例:実例: このようになります。

<html>
<head>
<title>font-style</title>
<style type="text/css">
.kursiv { font-style:italic; }
.grosskursiv { font-style:italic; font-size:200%; }
</style>

<body bgcolor="#FFFFFF" text="#000000">
フォントスタイル・イタリックを指定 
イタリックでサイズを200％
</body>
</html>

font-variantスモールキャップ

font-variantとは、フォントをスモールキャップで表示するためのプロパティです。スモールキャップとは、小文字の形状が大文字を縮小したものを採用しているフォントです。初期値はnormalであり、スモールキャップではない標準のフォントで表示します。

値にsmall-capsを指定した場合、スモールキャップのフォントで表示します。

Functional list
書式	font-variant: <value:値>
値	normal small-caps
初期値	normal
適用要素	全ての要素
継承性:	可能

例:実例: このようになります。

200％での文字



variantでしていた文字でスモール 
 variantでしていた文字

font-size文字の大きさ

font-sizeとは、フォントのサイズを指定するためのプロパティです。サイズには実数値に単位を付けて指定できるほか、小さくする指定から大きくする指定まで、順にxx-small、x-small、small、medium、large、x-large、xx-largeという7つのキーワードが指定できます。初期値はmediumです。

また、%値やsmaller、largerというキーワードで相対的に小さく、あるいは大きくすることができます。

Functional list
書式	font-size: <absolute-size> \| <relative-size> \| <length> \| <percentage>
値	<absolute-size> xx-small x-small small medium large x-large xx-large <relative-size> larger \|smaller <length> <percentage>（親要素との関連で）
初期値	medium
適用要素	全ての要素
継承性	可能

例:実例: このようになります。

文字サイズを指定する 6pt
文字サイズを指定する 8pt
文字サイズを指定する 10pt
文字サイズを指定する 12pt
文字サイズを指定する 14pt
文字サイズを指定する 18pt
文字サイズを指定する 24pt

font-weight文字の濃さ

font-weightとは、フォントの太さを指定するためのプロパティです。太さを細くする指定から太くする指定まで、順に100、200、300、400、500、600、700、800、900という9つの数値が指定できます。

初期値はnormalで、これは数値の400を指定した際と同じ太さになります。

キーワードにboldを指定すると、数値の700を指定した際と同じ太さになります。このほかにlighter、bolderというキーワードで相対的に細く、あるいは太くすることができます。

Functional list
書式	font-weight: <value:値>
値	normal bold bolder lighter 100 200 300 400 500 600 700 800 900
初期値	normal
適用要素	全ての要素
継承性	可能

例:実例: このようになります。

文字の重さ bold

 文字の重さとサイズ bold

font-stretch文字の幅

font-stretchとは、文字の幅を指定するためのプロパティです。幅を狭くする指定から広くする指定まで、順にultra-condensed、extra-condensed、condensed、semi-condensed、normal、semi-expanded、expanded、extra-expanded、ultra-expandedという9つのキーワードが指定できます。

このほかにnarrower、widerというキーワードで相対的に狭く、あるいは広くすることができます。

初期値はnormalです。

Functional list
書式	font-stretch: <value:値>
値	normal \| wider \| narrower \| ultra-condensed extra-condensed \| condensed \| semi-condensed semi-expanded \| expanded \| extra-expanded ultra-expanded \| inherit
初期値	normal
適用	すべての要素
継承	する

例:実例: このようになります。

文字のストレッチ wider

文字文章のストレッチ wider 



文字のストレッチ narrower 

文字文章のストレッチ narrower

font font-style font-variant font-size font-weight line-height

line-heightとは、行の高さを指定するためのプロパティです。

初期値はnormalであり、ブラウザが自動的に適切な高さを設定します。値には実数値、もしくは実数値に単位をつけて指定します。単位をつけない場合には、フォントの大きさにその数値をかけたものが行の高さになります。

Functional list
書式	font: <value:値>
値	[<font-style> \|\|<font-variant> \|\|<font-weight> ] <font-size> [ /<line-height> ]?<font-family>
初期値	未定義
適応：	全ての要素
継承性	可能

例:実例: このようになります。

<html>
<head>
<title>font</title>

<style type="text/css">
#Text01 { font:bold 12pt Times; }
#Text02 { font:italic 1cm Helvetica; }
#Text03 { font:small-caps 14pt Verdana; }
</style>

<body bgcolor="#FFFFFF" text="#000000">
#Text01 { font:bold 12pt Times; }
#Text02 { font:italic 1cm Helvetica; }
#Text03 { font:small-caps 14pt Verdana; }
</body>
</html>

word-spacing単語の間隔

word-spacingとは、単語同士の間隔を指定するためのプロパティです。実数値に単位を付けて指定します。

初期値はnormalであり、標準的な間隔が設定されます。

Functional list
書式	word-spacing: <value:値>
値	normal \|<length>
初期値	normal
適用要素	全ての要素
継承性	可能

word-spacingプロパティーは言葉（単語）間の追加空間を定義します。

この値はlength形式にすべきです；マイナス値は許されます。

P EM { word-spacing: 0.4em }
P.note { word-spacing: -0.2em }

例:実例: このようになります。

語単語間のスペース 6pt
語単語間のスペース 8pt
語単語間のスペース 10pt
語単語間のスペース 12pt
語単語間のスペース 14pt
語単語間のスペース 18pt
語単語間のスペース 24pt

letter-spacing文字の間隔

letter-spacingとは、文字の間隔を指定するためのプロパティです。実数値に単位をつけて指定しますが、マイナスを指定することもできます。初期値はnormalであり、標準的な間隔で表示されます。

Functional list
書式	letter-spacing: <value:値>
値	normal \|<length>
初期値	normal
適用要素	全ての要素
継承性	可能

letter-spacingプロパティーは、文字間隔を定義します。

値はlength形式です；マイナス値も許されます。

0の設定は均等割(justification)を防ぎます。

H1{ letter-spacing: 0.1em } P.note { letter-spacing: -0.1em }

文字間のスペースletter-spacing

例:実例: このようになります。

文字間のスペース 1pt
文字間のスペース 2pt

text-decoration文字に線を加える

text-decorationとは、文字に装飾を加えるためのプロパティです。値には、下線を加えるunderline、上線を加えるoverline、取り消し線を加えるline-throughが指定できます。

初期値はnoneであり、何の装飾も付け加えられません。

Functional list
書式	text-decoration: <value:値>
値	none \| [underline \|\|overline \|\|line-through \|\|blink ]
初期値	無し
適用要素	全ての要素
継承性	不可

text-decorationプロパティーで、テキストを五つのプロパティーの中の一つで飾ることができます：underline・overline・line-through・blinkまたは初期値none。

A:link, A:visited, A:active { text-decoration: none }

例:実例: このようになります。

<html>
<head>
<title>text-decoration</title>

<style type="text/css">
a:link { text-decoration:none; }
a:visited { text-decoration:line-through; }
a:hover { text-decoration:underline; }
a:active { text-decoration:underline; }
</style>

</head>
<body bgcolor="#FFFFFF" text="#000000">
 貴方の見てるサイトは <a href="../css/l">MOPA CSS TIPS</a> 国は <a href="../css/sprachenkuerzel.htm">
世界の言語・国名・地域名の名称の略</a>? 
</body>
</html>

text-transform大文字と小文字

text-transformとは、文字の表記において大文字と小文字の使い分けを指定するためのプロパティです。すべて大文字で表示するuppercase、すべて小文字で表示するlowercase、単語の最初の一文字を大文字で表示するcapitalizeを指定することができます。

初期値はnoneであり、そのまま表示します。

Functional list
書式	text-transform: <value:値>
値	none \|capitalize \|大文字 \|小文字
初期値	無し
適用要素	全ての要素
継承性	可能

text-transformプロパティーで、テキストを四つのプロパティーの中の一つに変換できます：

capitalize（各単語の最初の文字を大文字に）
uppercase（各単語の全ての文字を大文字に）
lowercase（各単語の全ての文字を小文字に）
none（初期値）

H1 { text-transform: uppercase }
H2 { text-transform: capitalize }

text-transformプロパティーは様式上の要求を表現するためだけに使用されるべきです。例えば、国や名称一覧を大文字化するのに text-transformを使うのは不適切です。

例:実例: このようになります。

単語の頭文字を大文字に

the initial of the word, in the capital letter.e 


the initial of the word, in the capital letter. 


全て大文字で

All the sentences are expressed with the capital letter.



All the sentences are expressed with the capital letter.



全て小文字で

All the sentences are expressed with the small letter.


All the sentences are expressed with the small letter.

color文字色

colorとは、文字の色、または要素の前景色を指定するためのプロパティです。RGB値やキーワードで任意の色を指定することができます。

Functional list
書式	color: <color>
値	<color> \| transparent
初期値	ブラウザによって決められている
適用要素	全ての要素
継承性	可能

colorプロパティーで、制作者が要素の色を特定できます。

色彩値の説明は単位セクションを見てください。

色彩規則の例です：

H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }

初期の頃のスタイル・シートユーザーとの衝突を回避するために、backgroundとcolorプロパティーは必ず一緒に特定すべきです。

例:実例: このようになります。

文字に色をつける blue
 文字に色をつける blue

 文字に色をつける #CC0000 
 文字に色をつける #CC0000


 文字に色をつける #009900 
 文字に色をつける #009900


 文字に色をつける #0000C0 
 文字に色をつける 0000C0


 文字に色をつける color:rgb(200,0,200)


文字に色をつける color:rgb(200,0,200)

text-shadow文字に影

text-shadowとは、文字の影を指定するためのプロパティです。影を表示させる位置を、元の位置から右と下の双方に対しどれだけ移動して表示させるかを、実数値に単位を付けて指定します。また、影をぼかす際の範囲や色も指定することができます。

初期値はnoneであり、文字に影を付けません。

例:実例: このようになります。

(未対応？）

<head>

<style type="text/css">
#rotschattig {
text-shadow:3px 3px 5px black;
font-size:36pt; color:red;
}
#blauschattig {
text-shadow:3px 3px 5px black;
font-size:36pt; color:blue;
}
</style>

</head>
<body bgcolor="#FFFFFF" text="#000000">
text-shadow:black

text-shadow:black; font-size:36pt; color:blue


Macintoshネイティブのブラウザ、Safariのみ対応しています。

HOME スタイルシート文章の書式設定