スタイルシート


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;">項目１</UL>
表示例 ：
  • 項目１

■ 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;">項目１</UL>
表示例 ：
  • 項目１
タイプ ：
  • 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);">項目１</UL>
表示例 ：
  • 項目１

■ 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;">AbCdEfＡｂＣｄＥｆ</SPAN>
表示例 ： AbCdEfＡｂＣｄＥｆ

■ 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;">１行目<BR>２行目</SPAN><BR>
<SPAN style="line-height:10mm;">１行目<BR>２行目</SPAN>
表示例 ： １行目
２行目
１行目
２行目

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

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

１行目
２行目

３行目
４行目

■ 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 ｓａｍｐｌｅ</SPAN>
<SPAN style="text-transform:uppercase;">sample ｓａｍｐｌｅ</SPAN>
<SPAN style="text-transform:lowercase;">SAMPLE ＳＡＭＰＬＥ</SPAN>
表示例 ： 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)