スタイルシート（CSS）の属性 / 文字の書式設定

Top

	文字の書式設定
	文字の書式設定に関する一般的なコメント font-family （フォントの種類） font-style （フォント・スタイル） font-variant (小文字のサイズで書かれた大文字、スモールキャップス)＜＜例工事中＞＞ font-size （文字の大きさ） font-weight （文字の太さ） font-stretch (文字の巾) font （文字一般） word-spacing (語の間隔) letter-spacing （文字の間隔） text-decoration (テキストの装飾) text-transform (テキストの文字変換) color （テキスト、文字の色） text-shadow （テキストの影）

文字の書式設定に関する一般的なコメント

文字の書式設定というのは文字の種類、大きさ、色、太さ、文字の間隔、単語の間隔などを指定、入力することです。この設定はテキストの含まれるHTML要素全てで重要です。 テキストの構造に関わる要素という章で説明したすべての要素がこれに含まれます。しかしそのほかに表などの要素にも関連します。ここにリストアップしたスタイルシートの入力は body 要素にも使えます。body 要素に使用した場合はHTMLファイル全体のテキスト要素の記述に有効になります。

font-family (フォントの種類)

フォントの種類とは、Arial、Helvetica、Times Roman といった文字の種類のことです。Sans Serif なども入ります。

ここで説明する属性でフォントの種類を入力することができます。その際そのフォントがユーザーのPCにインストールされているか、どのようにインストールされているかについて考える必要はありません。もし入力したフォントが表示できない場合は、この入力は自動的に無効になります。特定のフォントのファイル・ソースを指定して必ずそのフォントを使用させる方法はフォント・ファイルを使った文字の書式設定 という章を参照してください。

例:

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

<html><head><title>font-family</title>
<body bgcolor="#FFFFFF" text="#000000">

<p><span style="font-family:'ＭＳ ゴシック','ＭＳ Ｐゴシック',sans-serif">小さなＭＳ ゴシックで書いた例文</span><br>
<span style="font-family:'ＭＳ ゴシック','ＭＳ Ｐゴシック',sans-serif;font-size:200%">大きなＭＳ ゴシックで書いた例文</span></p>

<p><span style="font-family:'ＭＳ 明朝','ＭＳ Ｐ明朝',serif">小さなＭＳ 明朝で書いた例文</span><br>
<span style="font-family:'ＭＳ 明朝','ＭＳ Ｐ明朝',serif;font-size:200%">大きなＭＳ 明朝で書いた例文</span></p>

<p><span style="font-family:'Times New Roman',Times,serif">小さな Times New Roman で書いた例文: 
Times New Roman no chiisana reibun</span><br>
<span style="font-family:'Times New Roman',Times,serif;font-size:200%">大きな Times New Roman で書いた例文: 
Times New Roman no ookina reibun</span></p>

<p><span style="font-family:Verdana">小さな Verdana で書いた例文: Verdana no chiisana reibun</span><br>
<span style="font-family:Verdana;font-size:200%">大きな Verdana で書いた例文: Verdana no ookina reibun</span></p>

<!--etc.-->

</body></html>

説明:

font-family: を使って1種類、あるいはそれ以上の文字の種類を指定することができます。いくつもの文字の種類を入力する時は、入力する順序が重要です。最初に指定した文字がユーザーのPCにインストールしてあるとそれが使われます。その文字が無い場合は、2つ目に指定した文字が使われます。それも無い場合は次の文字という具合になります。

いくつもの文字の種類を指定する場合は、文字の名前を入力するごとにカンマで区切ります。W3Cはスペースの含まれた文字の名前を書く場合、例えば font-familiy:"Century Schoolbook",Times のように引用符で囲むことを推薦しています。この場合二重の引用符（"）でも、一重の引用符（'）でもかまいません。上の例にあるように style の属性がHTMLソースコードの中でスタイル属性内に来る場合、HTMLの属性に指示を出す時に使う引用符と同じ記号を使ってはいけません。上の例では style の属性に対する値の指示には二重の引用符が使われています。そのためその中で指示されている 'Times New Roman' というフォントには一重の引用符が使われています。これで両者の混同が防げます。

