HTML・スタイル

スタイルシート

★スタイルシートとは

スタイルシートとは、フォントやカラーやマージンなどを指定して、見栄えをよくするための定義です。
基本的には {プロパティ:オプション;} という形式で定義します。プロパティにはフォントやカラーなど指定し、オプションにはパラメータ（色や文字の種類など）を指定します。

スタイルシートはとても便利な機能ですが、問題点もいろいろあります。
ブラウザによってスタイルが表示されなかったり、見栄えが違ったりもするので注意が必要です。そのままだと、スタイルシートに対応していないブラウザですとスタイルの記述がそのまま表示されてしまいます。これを回避するには、設定部分をコメントにしておくという方法があります。
この文章の強調部分は、テキストファイルにスタイルシートを設定してありますが、
 のようにコメントアウトで記述してます。
スタイルシートには次の３つの設定方法があります。

インラインで設定する
スタイルを埋め込む
スタイルファイルを別の場所において読み込む
※<div> はブロック要素（前後に改行がはいる）として、<span> はインライン要素（前後に改行が入らない）として定義されています。

★インラインで設定するには

特定の部分だけに効果を与えたい場合に使います。

<SPAN STYLE="プロパティ：パラメータ">～</SPAN>

（A)例えばこの部分は青色です。
（B)ここはフォントを強調指定しました。行と行(A～B)の間隔を150％に拡大しました。

(A)例えばこの部分は<SPAN STYLE="color:blue">青色</SPAN>です。<BR>
<SPAN STYLE="line-height:150%">
(B)ここはフォントを<EM STYLE="font-weight:bold">強調指定</EM>しました。行と行（A～B）の間隔を150％に拡大しました。 </SPAN>

★スタイルを埋め込むには

《スタイルと設定》

<HTML>
<STYLE TYPE="text/css">
　　
　　
　　
</STYLE>

<BODY>
<P CLASS=red>ここは赤色です</BR>
ここも段落内なので赤です</P>
<P CLASS=green>ここは緑色です</P>
<P CLASS=indent30>30ピクセル字下げ</P>
</BODY>
</HTML>

ここは赤色です
ここも段落内なので赤です

ここは緑色です

30ピクセル字下げ

★スタイルファイルを読みこむには

別の場所にスタイルシートを記述したテキストファイルを作成し、必要に応じて読み込みます。

<HTML>
<HEAD>
<LINK REL=STYLESHEET HREF="study.css" TYPE="text/css">
</HEAD>

<BODY>
　　<P CLASS=bold>文字の強調</P>
</BODY>

study.css には、 P.bold{font-weight:bold;} のようにスタイルが書いてあります。次のような結果です。

文字の強調

★フォントを変更するには

プロパティ	オプション	意味
font-family	フォント名	フォントの種類を変更
font-style	normal、italic、oblique	部分的に斜体に
font-variant	normal、small-caps	小文字→大文字で表示
font-weight	normal、bold,bolder、lighter、100,200,300,400,500,600,700,800,900	文字の太さを変える
font-size	xx-small、x-small、small、mediium、large、x-large、 xx-large、larger、smaller、px、cm、pt、%	文字のサイズを変える

＜スタイル＞

