スタイルシートサンプル集

HOME > スタイルシート > スタイルシートサンプル集

■ 文字のサイズを変更する

<font size=" とは違い細かく指定が出来ます。

指定単位(in,cm,mm,pt,pc,px,em,ex,%,など)

<P STYLE="font-size:150%">150%で指定しました。</P>

150%で指定しました。

■ 文字の太さを変更する
<P STYLE="font-weight:bolder">より太く表示する。</P>

より太く表示する。

■ 文字をイタリック/斜体にする
<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]