スタイルシート



border   margin   display   font
border-top margin-top position font-style
border-right margin-right top font-variant
border-bottom margin-bottom left font-weight
border-left margin-left bottom font-size
border-width padding right line-height
border-top-width padding-top float font-family
border-right-width padding-right clear text-indent
border-bottom-width padding-bottom z-index text-align
border-left-width padding-left direction text-decoration
border-style color unicode-bidi letter-spacing
border-top-style background width word-spacing
border-right-style background-color height text-transform
border-bottom-style   background-image vertical-align white-space
border-left-style background-repeat overflow table-layout
border-color background-attachment clip list-style
border-top-color visibility list-style-type
border-right-color cursor list-style-position
border-bottom-color list-style-image
border-left-color


■ color
説明 色を指定する。→色の指定方法
表記例 <SPAN style="color: #ff0000;">あいうえお</SPAN>
表示例 あいうえお


■ margin
説明
外側の余白の指定
2px 3em 5%など
margin:1px              上右下左
margin:1px 2px          上下 左右
margin:1px 2px 3px      上 左右 下
margin:1px 2px 3px 4px  上右下左
表記例 <img style="margin:10px 20px 30px 40px;" src="jimring.jpg">
表示例      ↓

     ↑


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

説明 外側の余白の個別指定
2px 3em 5%など
表記例 <SPAN style="margin-right:20px;">あいうえお</SPAN>←
表示例 あいうえお


■ padding
説明
内側の余白の指定
2px 3em 5%など
padding:1px 上右下左 padding:1px 2px 上下 左右 padding:1px 2px 3px 上 左右 下 padding:1px 2px 3px 4px 上右下左
表記例 <SPAN style="padding:10px 20px 30px 40px; border:1px solid #00ff00;">あいうえお</SPAN>
表示例
あいうえお




padding-top
padding-right
padding-bottom
padding-left

説明 内側余白の個別指定
2px 3em 5%など
表記例 <SPAN style="padding-right:20px;">あいうえお</SPAN>
表示例 あいうえお


■ border
説明 枠線の指定
太さ・スタイル・色を一度に指定する
border:width style color
表記例 <SPAN style="border:2px solid #00ff00;">あいうえお</SPAN>
表示例 あいうえお


border-top
border-right
border-bottom
border-left

説明 枠線の個別指定
太さ・スタイル・色を一度に指定する
border-xxx:width style color
表記例 <SPAN style="border-right:2px solid #00ff00;">あいうえお</SPAN>
表示例 あいうえお


■ border-width
説明 枠線の太さの指定
thin(細線) medium(中太線) thick(太線) 1px 2em
※thin medium thick はIEとNNで太さが違う。
※border-styleを指定しないと表示されない。
表記例 <SPAN style="border-width:thin medium thick 1px; border-style:solid;">あいうえお</SPAN>
表示例
あいうえお



border-top-width
border-right-width
border-bottom-width
border-left-width

説明 枠線の太さの個別指定
thin(細線) medium(中太線) thick(太線) 1px 2em
※指定しない部分は thin になる。
※thin medium thick はIEとNNで太さが違う。
※border-styleを指定しないと表示されない。
表記例 <SPAN style="border-top-width:1px; border-right-width:2px; border-style:solid;">あいうえお</SPAN>
表示例
あいうえお



■ border-style
説明 枠線のスタイルの指定
none(線無し) dotted(点線) dashed(粗い点線) solid(実線) double(二重線) groove(谷線) ridge(山線) inset(内線) outset(外線) inherit(継承)

dotted dashed solid double groove ridge inset outset

表記例 <SPAN style="border-style:solid;">あいうえお</SPAN>
表示例
あいうえお



border-top-style
border-right-style
border-bottom-style
border-left-style

説明 枠線のスタイルの個別指定
表記例 <SPAN style="border-top-style:dotted; border-right-style:solid;">あいうえお</SPAN>
表示例
あいうえお