<EM STYLE="font-style:normal">これは normal オプションです </EM >
<EM STYLE="font-style:italic">これは italic (斜体）オプションです</EM>
<EM STYLE="font-style:oblique";>oblique オプションも斜体です</EM>
<H3 STYLE="font-variant:small-caps;">title</H3>
<STYLE="font-weight:lighter">lighter 相対的な太さです</B>
<B STYLE="font-weight:bolder">bolder 相対的な太さです</B>
<B STYLE="font-weight:900">900(数値)を指定しています</B>
<P STYLE="font-size:12pt">この文字サイズは12ポイントです</P>

＜結果＞
これは normal オプションです
これは italic (斜体）オプションです
oblique オプションも斜体です
title
lighter 相対的な太さです
bolder 相対的な太さです
900(数値)を指定しています

この文字サイズは12ポイントです

★文字の色を変更するには

Color:colorname

<B STYLE="COLOR:brown">Color:colorname</b>

aqua	black	blue
gray	green	lime
maroon	navy	olive
purple	red	silver
teal	yellow	fuchsia

★細かい背景を設定するには

細かい背景を設定するにはbackground-colorプロパティを使います。BODY BGCOLOR タグと違ってブロックごとに色を指定することができます。
背景にイメージを指定するときにはbackground-imageプロパティを使います。

background-repeatプロパティは背景の絵柄が途切れたときの処理です。大きい画面に小さな絵柄を背景にした場合、小さい絵柄が画面いっぱいに敷き詰められますが、ここで値をno-repeat(サンプル1） にしておくと、絵柄は1枚だけしか表示されません。repeat-x (サンプル2）や repeat-y（サンプル3）で繰り返す方向を指定することができます。

サンプル1 <body style="background-repeat:no-repeat;background-image:url(../../illust/popy.gif)">

サンプル2 <body style="background-repeat:repeat-x;background-image:url(../../bg/heart_back02.jpg)">

サンプル3 <body style="background-repeat:repeat-y;background-image:url(image/bg-simple2b1.gif)">

《ソース》

<P STYLE="background-color:aqua;">段落の背景（水色）です</P>
<P STYLE="background-image:url(image/bg-simple2b1.gif)""段落の背景にイメージを使っています
表示されるのはこの段落だけです。</P>
<SPAN STYLE="background-image:url(image/bg-simple2b1.gif)">段落の背景にイメージを使っていますが
表示されるのは文章の部分だけです。</SPAN>

《結果》

段落の背景（水色）です

段落の背景にイメージを使っています
表示されるのはこの段落だけです。

段落の背景にイメージを使っていますが
表示されるのは文章の部分だけです。

★テーブルの枠線を設定するには

border-top-width:（thin、medium、thick、px、cm、pt）	上の枠線カッコ内はオプション
border-right-width:（〃）	右の枠線
border-bottom-width: （〃）	下の枠線
border-left-width:（〃）	左の枠線
border-width:（〃）	複数の組み合わせ

《ソース》
<table style="border-top-width : 1pt;border-left-width : 6px;border-right-width : 6px;border-bottom-width : 1pt; border-style : solid solid solid solid;border-color : purple purple purple purple;"> <tr><td>左右の枠線を太くしました。この枠スタイルは下記のとおりです。</td></tr> </table>

《結果》
左右の枠線を太くしました。この枠スタイルは下記のとおりです。

★枠線の種類を変更するには

border-top-style:（線の種類）	上の枠線の種類を設定
border-right-style:（〃）	右の枠線
border-bottom-style: （〃）	下の枠線
border-left-style:（〃）	左の枠線
border-style:（〃）	複数の組み合わせ

二重線（Double) この線種スタイル → border-bottom-width : medium; border-bottom-style : double;

くぼみ(Groove) この線種スタイル → border-bottom-width : medium; border-bottom-style : groove;

浮き出し(Ridge) この線種スタイル → border-bottom-width : medium; border-bottom-style : Ridge;

点線(Dotted) この線種スタイル → border-bottom-width : medium; border-bottom-style :Dotted;

破線(Dashed) この線種スタイル → border-bottom-width : medium; border-bottom-style :Dashed;

実線(Solid) この線種スタイル → border-bottom-width : medium; border-bottom-style : Solid;

インセット(Inset) この線種スタイル → border-bottom-width : medium; border-bottom-style : Inset;

アウトセット(Outset) この線種スタイル → border-bottom-width : medium; border-bottom-style : Outset;

★テキストの上下位置を調節するには

同じライン上の文字でも<SPAN style="vertical-align:sub;">上に移動したり</SPAN> <SPAN style="vertical-align:super;">下に移動したり</SPAN>できます。

《結果》

テキストの上下位置を調節するにはvertical-alignプロパティを使います。オプションはディフォルトでbaseline ですが、上に移動するには sub 、下に移動するには super を使います。
同じライン上の文字でも上に移動したり下に移動したりできます。

★文字間隔を調整するには

word-spacing

letter-spacing

《ソース》

１２３４５６７８９<br>
<SPAN STYLE="letter-spacing:+5px;">１２３４５６７８９</SPAN>

《結果》

１２３４５６７８９
１２３４５６７８９

★テキストに変化をつけるには

text-decoration

text-align

none リンクの下線削除 <a href="#aaa" style="text-decoration:none">リンクの下線削除</a>

underline アンダーライン style="text-decoration:underline"

overline オーバーライン style="text-decoration:overline"

line-through 取り消し線 style="text-decoration:line-through"

left 左寄せ style="text-decoration:line-through"

right 右寄せ style="ttext-align:right"

center 中央揃え style="text-align:center"

★テキストのインデントを設定するには

text-indent

text-transform

《ソース》

<DIV STYLE="text-indent:20pt">この段落は20ポイントのインデントです。</DIV>
<DIV STYLE="text-indent:20pt;text-transform:capitalize;">abcdefg 先頭文字を大文字にします。</DIV>
<DIV STYLE="text-indent:20pt;text-transform:uppercase;">abcdefg すべての英文字を大文字にします。</DIV>
<DIV STYLE="text-indent:20pt;text-transform:lowercase;">ABCDEFG すべての英文字を小文字にします。</DIV>

《結果》

この段落は20ポイントのインデントです。

abcdefg 先頭文字を大文字にします。

abcdefg すべての英文字を大文字にします。

ABCDEFG すべての英文字を小文字にします。

★テーブルの中のマージンを変えるには

padding

《ソース》

<TABLE BORDER>
<TR>
<TD STYLE="padding-left:10px;padding-right:10px;padding-top:20px;padding-bottom:20px;">
このサンプルは、テーブルと文字の余白が、左右10ピクセル、上下余白が20ピクセルです。
</TD>
</TR>
</TABLE>

《結果》

このサンプルは、テーブルと文字の余白が、左右10ピクセル、上下余白が20ピクセルです。

ヘッダー部分に次のようにスタイルを設定しておくと、表のセルがすべて同じ設定として使えます。
枠線と文字の間に少しの空きがあると見やすい表になります。

《スタイル》

<STYLE TYPE="text/css">

</STYLE>

《実行例》

ABC DEF GHI JKL

MNO PQR STU VQX

★ページの余白を変更するには

margin-top、margin-left、margin-right、margin-bottom

《ソース》
<body style="margin-top:100px;margin-left:50px;margin-right:50px;">

結果（サンプルページ）

★行間を変えるには

改行幅を変更するには、line-heightプロパティを使います。

この上の行間は50ピクセルの設定です。

《ソース》

<SPAN STYLE="line-height:150%">改行幅を変更するには、line-heightプロパティを使います。</SPAN><br> この上の行は150％の行間に変更してます。<br>
<SPAN STYLE="line-height:50px">この上の行間は50ピクセルの設定です。</SPAN>

サンプル1	<body style="background-repeat:no-repeat;background-image:url(../../illust/popy.gif)">
サンプル2	<body style="background-repeat:repeat-x;background-image:url(../../bg/heart_back02.jpg)">
サンプル3	<body style="background-repeat:repeat-y;background-image:url(image/bg-simple2b1.gif)">

none	リンクの下線削除	<a href="#aaa" style="text-decoration:none">リンクの下線削除</a>
underline	アンダーライン	style="text-decoration:underline"
overline	オーバーライン	style="text-decoration:overline"
line-through	取り消し線	style="text-decoration:line-through"
left	左寄せ	style="text-decoration:line-through"
right	右寄せ	style="ttext-align:right"
center	中央揃え	style="text-align:center"