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

◆文章全般

  ・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)で

◆BOXの形状と装飾

  ・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:

 topleftz-indexなどの指定方法をstaticrelativeabsolutefixed

  ・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: "MS P明朝";など

  ・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:

 テーブルの表示方法をfixedauto

  ・border-collapse:

 セルのボーダーの表示方法をcollapseseparate

  ・border-spacing:

 セルのボーダーの上下左右の間隔を数値+単位(省略はpx)で

  ・vertical-align:

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

◆リストの仕様

  list-style-image:

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

  ・list-style-position:

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

  ・list-style:

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

◆カーソル

  ・cursor:

 カーソルの形状をcrosshair(十字型)pointer(リンク)move(移動)textl

 wait(砂時計)他で

 以上です。

 自分のメモ用に掲載しています。


                             memoコーナーへ