以下のような種類に関する定義があらかじめ決められています。文字の名前のほかにこのような種類の入力もできます。

serif = Times New Roman のように装飾のついた文字、日本語では明朝のような書体
sans-serif = Arial やゴシックなどのようにセリフのない、あっさりした文字
cursive = 手書き風、草書風の書体
fantasy = 装飾のほどこされたあまり一般の事務的でない書体
monospace = 均等割付

上の例のように font-family に関して serif といった値の指示を行うのは一番最後にする方がいいです。そうすると希望のフォントが表示できない場合でも、少なくともそれと似たタイプのフォントが使われる可能性が高くなります。

font-style (フォント・スタイル)

フォント・スタイルというのは文字の傾きのことです。

例:

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

<html><head><title>font-style</title>
<style type="text/css">
.italic { font-style:italic; }
.large-italic { font-style:italic; font-size:200%; }
</style>
<body bgcolor="#FFFFFF" text="#000000">

<p><span class="italic">italic というフォント・スタイルで書かれた小さな例文</span><br>
<span class="large-italic">italic というフォント・スタイルで書かれた大きな例文</span></p>

</body></html>

説明:

font-style: を使ってフォントのスタイルを指定することができます。以下の入力ができます。

italic = イタリック書体、斜体
oblique = 普通の文字を傾かせたもの
normal = 普通のまっすぐな書体

font-variant (小文字のサイズで書かれた大文字、スモールキャップス)

特別な文字のバリエーションとして「小文字のサイズで書かれた大文字、スモールキャップス」というのがあります。

例:

実例: このようになります。＜＜工事中＞＞

<html><head><title>font-variant</title></head>
<body bgcolor="#FFFFFF" text="#000000">

<p><span style="font-variant:normal">kleiner Beispieltext
mit Schriftvariante normal</span><br>
<span style="font-variant:normal; font-size:200%">gro&szlig;er
Beispieltext mit Schriftvariante normal</span></p>

<p><span style="font-variant:small-caps">kleiner Beispieltext
mit Schriftvariante small-caps</span><br>
<span style="font-variant:small-caps; font-size:200%">gro&szlig;er
Beispieltext mit Schriftvariante scmall-caps</span></p>

</body></html>

説明:

font-variant: を使ってフォントのスタイルを指定することができます。以下の入力ができます。

small-caps = 小文字サイズで書かれた大文字
normal = 普通の文字

font-size (文字の大きさ)

文字の大きさというのは文字が表示される時の大きさです。

例:

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

<html><head><title>font-size</title></head>
<body bgcolor="#FFFFFF" text="#000000">
<p>
<span style="font-size:6pt">6pt というフォント・サイズで書かれた例文</span><br>
<!-- etc. -->
</p></body></html>

説明:

font-size: で文字の大きさを指定することができます。数値で入力します。パーセントによる入力もできます。パーセントの場合は親要素の文字の大きさに左右されます。

数値による入力の代わりに精密でない、おおよその入力もできます。

xx-small = 極小
x-small = とても小さい
small = 小さい
medium = 中程度
large = 大きい
x-large = とても大きい
xx-large = 特に大きい
smaller = 通常の文字より小さいのがはっきり分かる
larger = 通常の文字より大きいがはっきり分かる

注意:

文字の大きさの入力を行の高さの入力と組み合わせることができます。その場合は属性 font の中に両方の入力を以下のシンタックス（書き方の規則）で書きます。

例：　p { font:12pt/14pt }

この例では文字の大きさは12pで、行の高さは14pです。この記述方法ではスラッシュの前の数字は常に文字の大きさを表し、スラッシュの後の数字は行の高さを表します。

font-weight (文字の太さ)

font-weight は文字の太さ、強調の具合のことです。

例:

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