■ border-color
説明
枠線の色の指定
border-color:red;                色の名前
border-color:#ff0000;            #RGB
border-color:#f00;               #RGB 
border-color:rgb(255, 0, 0);     rgb(R, G, B) 0〜255
border-color:rgb(100%, 0%, 0%);  rgb(R%, G%, B%)
表記例 <SPAN style="border-color:#00ff00; border-style:solid;">あいうえお</SPAN>
表示例
あいうえお



border-top-color
border-right-color
border-bottom-color
border-left-color

説明 枠線の色の個別指定
※指定しない部分も表示される。
表記例 <SPAN style="border-top-color:#ff0000; border-right-color:#0000ff; border-style:solid;">あいうえお</SPAN>
表示例
あいうえお



■ display
説明 表示方法の指定
inline(インライン要素) block(ブロック要素) list-item(リスト要素) none(表示しない)
表記例 「<SPAN style="display:inline;">inline</SPAN>」
「<SPAN style="display:block;">block</SPAN>」
表示例 inline
block


■ position
説明 位置指定の方法
static(本来の位置) relative(本来の位置からの相対位置指定) absolute(絶対位置指定) fixed(絶対位置に固定) inherit(継承)
top や left と組み合わせて使用。
表記例 →<SPAN style="position:relative; top:5px; left:50px;">★</SPAN>←
→<SPAN style="position:absolute; left:250px;">☆</SPAN>←
表示例



top
left
bottom
right

説明 上端、左端、下端、右端からの距離
auto(自動) 2px 3% inherit(継承)
positionと組み合わせて使用。
表記例 →<SPAN style="position:relative; top:5px; left:50px;">★</SPAN>←
→<SPAN style="position:absolute; left:250px;">☆</SPAN>←
表示例



■ float
説明 表示位置の指定
none(指定しない) left(左端) right(右端) inherit(継承)
right または left を指定すると、テキストがその周りを回り込むように表示されるようになる。回り込みを解除するには clear を使用する。
表記例 <TABLE border="1"><TR><TD width="200"><IMG style="float:right;" src="jimring.jpg"></TD></TR></TABLE>
表示例


■ clear
説明 float によるテキストの回り込みの解除方法
none(何もしない) left(左側の回りこみ解除) right(右側の回りこみを解除) both(両側の回りこみを解除)
表記例 <IMG style="float:left;" src="jimring.jpg">
<SPAN style="clear:none">解除前</SPAN>
<SPAN style="clear:left">解除後</SPAN>
表示例 解除前解除後


■ z-index
説明 要素同士が重なって表示される場合の重なりの順序の指定
数値が大きなものほど前面に表示される。
表記例 <IMG style="z-index:1; position:relative; left:0;" src="jimring.jpg">
<IMG style="z-index:3; position:relative; left:-30; top:10;" src="jimring.jpg">
<IMG style="z-index:2; position:relative; left:-110; top:20;" src="jimring.jpg">
表示例



direction
unicode-bidi

説明 文章の方向の指定
direction : ltr(左から右) rtl(右から左) inherit(継承)
unicode-bidi : normal(通常) bidi-override(direction を有効にする) embed(無効にする) inherit(継承)
表記例 <SPAN style="direction:rtl; unicode-bidi:bidi-override;">あいうえお</SPAN>
表示例 あいうえお


width
height

説明 横幅、高さの指定
2px 3% inherit(継承)
表記例 <img style="width:100; height:30;" src="jimring.jpg">
表示例


■ vertical-align
説明 縦方向の配置の位置
baseline(ベースラインあわせ) middle(中央あわせ) sub(下付き文字の位置) super(上付き文字の位置) text-top(テキストの上限あわせ) text-bottom(テキストの下限あわせ) top(上端あわせ) bottom(下端あわせ) inherit(継承)70% 2px
表記例 <span style="font-size:40px;">H<span style="vertical-align:sub; font-size:30px;">2</span>O</span>
<span style="font-size:40px;">X<span style="vertical-align:super; font-size:30px;">2</span></span>
表示例 H2O  X2
配置
Axy text-top baseline text-bottom

