PR

フォント,テキスト関連のプロパティ

 ブラウザに表示する文字の大きさや色をfontタグの属性として指定することは広く行われていますが,W3Cではfontタグは非推奨になっています。これからはこうした属性は,CSSのプロパティを使って指定するのが望ましいでしょう。

フォント関連
font-family
・字体を指定する
・書式 { font-family: "family-name", generic-family }
・主な値
 family-name:MS P明朝,Courierなど
 generic-family:serif,sans-serif,cursive,fantasy,monospace(等間隔)など。値は""で囲まないこと

font-size
・大きさを指定する
・主な値
 ○px(ピクセル数),xx-small,x-small,medium,large,x-large,xx-large

font-style
・斜体を指定する
・主な値
 normal(デフォルト),italic(イタリック),oblique(斜体)

font-weight
・太さを指定する
・主な値
 100~900(100の倍数で指定。大きいほど太い),normal(標準),bold(太い),bolder(親要素のフォントより太い,lighter(親要素のフォントより細い)

font
・フォントに関するプロパティをまとめて指定する
・主な値
 フォント関係のプロパティ値を半角スペースで区切って記述する(font-style font-weight font-size/line-height font-family)。font-sizeとfont-family以外は省略可能

color
・文字など要素の色を指定する
・主な値
 カラーネーム,RGB値


テキスト関係
line-height
・行送りの幅を指定する
・主な値
 ○px(文字の高さを含むピクセル数),○em(1文字の高さに対する倍率),○%(1文字の高さに対するパーセント)

letter-spacing
・文字の間隔を指定する
・主な値
 ○px(文字の幅を含むピクセル数),○em(1文字の幅に対する倍率),○%(1文字の幅に対するパーセント)

text-align
・テキストのそろえ位置(左右)を指定する
・主な値
 left(左そろえ,デフォルト),right(右そろえ),center(中央そろえ),justify(左右いっぱいに均等割り付け)

vertical-align
・テキストのそろえ位置(上下)を指定する
・主な値
 baseline(通常の位置),bottom(下そろえ),middle(中央),top(上そろえ),sub(下付き文字の位置),super(上付き文字の位置)

float
・画像などが配置されているときに,テキストの回りこみを指定する
・主な値
 right(画像を右に配置するとき),left(画像を左に配置するとき)

clear
・テキスト回り込みの解除を指定する
・主な値
 right(右),left(左)

text-decoration
・テキストの装飾を指定する
・主な値
 none(装飾無し,デフォルト),underline(下線),overline(上線),
 line-through(取り消し線)。同時に複数を指定できる
 ※aタグ内部でnoneを指定すると下線を非表示にできる

サンプル1-1●CSSでフォント関係のプロパティを指定したHTML文書とその表示

<html>
<head>
<title>これだけは知っておきたいCSS</title>
<style type="text/css">
<!--
h1{
font-family:"MS P明朝", sans-serif;
font-size:32;
font-style:normal;
font-weight:bold;
line-height:1.5em;
color:#FF0000;
text-align:center;
}
h2{
font-family:"MS Pゴシック", sans-serif;
font-size:20;
font-style:italic;
font-weight:bold;
line-height:1.5em;
color:#0000FF;
text-align:left;
}
-->
</style>
</head>
<body>
<h1>これは大見出しです</h1>
<div>
<h2>これは中見出し(1)です</h2>
<p>ここに中見出し(1)の本文を記述します</p>
</div>
<div>
<h2>これは中見出し(2)です</h2>
<p>ここに中見出し(2)の本文を記述します</p>
</div>
</body>
</html>

サンプル1-2●テキストの装飾を指定した
<html>
<head>
<title>これだけは知っておきたいCSS</title>
</head>
<body>
<p style="text-decoration:underline">下線</p>
<p style="text-decoration:overline">上線</p>
<p style="text-decoration:line-through">取り消し線</p>
</body>
</html>

サンプル1-3●テキストの位置を指定した
<html>
<head>
<title>これだけは知っておきたいCSS</title>
</head>
<body>
<p style="text-align:center">テキストを<br>左右中央に配置します</p>
<p style="text-align:left">テキストを<br>左そろえで配置します</p>
<p style="text-align:right">テキストを<br>右そろえで配置します</p>
<p><img src="0501hyoushi.jpg" alt="日経ソフトウエア1月号表紙"
style="vertical-align:middle">画像の上下中央の位置にテキストを配置します</p>
</body>
</html>

サンプル1-4●画像に対するテキストの回り込みを指定した
<html>
<head>
<title>これだけは知っておきたいCSS</title>
</head>
<body>
<p><img src="0501hyoushi.jpg" alt="日経ソフトウエア1月号表紙"
style="vertical-align:top">floatプロティを指定しないと,ブラウザの縁でテ
キストが折り返されると,画像の下に続きのテキストが表示されてしまいます。
これでは読みにくいですね。</p>
<p><img src="0501hyoushi.jpg" alt="日経ソフトウエア1月号表紙"
style="vertical-align:top; float:left">floatプロパティを指定すると,ブラ
ウザの縁でテキストが折り返されると,画像の隣に続きが表示されます。これを
回り込み表示と呼びます。</p>
<p style="clear:left">clearプロパティで回り込みを解除すると,画像の下
に続きのテキストが表示されます。
</body>
</html>