_/_/_/ ホームページ制作のためのメモ書き _/_/_/

< 戻る >

□□ CSS関連 □□

分類
TEXT
text-decoration 文字飾り設定
 
  OPTION
  機能
  none 飾り付け無し
  underline 下線をつける
  overline 上線をつける
  line-through 取消線をつける
  blink 文字を点滅させる
   

BOX
border-top-style
border-bottom-style
border-right-style
border-left-style
ボックスの枠線を個別に変更する
 
  OPTION
  機能
  none 表示しない(他の値に優先される)
  hidden 表示しない
  solid 1本線で表示
  double 2本線で表示
  groove へこんで見えるように表示
  ridge 飛び出して見えるように表示
  inset 枠の内側がへこんで見えるように表示
  outset 枠の内側が飛び出して見えるように表示
  dashed 破線で表示
  dotted 点線で表示
border-style ボックスの枠線のスタイルを一括変更する
【 TIPS 】
左から順番に、スタイルを右辺指定。
上辺・右辺・下辺・左辺 となり、
また省略することで、
上辺・左右辺・下辺などとなる。
  OPTION
  機能
  none 表示しない(他の値に優先される)
  hidden 表示しない
  solid 1本線で表示
  double 2本線で表示
  groove へこんで見えるように表示
  ridge 飛び出して見えるように表示
  inset 枠の内側がへこんで見えるように表示
  outset 枠の内側が飛び出して見えるように表示
  dashed 破線で表示
  dotted 点線で表示
border-top-color
border-bottom-color
border-right-color
border-left-color
ボックスの枠線の色を個別に指定する
【 TIPS 】
transparent =Win版のIEでは非動作
  OPTION
  機能
  #RRGGBB 色を16進数で2桁ずつ指定
  #RGB 色を16進数で1桁ずつ指定
  rgb(R,G,B) 各色を10進数で指定
  rgb(R%,G%,B%) 各色を%で指定
  カラーネーム 定義されている色名で指定
  システムカラー色 OSのシステムカラー色で指定
  transparent 枠線の色を透明に
border-color ボックスの枠線の色を一括変更する
【 TIPS 】
左から順番に、スタイルを右辺指定。
上辺・右辺・下辺・左辺 となり、
また省略することで、
上辺・左右辺・下辺などとなる。
  OPTION
  機能
  #RRGGBB 色を16進数で2桁ずつ指定
  #RGB 色を16進数で1桁ずつ指定
  rgb(R,G,B) 各色を10進数で指定
  rgb(R%,G%,B%) 各色を%で指定
  カラーネーム 定義されている色名で指定
  システムカラー色 OSのシステムカラー色で指定
  transparent 枠線の色を透明に
border-top-width
border-bottom-width
border-right-width
border-left-width
ボックスの枠線の太さを個別に指定する
【 TIPS 】
左辺の枠線のみを表示すると
行頭文字のように見せることができる。
  OPTION
  機能
  ピクセル値 太さを指定(px)
  thin 細い線を指定
  medium 中くらいの線
  thick 太い線
border-width ボックスの枠線の太さを一括指定する
【 TIPS 】
左から順番に、スタイルを右辺指定。
上辺・右辺・下辺・左辺 となり、
また省略することで、
上辺・左右辺・下辺などとなる。
  OPTION
  機能
  ピクセル値 太さを指定(px)
  thin 細い線を指定
  medium 中くらいの線
  thick 太い線
border-top
border-bottom
border-right
border-left
ボックスの枠線の辺ごとに一括指定する
【 TIPS 】
左から属性別に指定
値は、color・width・styleを参照
  OPTION
  機能
  #RRGGBB 色を16進数で2桁ずつ指定
  #RGB 色を16進数で1桁ずつ指定
  rgb(R,G,B) 各色を10進数で指定
  rgb(R%,G%,B%) 各色を%で指定
  カラーネーム 定義されている色名で指定
  システムカラー色 OSのシステムカラー色で指定
  機能
  ピクセル値 太さを指定(px)
  thin 細い線を指定
  medium 中くらいの線
  thick 太い線
  機能
  none 表示しない(他の値に優先される)
  hidden 表示しない
  solid 1本線で表示
  double 2本線で表示
  groove へこんで見えるように表示
  ridge 飛び出して見えるように表示
  inset 枠の内側がへこんで見えるように表示
  outset 枠の内側が飛び出して見えるように表示
  dashed 破線で表示
  dotted 点線で表示
border ボックスの枠線を一括指定する
【 TIPS 】
左から属性別に指定
値は、color・width・styleを参照
注)この属性を使って設定した場合、
それぞれの辺を個別に設定不可
  OPTION
  機能
  #RRGGBB 色を16進数で2桁ずつ指定
  #RGB 色を16進数で1桁ずつ指定
  rgb(R,G,B) 各色を10進数で指定
  rgb(R%,G%,B%) 各色を%で指定
  カラーネーム 定義されている色名で指定
  システムカラー色 OSのシステムカラー色で指定
  機能
  ピクセル値 太さを指定(px)
  thin 細い線を指定
  medium 中くらいの線
  thick 太い線
  機能
  none 表示しない(他の値に優先される)
  hidden 表示しない
  solid 1本線で表示
  double 2本線で表示
  groove へこんで見えるように表示
  ridge 飛び出して見えるように表示
  inset 枠の内側がへこんで見えるように表示
  outset 枠の内側が飛び出して見えるように表示
  dashed 破線で表示
  dotted 点線で表示
margin-top
margin-bottom
margin-right
margin-left
ボックス同士の間隔を設定する
【 TIPS 】
使用例として、背景画像の右側に
テキストを配置するなど
  OPTION
  機能
  実数値 マージンを数値で設定
  %値 マージンを親ボックスの横幅に対する割合で設定
  auto 自動設定する
margin ボックスを一括で設定する
【 TIPS 】
左から順番に、スタイルを右辺指定。
上辺・右辺・下辺・左辺 となり、
また省略することで、
上辺・左右辺・下辺などとなる。
  OPTION
  機能
  実数値 マージンを数値で設定
  %値 マージンを親ボックスの横幅に対する割合で設定
  auto 自動設定する
padding-top
padding-bottom
padding-right
padding-left
ボックスの枠と内容の間隔を設定する
【 TIPS 】
使用例として、画像を テキストの
左側に並べて配置するなど( 逆も可)
  OPTION
  機能
  実数値 パディングを数値で設定
  %値 パディングを親ボックスの横幅に対する割合で設定
padding パディング一括を設定する
【 TIPS 】
左から順番に、スタイルを右辺指定。
上辺・右辺・下辺・左辺 となり、
また省略することで、
上辺・左右辺・下辺などとなる。
  OPTION
  機能
  実数値 パディングを数値で設定
  %値 パディングを親ボックスの横幅
width
hright
ボックスの大きさを設定する
【 TIPS 】
IEでは、値「auto」にバグがあり
正常動作しない。
  OPTION
  機能
  実数値 ボックスの幅・高さを数値で設定
  %値 ボックスの幅・高さを親ボックスの横幅に対する割合で設定
  auto 高さや幅をブラウザに依存して設定する