Axy top middle bottom

Axy super sub

Axy 200% 100% 0% -100%


■ overflow
説明 領域をはみ出した要素の扱いの指定
visible(表示する) hidden(隠す) scroll(スクロールバーで表示する) auto(自動) inherit(継承)
表記例 <SPAN style="font-size:40px; width:30px; height:30px; overflow:hidden">あ</SPAN>
表示例



■ clip
説明 表示範囲の指定
auto(自動) inherit(継承) rect(top1,left1,top2,left2)
position:absolute と併用したときのみ有効。
表記例 <SPAN style="font-size:50px; position:absolute; clip:rect(10px,40px,30px,20px);">あ</SPAN>
表示例



■ visibility
説明 表示するしないの指定
visible(表示する) hidden(表示しない) inherit(継承)
表記例 <SPAN style="visibility:visible;">あいうえお</SPAN>
表示例 あいうえお


■ list-style
説明 リストスタイルを一度に指定
list-style: type position image
表記例 <UL><LI style="list-style:disc inside;">項目1</UL>
表示例
  • 項目1


■ list-style-type
説明 <LI>タグで表示されるマーカーの形を指定
disc(黒丸)
circle(白丸)
square(四角)
decimal(1, 2, 3...)
lower-roman(i, ii, iii...)
upper-roman(I, II, III...)
lower-alpha(a, b, c...)
upper-alpha(A, B, C...)
decimal-leading-zero(01, 02, 03...)
lower-greek(α、β、γ...)
upper-greek(Α、Β、Γ...)
lower-latin(小文字ラテン文字)
upper-latin(大文字ラテン文字)
hebrew(ヘブライ数字)
armenian(アルメニア数字)
georgian(グルジア数字)
cjk-ideographic(一、二、三...)
hiragana(あ、い、う...)
katakana(ア、イ、ウ...)
hiragana-iroha(い、ろ、は...)
katakana-iroha(イ、ロ、ハ...)
none(なし)
inherit(継承)
表記例 <UL><LI style="list-style-type:disc;">項目1</UL>
表示例
  • 項目1
タイプ
  • disc
  • circle
  • square
  • decimal
  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha
  • decimal-leading-zero
  • lower-greek
  • upper-greek
  • lower-latin
  • upper-latin
  • hebrew
  • armenian
  • georgian
  • cjk-ideographic
  • hiragana
  • katakana
  • hiragana-iroha
  • katakana-iroha


■ list-style-position
説明 マーカーの位置の指定
outside(外側) inside(内側) inherit(継承)
inside を指定すると、リストアイテムの文章が折り返された時に、マーカー分の字下げが行われなくなる。
表記例 <UL><LI style="list-style-position:outside;">字下げが行なわれる</UL>
<UL><LI style="list-style-position:inside;">字下げが行なわれない</UL>
表示例
  • 字下げが行なわれる
  • 字下げが行なわれない


■ list-style-image
説明 <LI>タグで表示されるマーカーのイメージを指定
URL none(なし) inherit(継承)
表記例 <UL><LI style="list-style-image:url(bluemarker.gif);">項目1</UL>
表示例
  • 項目1


■ background
説明 背景の指定
color, image, repeat, attachment, position を一度に指定
順序は自由、省略も可能。
表記例 <SPAN style="background:url(jimringback.gif) no-repeat fixed 50% 50%;">あいうえお<BR>かきくけこ</SPAN>
表示例 あいうえお
かきくけこ


■ background-color
説明 背景色の指定
色の名前 transparent(透明色) inherit(継承)
表記例 <SPAN style="background-color:#0000ff;">あいうえお</SPAN>
表示例 あいうえお


■ background-image
説明 背景画像の指定
URL none(画像なし) inherit(継承)
表記例 <SPAN style="background-image:url(jimringback.gif);">あいうえお<BR>かきくけこ</SPAN>
表示例 あいうえお
かきくけこ


