トップページ>ホームページ実用小技集>スタイルシート基礎講座

6.テキストの属性と値

テキスト(TEXT)の属性と指定できる値の一覧は以下の通りです。

属性対応ブラウザ備考
color色名、RGB指定、RRGGBB指定 (注1)IE,NNテキストの色
text-alignleft,center,right,justifyIE,NN水平位置
text-justifydistribute-all-linesIE均等割付
text-decorationnone,underline,overline,
linethrough,blink
NN,IE(blinkを除く)装飾
text-indent数値+
単位(mm,cm,in,pt,pc,em,ex,px,%)
IE,NN字下げ
vertical-alignbaseline,sub,super(インライン要素)
top,bottom,middle(セル要素)
IE4.0以降、
NN4.0以降
(sub,super除く)
垂直位置
text-transformcapitalize,uppercase,
lowercase,none
IE4.0以降大文字、小文字の制御
letter-spacingmm,cm,in,pt,pc,em,ex,pxIE4.0以降文字間隔
white-spacenormal,preNN4.0以降空白
ruby-alignleft,center,right,distribute-letter
distribute-space,line-edge
IE5.0以降ルビの配置
ruby-positionabove,inlineIE5.0以降ルビの位置

個人的に上の表の中でよく使うのはcolor,text-indent,text-decoration,text-alignぐらいでしょうか。IE,NNの両方に対応していないものはあまり使わない方が無難です。もっともNNの対応状況は極めて悪いので、スタイルシートを使う際にはどこかで踏ん切りが必要です。

(注1)RGB、RRGGBB指定は16進数での指定になります。
RRGGBBで赤を指定する場合 color:#ff0000
青を指定する場合 color:#0000ff
RGBで赤を指定する場合 color:#f00
青を指定する場合 color:#00f

色名については「8.色名で指定できる色一覧」を参照してください。

7.フォントの属性と値

フォントの属性と指定できる値は以下の通りです。

属性対応ブラウザ備考
font-familyフォント名、一般名 (注2)IE,NN書体の指定
font-size数値+
単位(mm,cm,in,pt,pc,em,ex,px,%)
キーワード (注3)
IE,NN文字の大きさ
font-weight100,200,300,400,
500,600,700,800,900,
bold,bolder,lighter
IE,NN文字の太さ
line-height数値+
単位(mm,cm,in,pt,pc,em,ex,px,%)
IE,NN行間
font-styleitalic,oblique,normalIE,NN斜体
font-variantsmall-caps,normalIE4.0以降スモールキャップ
line-breakstrict,normalIE5.0禁則処理
word-breakbreak-all,keep-all,normalIE5.0改行処理

(注2) フォントの一般名は次の通りです。
serif,sans-serif,cursive,fantasy,monospace

フォント名での指定で、MS ゴシックのように名前の中に半角スペースが含まれる場合、ダブルクォーテーション(")かシングルクォーテーション(')でくくる必要があります。
例:H4{font-family: "MS P明朝";}

<P STYLE="font-family: 'MS ゴシック'";>〜<P>

(注3) 数値での指定は数値+単位で書きます。
例:BODY{font-size:14px;}

<SPAN STYLE="font-size:1.5em;">〜<SPAN>

キーワードは次の通りです。
xx-small,a-small,small,medium,large,x-large,xx-large

●フォント属性の一括指定

フォントに関する属性を一括指定する場合は次のように書きます。
BODY{font:14px /130% "MS UI Gothic" ;}

上の例では<BODY>タグにフォントの大きさ、行間、フォントの種類を指定しました。各属性をセミコロンで分ける必要はありません(最後には必要です)。気を付けなければならないのは行間で、これは必ずフォントサイズの次に"/"を付けて書きます。


[BACK][NEXT]