ＨＴＭＬタグ講座

[Home] [-5] [<] [>] [+5]

スタイルシート３　応用サンプル

スタイルシートを利用して作成したサンプルの紹介です。

【フォントの指定】

スタイルシートを利用するとフォントの大きさや太さを細かく指定できます。
以下の例では28ポイントの太字にした例です。

　<SPAN STYLE="font-size: 28pt ; font-weight: bold; ">北海道</SPAN>　
北海道
特にアルファベットでは、フォントファミリを指定することで、フォントを細かく指定できます。
フォントファミリにはフォント名を直接記入することもできますが、OSによってフォント名が異なったり、同じOSでも見る側にインストールされていないフォントがある場合は反映されない場合があります。

　<SPAN STYLE="font-family: serif; font-size: 24pt ;">Hokkaido</SPAN>　
Hokkaido
　<SPAN STYLE="font-family: sans-serif; font-size: 24pt ;">Hokkaido</SPAN>　
Hokkaido
　<SPAN STYLE="font-family: cursive; font-size: 24pt ;">Hokkaido</SPAN>　
Hokkaido
　<SPAN STYLE="font-family: fantasy; font-size: 24pt ;">Hokkaido</SPAN>　
Hokkaido
　<SPAN STYLE="font-family: monospace; font-size: 24pt ;">Hokkaido</SPAN>　
Hokkaido

【テキストの指定】

ブラウザの設定によってはリンクに下線が付きますが、これを強制的に消去することができます。
ヘッダ内で<STYLE TYPE="text/css">  </STYLE>としておけば、すべてのリンクの下線を消すことができます。

　<A HREF="00.html" STYLE="text-decoration: none; ">ホームに戻ります</a>　
ホームに戻ります
インデント（左端からの字下げ）を長さで指定します。
この例ではインデントを80pt（約28mm）にしています。また、行間を1.5倍にしています。

　<DIV STYLE="text-indent: 80pt; line-height: 150%;">～</DIV>　

インデントとはウインドウまたはフレームの枠から文頭までの余白のことです。第１行目にだけ適用されます。２行目以降には通常の余白の位置になります。
「P」や「DIV」などのブロック単位で使用されるタグにのみ有効です。

【ボックスの指定】

ボックスの指定によって、画像やテーブル、段落などの枠・余白・回り込みなどの指定ができます。
HTMLタグではできなかった段落への指定をしたり、上下左右に別個に指定をしたりできます。

　<DIV STYLE="margin: 5pt 10%; border-width: 0pt 5pt; padding: 0pt 20pt; border-style: solid; border-color: #369; ">

この段落は、マージン（余白）を上下に5pt、左右に10%ずつとり、枠線の太さは上下0pt、左右5ptとし、枠と文章の間は上下は0pt、左右は20ptにして、平面状の枠で色は#369としています。

枠を画像に使った例です。

　<IMG SRC="pic/29m.gif" STYLE="border-width: 10pt 5pt; padding: 0pt; border-style: inset; border-color: #369; ">

【背景の指定】

背景の指定は、HTMLタグでは画像は常にタイル状に繰り返して敷き詰められていましたが、この繰り返し方を指定することができます。
下の例では縦方向にだけ繰り返す背景として指定しています。無駄に大きな画像を用意する必要がありません。

　BODY {background-image: url(p/562.gif); background-repeat: repeat-y; }　
上のサンプルはこちら
また、ボックスとして認識できるものには背景を指定することができます。

　<DIV STYLE="background-image: url(p/563.gif); ">　

通常の文章にも背景を指定できることがあります