| スタイルシートサンプル集 |
| ■ 文字のサイズを変更する |
<font size=" とは違い細かく指定が出来ます。
指定単位(in,cm,mm,pt,pc,px,em,ex,%,など)
<P STYLE="font-size:150%">150%で指定しました。</P>
150%で指定しました。
| ■ 文字の太さを変更する |
- normal = 標準
- bold = 太字
- bolder = より太く
- lighter = より細く
<P STYLE="font-weight:bolder">より太く表示する。</P> より太く表示する。
| ■ 文字をイタリック/斜体にする |
- normal = 標準
- italic = イタリック
- oblique = 斜体
<P STYLE="font-style:italic">イタリックで表示する。</P> イタリックで表示する。
| ■ 文字のインデントをする |
文頭の字下げ(インデント)をします。
←このように文頭の文字が字下げされます。 2行目以降は字下げされません。
個別に指定、赤字はインデントの値
<SPAN STYLE="text-indent:30px">ここに本文</SPAN>
ページ全体のP場合
<STYLE TYPE="text/css">
P {text-indent:30px }
</STYLE>
| ■ 行間を指定する |
行間を指定して見栄えを変えましょう。
指定単位(in,cm,mm,pt,pc,px,em,ex,%,など)
<DIV STYLE="line-height:10px">行間を10pxで指定</DIV>
行間を15pxで指定行間を15pxで指定行間を30pxで指定行間を30pxで指定
| ■ 文字装備を指定する |
ヘッダー内<HEAD>に記述して文字装備をつけて見ます。
装備飾りのタグは「text-decoration:装備の設定」です。
装備の説明 none ←標準 underline ←下線をつける overline ←上線をつける(Netscape未対応) line-through ←取り消し線 blink ←点滅させる(Explorer未対応)
例)ページ内の<P>タグを指定する場合
<html>
<head>
<title>スタイルシート</title>
<STYLE TYPE="text/css">
P { text-decoration: underline}
</STYLE>
</head>
<body>
<P>Pタグは全て下線がでます。</P>
<SPAN>SPANは指定されていないので変化しません。</SPAN>
</body>
</html>
Pタグは全て下線がでます。
SPANは指定されていないので変化しません。
[HOME]