<html><head><title>font-weight</title>
</head><body bgcolor="#FFFFFF" text="#000000">

<p><span style="font-weight:bold">bold という太さの文字で書かれた小さな例文</span><br>
<span style="font-weight:bold; font-size:200%">bold という太さの文字で書かれた大きな例文</span></p>

<!--etc.-->

<p><span style="font-weight:100">100 という太さの文字で書かれた小さな例文</span><br>
<span style="font-weight:100; font-size:200%">100 という太さの文字で書かれた大きな例文</span></p>

<!--etc.-->
</body></html>

説明:

font-weight: を使ってフォントの太さを指定することができます。以下の入力ができます。

bold = 太字
bolder = 特に太い
lighter = 細字.
100,200,300,400,500,600,700,800,900 = 特に細い (100) から特に太いまで (900)
normal = 普通の太さ

数値による入力で 500 という入力をするとDTP の方面で一般的な medium に相当します。700 は bold にあたります。

注意:

font-weight: で入力可能な文字の太さをすべてサポートしているフォントというのはほとんどありません。

font-stretch (文字の巾)

文字の巾の入力で文字の巾を狭くしたり太くしたりすることができます。

例:

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

<html><head><title>font-stretch</title>
</head><body bgcolor="#FFFFFF" text="#000000">

<p><span style="font-stretch:wider">wider という文字巾で書かれた小さな例文</span><br>
<span style="font-stretch:wider; font-size:200%">wider という文字巾で書かれた大きな例文</span></p>

<p><span style="font-stretch:narrower">narrower という文字巾で書かれた小さな例文</span><br>
<span style="font-stretch:narrower; font-size:200%">narrower という文字巾で書かれた大きな例文</span></p>

<!--etc.-->
</body></html>

説明:

font-stretch:で文字の巾を指定することができます。以下の入力ができます。

wider = 親要素より広い巾
narrower = 親要素より狭い巾

condensed = ある程度狭くつめた巾
semi-condensed = 多少つめた巾
extra-condensed = かなり狭くつめた巾
ultra-condensed = 最大限狭くつめた巾
expanded = ある程度広げた巾
semi-expanded = 多少広げた巾
extra-expanded = かなり広げた巾
ultra-expanded = 最大限広げた巾

normal = 普通の巾（ちょうど中間にあたる巾）

注意:

この属性は一般に普及しているブラウザーからはまだサーポートされていません。

font (文字一般)

この属性は以下の入力のまとめです。取捨選択は自由です。
font-family
font-style
font-variant
font-size
font-weight
line-height

例:

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

<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">

<p id="Text01">文字の太さ bold、大きさ 12pt の Times で書かれた例文: bold 12pt Times</p>
<p id="Text02">文字の傾きは italic、大きさは 1cm の Helvetica で書かれた例文: italic 1cm Helvetica</p>
<p id="Text03">文字のバリエーション small-caps、大きさ 14pt の Verdana で書かれた例文: 
small-caps 14pt Verdana</p>

</body></html>

説明:

font: でいろいろな文字の書式設定を合わせて指示することができます。使用できる属性に使うことが許されている値を入力します。属性は font: にリストアップしてあります。入力の順序はどうでもかまいません。

word-spacing (語の間隔)

この属性でテキスト中の単語の間の距離を指定することができます。

例:

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

<html><head><title>word-spacing</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>
<span style="word-spacing:6pt">語の間隔 6pt で書かれた例文: word word word word word</span><br>
<span style="word-spacing:8pt">語の間隔 8pt で書かれた例文: word word word word word</span><br>
<!--etc.-->
</p>
</body></html>

説明:

word-spacing: で単語の間の間隔を指定することができます。 数値による入力ができますが、パーセントは使えません。

注意:

この入力はまだすべてのブラウザーからサポートされているわけではありません。

letter-spacing (文字の間隔)

この属性でテキストの文字、あるいは記号の間の間隔を指定することができます。

例:

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