■ background-repeat
説明 背景画像の並べかたの指定
repeat(敷き詰める) repeat-x(横方向のみ並べる) repeat-y(縦方向のみ並べる) no-repeat(ひとつだけ表示する) inherit(継承)
表記例 <SPAN style="background-image:url(jimringback.gif); background-repeat:no-repeat;">あいうえお<BR>かきくけこ</SPAN>
表示例 あいうえお
かきくけこ


■ background-attachment
説明 ウィンドウのスクロールを動かした時の背景の動作
scroll(一緒にスクロールする) fixed(スクロールしない) inherit(継承)
表記例 <BODY style="background-image:url(jimringback.gif); background-attachment:fixed;">あいうえお<BR>かきくけこ・・・</SPAN>
※IFRAMEを使用しています。
表示例


■ font
説明 フォントの指定
style variant weight size height family を一度に指定。
height を指定する時は size とスラッシュ( / )で区切って指定する。
size と family 以外は省略可能。
です。fonttype には、現在のアイコンラベルやウィンドウメニューに現在使用されているフォントを示す値として caption, icon, menu, message-box, small-caption, status-bar のいずれかを指定します。CSS2 では inherit(継承)も指定可能です。
表記例 <SPAN style="font:italic bold 100%/150% serif">漢字カンジかんじ</SPAN>
表示例 漢字カンジかんじ


■ font-style
説明 斜体フォントの指定
normal(通常) italic(イタリック) oblique(斜め) inherit(継承)
italic は元々斜体のフォントを使用。obliqueは通常フォントを無理矢理斜体にして使用する。
表記例 <SPAN style="font-style:italic;">これがitalic</SPAN><BR>
<SPAN style="font-style:oblique;">これがoblique</SPAN>
表示例 これがitalic
これがoblique


■ font-variant
説明 アルファベットの大文字の指定
normal(通常) small-caps(大文字) inherit(継承)
アルファベットの小文字が<すこし小さめの>大文字で表示されるようになる。
表記例 <SPAN style="font-variant:small-caps;">AbCdEfAbCdEf</SPAN>
表示例 AbCdEfAbCdEf


■ font-weight
説明 フォントの太さの指定
normal(規定値) bold bolder lighter 100 200 300 400 500 600 700 800 900
表記例 <SPAN style="font-weight:bold;">これがbold</SPAN>
表示例 これがbold
太さ これがbold これがbolder これがlighter これが100 これが200 これが300 これが400 これが500 これが600 これが700 これが800


■ font-size
説明 フォントの大きさの指定
絶対指定:xx-small x-small small medium large x-large xx-large
相対指定:larger smaller
絶対単位指定:10in 10cm 10mm 10pt 10pc
相対単位指定:10px 10ex 10em
割合指定:120%
表記例 <SPAN style="font-weight:bold;">これがbold</SPAN>
表示例 これがlarge
太さ これがxx-small これがx-small これがsmall これがmedium これがlarge これがx-large
これがlarger これがsmaller
これが0.2in これが0.5cm これが5mm これが10pt これが1pc これが10px これが2ex これが2em これが150%


■ line-height
説明 テキストの高さの指定
1.5em, 150% など。
行間をあけて、読みやすい文章を記述するような場合に使用。
表記例 <SPAN style="line-height:5mm;">1行目<BR>2行目</SPAN><BR>
<SPAN style="line-height:10mm;">1行目<BR>2行目</SPAN>
表示例 1行目
2行目

1行目
2行目


■ font-family
説明 フォントの指定
フォント名 serif, sans-serif, cursive, fantasy, monospace inherit(継承)
カンマ(,)で複数記述すると、指定したフォントが無ければ次のフォントが採用される。
スペースを含むフォントは "Times New Roman" のように "..." か '...' で囲む。
表記例 <SPAN style="font-family:'MS 明朝';">MS 明朝</SPAN>
表示例 MS 明朝
これがserif これがsans-serif これがcursive これがfantasy これがmonospace


