※ここの解説は、後になるほど省略されている場合がありますのでできるだけ順番に読んでください。
■ 14.スタイル属性
スタイル属性は、それまでの装飾機能はタグ内に新しい属性を追加する方法で行われてきましたが、装飾機能についてはタグ専用の属性で指定するのをやめて、スタイル属性で指定するようにと、共通化がはかられ生まれたものです。
例えば、BODYタグの背景色や文字の背景色で、
<BODY STYLE="background: green">や
<SPAN STYLE="background-color: red">と
以前説明しましたが、これらがスタイル属性です。
それでは、スタイル属性にはどんなものがあるか記述してみましょう。
かなりたくさんあるのでいろんな指定ができますが、間違えないようにしてください。
また、ここに書ききれないものもたくさんあります。
詳しくは、このサイトの「CSS・デザイン･テンプレート関連のサイト」のリファレンスなどを参照してください。
《スタイル属性の構成要素》
| 行 | 記述例 | 説明 |
|---|---|---|
| ○ | background: red url(back0.gif) repeat fixed 10px 15px | 背景スタイルを一括指定します。 以下の背景スタイルを一括で指定することができます。 |
| ○ | background-color: red background-color: #FF0000 |
背景色を指定します。 |
| ○ | background-image: url(back0.gif) | 背景画像を指定します。 |
| ○ | background-repeat:
repeat background-repeat: repeat-x background-repeat: repeat-y background-repeat: no-repeat |
背景画像の繰り返しを指定します。 repeatは背景画像を上下左右方向に繰り返す場合に、（通常） repeat-xは背景画像を横方向のみに繰り返す場合に、 repeat-yは背景画像を縦方向のみに繰り返す場合に、 no-repeatは背景画像を１つだけ表示する場合に、指定します。 |
| ○ | background-attachment: scroll background-attachment: fixed |
背景画像を固定するかどうかを指定します。 scrollは背景画像を固定しません。（通常） fixedは背景画像を固定します。 |
| ○ | background-position: 100px 50px background-position: center background-position: left background-position: right background-position: top background-position: bottom |
背景画像の表示位置を指定します。 centerは中央、left、rightは左右の位置、top、bottomは上下の位置を指定します。 単位は、px（ピクセル）、pt（ポイント）、pc（パイカ）、cm（センチメートル）、mm（ミリメートル）、in（インチ）、em（基準書体の文字の高さ）、ex（基準書体の文字xの高さ）、%（指定タグの領域に対するパーセント）があります。 |
| ○ | width: 300px height: 200px |
タグ内の表示幅、表示高さを指定します。 単位は、前述の「背景画像表示位置の指定」と同じです。 |
| ○ | position: static position: absolute position: relative |
タグの表示位置の指定方法を指定します。 staticはHTMLの記述に従って、 absoluteは絶対座標（そのページの左上が原点）で、 relativeは相対座標（直前の指定位置が原点）で指定します。 |
| ○ | left: 10px top: 10px |
タグの表示位置を指定します。 leftは左からの位置、topは上からの位置を指定します。 単位は、前述の「背景画像表示位置の指定」と同じです。 この属性はこの上の「position: absolute」と一緒に使わなければ効果がありません。 |
| ○ | z-index: 1 | タグの表示順序を指定します。 大きい数ほど手前に表示されます。 この属性はこの上の「position: absolute」と一緒に使わなければ効果がありません。 |
| ○ | margin: 10px margin: 10px 10px 10px 10px |
指定タグの内側余白を一括で指定します。 左から順に上右下左の順で後ろから順に省略できます。 省略した場合は、上下や左右が同じになります。 パラメータがひとつのときは上下左右の余白を一括で指定します。 パラメータが４つのときは上右下左の順に余白を一括で指定します。 |
| ○ | margin-top: 10px margin-bottom: 10px margin-left: 10px margin-right: 10px |
指定タグの内側余白を指定します。 topは上側、bottomは下側、leftは左側、rightは右側余白の指定です。 |
| ○ | padding: 4px padding: 4px 4px 4px 4px |
枠内の余白を一括指定します。 左から順に上右下左の順で後ろから順に省略できます。 省略した場合は、上下や左右が同じになります。 パラメータがひとつのときは上下左右の余白を一括で指定します。 パラメータが４つのときは上右下左の順に余白を一括で指定します。 |
| ○ | padding-top: 8pt padding-bottom: 8mm padding-left: 1pc padding-right: 10% |
枠内の余白を指定します。 topは上側を、bottomは下側を、leftは左側を、rightは右側を指定します。 |
| ○ | border: 8px green double | 枠形式を一括指定します。 以下の枠形式のスタイルを一括で指定することができます。 |
| ○ | border-top-width: 8px border-bottom-width: 8px border-left-width: 8px border-right-width: 8px |
枠線の線幅を指定します。 単位は、前述の「背景画像表示位置の指定」と同じです。 それ以外に「thin（細線）」、「thick（太線）」、「medium（中線）」があります。 topは上側を、bottomは下側を、leftは左側を、rightは右側を指定します。 |
| ○ | border-top-color: white border-bottom-color: white border-left-color: white border-right-color: white |
枠線色を指定します。 topは上側を、bottomは下側を、leftは左側を、rightは右側を指定します。 |
| ○ | border-top-style: solid border-bottom-style: double border-left-style: groove border-right-style: ridge |
枠線のスタイルを指定します。 topは上側を、bottomは下側を、leftは左側を、rightは右側を指定します。 noneはなし、hiddenはなし、dottedは丸い点線、dashedは四角い点線、solidは実線、doubleは二重線、grooveはへこんだ感じの立体枠、ridgeとがった感じの立体枠、insetは枠内が沈んだ感じの立体枠、outsetは枠内が浮き出た感じの立体枠を指定します。 |
| ○ | border-width: 2px border-color: red border-style: solid |
それぞれ、枠線の線幅、枠線色、枠線のスタイルを一度に指定します。 上下左右の四辺が一度に指定できます。 |
| ○ | visibility: visible visibility: hidden |
表示状態を指定します。 visibleは表示を、hiddenは非表示を指定します。 |
| ○ | text-align: left text-align: center text-align: right |
行揃えを指定します。 leftは左揃え、centerは中央揃え、rightは右揃えを指定します。 |
| ○ | line-height: 10pt | 行高さを指定します。 単位は、前述の「背景画像表示位置の指定」と同じです。 |
| font-style: normal font-style: italic font-style: oblique |
文字形状を指定します。 normalは通常、italic、obliqueはイタリック体（斜体）を指定します。 |
|
| font-weight: lighter font-weight: normal font-weight: bold font-weight: bolder font-weight: 150 |
文字の太さを指定します。 lighterはより細く、normalは通常、boldは太字、bolderはより太くを指定します。 数字の場合は、100（最も細く）〜900（最も太く）までを100刻みとして太さを指定します。 |
|
| font-size: 12pt font-size: xx-small font-size: x-small font-size: small font-size: mideum font-size: large font-size: large font-size: x-large font-size: xx-large font-size: smaller font-size: larger |
文字サイズを指定します。 単位は、前述の「背景画像表示位置の指定」と同じです。 それ以外に、xx-small（超特小）、x-small（特小）、small（小）、medium（標準）、large（大）、x-large（特大）、xx-large（超特大）、smaller（より小さく）、larger（より大きく）の指定ができます。 |
|
| font-family: 'Ｏｓａｋａ','ＦＡゴシック','ＭＳゴシック' | 文字の書体を指定します。 複数指定するのは、相手のコンピュータにその書体がなかった場合の代わりの書体を指定します。 |
|
| color: blue color #0000FF |
文字色を指定します。 | |
| text-decoration: none text-decoration: underline text-decoration: line-through |
文字修飾を指定します。 noneは下線（アンダーライン）なし、underlineは下線（アンダーライン）、line-throughは取消線を指定します。 |
|
| letter-spacing: 2pt | 文字間隔を指定します。 単位は、前述の「背景画像表示位置の指定」と同じです。 |
|
| word-spacing: 2pt | 単語間の間隔を指定します。 単位は、前述の「背景画像表示位置の指定」と同じです。 |
|
| cursor: hand cursor: text cursor: wait cursor: help |
マウスポインタの形状を変更します。 default（標準）, hand（指）, move（移動）, e-resize（右）, ne-resize（右上）, nw-resize（左上）, n-resize（上）, se-resize（右下）, sw-resize（左下）, s-resize（下）, w-resize（左）, text（Ｉバー）, wait（砂時計）, help（？）が指定できます。 |
スタイル属性と設定値の区切りは : （コロン）で、各スタイル属性間の区切りは ; （セミコロン）で区切ります。
上記の「行」欄の「○」はブロックタグのみ可能でインラインタグでは使用できません。
<ブロックタグ>（行単位で指定されるタグ）
ADDRESS、BLOCKQUOTE、DIR、DL、FORM、H1〜H6、MENU、OL、PRE、PLAINTEXT、TABLE、UL、XMP
<インラインタグ>（文字単位で指定されるタグ）
A、B、BIG、BLINK、CITE、CODE、EM、FONT、I、INPUT、KBD、S、SAMP、SELECT、SMALL、STRIKE、STRONG、SUB、SUP、TEXTAREA、TD、TT、U、VAR
■ スタイル属性のサンプル
上記の各構成要素のサンプルをいくつか記述しておきます。
表組みをしなくても下記のようなサンプルが作成できます。
今まで、「HTMLの解説」を勉強されてきた皆さんには、もう、細かい説明は必要ないですね。
|
背景色:#99CCFF
太字 斜体 文字色:RED 文字背景色:#FF99FF 文字色:#0000FF <div style="line-height : 4ex;padding : 20px;border-width : 12pt;border-color : aqua;border-style : outset;background-color : #99CCFF;width : 240px;">背景色:#99CCFF<br> <span style="font-weight : bold;font-style : italic;color : red;">太字 斜体 文字色:RED</span><br> <span style="background-color: #FF99FF;color : blue;">文字背景色:#FF99FF 文字色:#0000FF</span> </div> |
|
背景に画像を埋め込み
文字背景色:#006600 文字色:#FFFFFF 文字背景色:#FFFFCC 文字色:#FF0066 <div style="text-align : center;border-width : 12pt;border-color : fuchsia;border-style : ridge;background-image :url(../../images/exp/renga0.gif);background-repeat : repeat;width : 300px;">背景に画像を埋め込み<br> <span style="background-color: #006600;color : white;">文字背景色:#006600 文字色:#FFFFFF</span><br> <span style="background-color: #FFFFCC;color : red;">文字背景色:#FFFFCC 文字色:#FF0066</span> </div> |
<DIV>タグは主に段落単位の修飾として使用されるタグです。
<SPAN>タグは主に文字単位の修飾として使用されるタグです。
今まで習ってきたタグはすべてそのタグに意味があります。
だから、単純に文字装飾だけを行いたい場合は、それらのタグが使用できませんので<DIV>タグか<SPAN>タグを使用します。