トップ > HTMLの解説

※ここの解説は、後になるほど省略されている場合がありますのでできるだけ順番に読んでください。

■ 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は背景画像を1つだけ表示する場合に、指定します。
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
タグの表示位置の指定方法を指定します。
staticHTMLの記述に従って、
absoluteは絶対座標(そのページの左上が原点)で、
relativeは相対座標(直前の指定位置が原点)で指定します。
left: 10px
top: 10px
タグの表示位置を指定します。
leftは左からの位置、topは上からの位置を指定します。
単位は、前述の「背景画像表示位置の指定」と同じです。
この属性はこの上の「position: absolute」と一緒に使わなければ効果がありません。
z-index: 1 タグの表示順序を指定します。
大きい数ほど手前に表示されます。
この属性はこの上の「position: absolute」と一緒に使わなければ効果がありません。
margin: 10px
margin: 10px 10px 10px 10px
指定タグの内側余白を一括で指定します。
左から順に上右下左の順で後ろから順に省略できます。
省略した場合は、上下や左右が同じになります。
パラメータがひとつのときは上下左右の余白を一括で指定します。
パラメータが4つのときは上右下左の順に余白を一括で指定します。
margin-top: 10px
margin-bottom: 10px
margin-left: 10px
margin-right: 10px
指定タグの内側余白を指定します。
topは上側、bottomは下側、leftは左側、rightは右側余白の指定です。
padding: 4px
padding: 4px 4px 4px 4px
枠内の余白を一括指定します。
左から順に上右下左の順で後ろから順に省略できます。
省略した場合は、上下や左右が同じになります。
パラメータがひとつのときは上下左右の余白を一括で指定します。
パラメータが4つのときは上右下左の順に余白を一括で指定します。
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: 'Osaka','FAゴシック','MSゴシック' 文字の書体を指定します。
複数指定するのは、相手のコンピュータにその書体がなかった場合の代わりの書体を指定します。
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(Iバー), 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>タグを使用します。


page update:2010/01/23 20:32

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom