頻繁に使うスタイルシート一覧

頻繁に使うスタイルシート一覧

文章全般

・　color:

文字の色をカラーナンバーまたは色名

・　text-align:

文字の左寄せ右寄せセンタリングをleft,right,center,justifyで指定

・　text-decoration:

文字のアンダーライン、打消し線等をnone,underline,overline,line-through,blinkで

・　line-height:

行の高さ（行間）

・　letter-spacing:

文字間の幅

・　text-transform:

大文字小文字の指定をnone,capitalize,lowercase,uppercaseで

・　text-indent:

テキストの一行目のインデント幅を数値＋単位（省略はpx）で

ＢＯＸの形状と装飾

・　width:

ボックスの横幅を数値＋単位（省略はpx）、％値、autoで

・　height:

ボックスの縦幅を数値＋単位（省略はpx）、％値、autoで

・　margin-top,margin-bottom,margin-left,margin-right:

上下左右のマージンを数値＋単位（省略はpx）、％値、autoで

・　margin:

マージンの一括指定で必要な値をスペースで区切って指定　

・　padding-top,padding-bottom,padding-left,padding-right:

上下左右のパディングを数値＋単位（省略はpx）、％値、autoで

・　padding:

パディングの一括指定で必要な値をスペースで区切って指定

・　border-top-color,border-bottom-color,border-left-color,border-right-color:

上下左右のボーダー色をカラーナンバー、色名、transparent（透明）で

・　border-color:

ボーダー色の一括指定で必要な値をスペースで区切って指定

・　border-top-width,border-bottom-width,border-left-width,border-right-width:

上下左右のボーダーの太さを数値＋単位（省略はpx）またはthin,medium,thickで

・　border-width:

ボーダーの太さの一括指定で必要な値をスペースで区切って指定

・　border-top-style,border-bottom-style,border-left-style,border-right-style:

上下左右のボーダーの形状をnone,hidden,solid,double,groove,ridge,inset,outset,dashed,dottedで

・　border-style:

ボックスの枠線の形状をnone,hidden,solid,double,groove,ridge,inset,outset,dashed,dottedで

・　border-top,border-bottom,border-left,border-right:

上下左右のそれぞれのボーダーの色、太さ、形式を設定

・　border:

ボックスの上下左右ボーダーの色、太さ、形式一括指定で、必要な値をスペースで区切って指定

表示形式と位置

・　display:

要素の表示形式をnone,block,inlineで

・　position:

top、left、z-indexなどの指定方法をstatic、relative、absolute、fixedで

・　top,bottom,left,right:

上下左右からの位置を数値＋単位（省略はpx）、％値、autoで

・　z-index:

奥行きを数値＋単位（省略はpx）、autoで

・　float:

文字の回り込みの設定をleft,right,noneで

・　clear:

文字の回り込みを解除をleft,rightで

・　overflow:

表示しきれない部分の処理をvisible,hidden,scroll,autoで

・　visibility:

可視不可視をvisible,hidden,collapseで

・　clip:

表示する範囲をrect(上辺,右辺,下辺,左辺) で指定（左上からのピクセル値）position:absoluteと併用して使用

フォント（文字）

・　font-family:

フォント名、「,」で区切って複数指定可能、font-family: "ＭＳ Ｐ明朝";など

・　font-size:

フォントサイズを数値＋単位（省略はpx）で指定

・　font-weight:

フォントの太さを数値＋単位（省略はpx）やnormal,bold,lighter,bolderなどで指定

・　font-style:

フォントのスタイルをnormal,italic,obliqueなどで指定

・　font-variant:

フォントの小文字を大文字にする

・　font:

フォントの一括指定で必要な値をスペースで区切って指定

要素の背景

・　background-color:

背景色をカラーナンバー、色名、transparent（透明）で

・　background-image:

背景画像をurl()関数で画像URIを指定background-image:url("～.jpg");など

・　background-repeat:

背景画像のリピート方法repeat（全面）repeat-x(横）repeat-y（縦）no-repeat（一つ）

・　background-position:

背景画像の開始位置left,right,top,bottom,center、または数値か％値で横方向値と縦方向値を空白で区切る

・　background-attachment:

背景画像のスクロール方法をfixed（固定）、scroll（スクロール）

・　background:

背景の一括指定で必要な値をスペースで区切って指定

表の仕様

・　table-layout:

テーブルの表示方法をfixedかautoで

・　border-collapse:

セルのボーダーの表示方法をcollapseかseparateで

・　border-spacing:

セルのボーダーの上下左右の間隔を数値＋単位（省略はpx）で

・　vertical-align:

インライン要素やTH、TD要素の表示される行の中での縦方向の位置

リストの仕様

・　list-style-image:

リストの見出し画像をurl()関数で画像URIを指定list-style-image:url("～.jpg");など

・　list-style-position:

リスト項目の二行目以降のインデントをoutside,insideで

・　list-style:

リストの一括指定で必要な値をスペースで区切って指定

カーソル

・　cursor:

カーソルの形状をcrosshair（十字型）pointer（リンク）move（移動）text（l）wait（砂時計）他で