<html><head><title>letter-spacing</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>
<span style="letter-spacing:1pt">文字の間隔 1pt で書かれた例文</span><br>
<span style="letter-spacing:2pt">文字の間隔 2pt で書かれた例文</span><br>
<!--etc.-->
</p>
</body></html>

説明:

letter-spacing:で文字の間隔の大きさを指定することができます。数値による入力ができますが、パーセントは使えません。

注意:

この入力はまだネットスケープ 4.x からはサポートされていません。

text-decoration (テキストの装飾)

この属性でテキストの書式設定に下線、取り消し線などさらに変化を加えることができます。

例:

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

<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">

<p>
<a href="../../../index.htm">SELFHTML のホームページはもちろんご存知でしょう。</a><br>
しかし <a href="../../../cgiperl/module/cpanmodule.htm">CPAN-Module</a> はご存知ですか？<br>
あるいは<a href="../../../diverses/sprachenkuerzel.htm">世界の言語・国名・地域名の名称の略</a>
といったページはどうでしょう？
</p>

</body>
</html>

説明:

text-decoration: でさらに書式設定をする事ができます。以下の入力ができます。

underline = 下線
overline = 上線
line-through = 取り消し線
blink = 点滅
none = 普通(テキストの装飾無し)

注意:

MSインターネット・エクスプローラは blink をサポートしていません。ネットスケープ 4.x は overline をまだサポートしていませんが、6.x はしています。

text-transform (テキストの文字変換)

個々のアルファベットがファイルの中で実際にどういう風に書かれているかとな無関係に、この属性でテキスト領域に表示される文字を小文字にする、大文字にする、あるいはスモールキャップスにするなどと指定することができます。

例:

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

<html><head><title>text-transform</title>
</head><body bgcolor="#FFFFFF" text="#000000">

<p><span style="text-transform:capitalize でテキストの文字が変換された小さな例文: 
capitalize capitalize capitalize</span><br>
<span style="text-transform:capitalize; font-size:200%">capitalize でテキストの文字が変換された大きな例文: 
capitalize capitalize capitalize</span></p>

<!--etc.-->

</body>
</html>

text-transform: で文字を変換することができます。以下の入力ができます。

capitalize = 語頭を大文字にする
uppercase = 大文字のみ使用
lowercase = 小文字のみ使用
none = 通常通り (テキストの文字を変換しない)

注意:

MSインターネット・エクスプローラ 4.x は capitalize という入力をまだサポートしていません。

color（テキスト、文字の色）

この入力でテキストの前景、文字の色を指定することができます。

例:

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

<html><head><title>color</title>
</head><body bgcolor="#FFFFFF" text="#000000">

<p><span style="color:blue"><b>青い</b>色の文字で書かれた小さな例文</span><br>
<span style="color:blue;font-size:200%"><b>青い</b>色の文字で書かれた大きな例文</span></p>

<!--etc.-->
</body></html>

説明:

color: でテキストの色を指定することができます。使えるのは色の指定で決められている入力方法です。

ご案内:

色を定義する時 SELFHTML のカラー・セレクターを使うと便利です。

text-shadow (テキストの影)

この入力でテキストに影をつけることができます。

例:

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

<html><head><title>text-shadow</title>
<style type="text/css">
#akakage  { text-shadow:black; font-size:36pt; color:red; }
#aokage { text-shadow:black; font-size:36pt; color:blue; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">

<p id="akakage">黒い影のついた赤い大きなテキスト</p>
<p id="aokage">黒い影のついた青い大きなテキスト</p>

</body></html>

説明:

text-shadow: でテキストに影をつけることができます。使えるのは色の指定で決められた入力方法、あるいは影をつけない場合の none です。

注意:

スタイルシート（CSS）バージョン2.0のこのコマンドはこれまでのところまだ一般に普及しているブラウザーからはサポートされていません。


	フォント・ファイルを使った文字の書式設定
	単位、色の入力、値の入力

HTML Tips

TOP