■ text-indent
説明 テキストの最初の1行のインデント(字下げ)の指定
10px 10% inherit(継承)
表記例 <P style="text-indent:10px;">1行目<BR>2行目</P>
<P style="text-indent:20px;">3行目<BR>4行目</P>
表示例

1行目
2行目

3行目
4行目



■ text-align
説明 テキストの配置の指定
left(左寄せ) right(右寄せ) center(中央) justify(両端揃え) inherit(継承)
ブロック要素に対して有効。
表記例 <DIV style="background-color:#000080; width:200; text-align:center;">center</DIV>
<DIV style="background-color:#000080; width:200; text-align:right;">right</DIV>
<DIV style="background-color:#000080; width:200; text-align:justify;">justify</DIV>
表示例
center
right
justify


■ text-decoration
説明 テキストの装飾の指定
none(何もなし) underline(下線) overline(上線) line-through(打ち消し線) blink(点滅) inherit(継承)
複数指定も可能。
表記例 <DIV style="background-color:#000080; width:200; text-align:center;">center</DIV>
<DIV style="background-color:#000080; width:200; text-align:right;">right</DIV>
<DIV style="background-color:#000080; width:200; text-align:justify;">justify</DIV>
表示例 下線が引かれる
装飾例 underline overline line-through blink


■ letter-spacing
説明 各文字間のスペースの指定
normal(規定値) 2px inherit(継承)
表記例 <SPAN style="letter-spacing:10px;">文字間が空く</SPAN>
表示例 文字間が空く


■ word-spacing
説明 各単語間のスペースの指定
normal(規定値) 2px inherit(継承)
表記例 <SPAN style="word-spacing:10px;">単語1 単語2 単語3</SPAN>
表示例 単語1 単語2 単語3


■ text-transform
説明 大文字、小文字変換
capitalize(各単語の最初の文字を大文字にする) uppercase(すべて大文字にする) lowercase(すべて小文字にする) none(何もしない) inherit(継承)
表記例 <SPAN style="text-transform:capitalize;">sample sample</SPAN>
<SPAN style="text-transform:uppercase;">sample sample</SPAN>
<SPAN style="text-transform:lowercase;">SAMPLE SAMPLE</SPAN>
表示例 sample sample
sample sample
SAMPLE SAMPLE


■ white-space
説明 要素の中の空白の扱い
normal(通常) pre(自動改行しない、空白はそのまま) nowrap(自動改行しない、空白はつめる) inherit(継承)
表記例
<SPAN style="width:100; white-space:normal;">あいうえお   かきくけこ</SPAN>
<SPAN style="width:100; white-space:pre;">あいうえお   かきくけこ</SPAN>
<SPAN style="width:100; white-space:nowrap;">あいうえお   かきくけこ</SPAN>
表示例 あいうえお かきくけこ
あいうえお かきくけこ
あいうえお かきくけこ


■ table-layout
説明 テーブルのレイアウト方法の指定
auto(自動) fixed(固定) inherit(継承)
fixed を指定すると、テーブルの横幅をテーブルの内容に関わらず固定することができる。
表記例 <TABLE border=1 style="table-layout:fixed; width:100px;">
<TR><TD>あいうえお</TD></TR>
<TR><TD>かきくけこさしすせそ</TD></TR>
</TABLE>
表示例
あいうえお
かきくけこさしすせそ


■ cursor
説明 要素にマウスを乗せたときの、マウスカーソルの形状の指定
auto(自動) crosshair(十字印) default(通常のもの) pointer(ポインタ) move(移動用) e-resize(右リサイズ) ne-resize(右上リサイズ) nw-resize(左上リサイズ) n-resize(上リサイズ) se-resize(右下リサイズ) sw-resize(左下リサイズ) s-resize(下リサイズ) w-resize(左リサイズ) text(テキスト選択) wait(待ち) help(ヘルプ) inherit(継承) URL指定
表記例 <SPAN style="cursor:crosshair;">十字印になる</SPAN>
表示例 十字印になる
crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help url(stopwtch.ani)