スタイルシートの確認所

ふりーリンク」「さんくすリンク」(リンク集 無料レンタル)でスタイルシートを使用するための事前テスト場です。
下のスタイルシートのサンプルを修正し、プレビューで確かめた後、使用して下さい。

[プレビュー] [初期状態に戻す]
下の内容を修正し、スタイルシートの確認所(オブジェクト)を変更できます
オブジェクトに「class=style1」を指定します
[名前の付いている色の一覧] [HTMLタグの確認所]


■ スタイルシートでの単位
位置・大きさ・距離を表わす単位は次ものが有ります
pxピクセル
emフォントの高さ
ex小文字の「x」の高さ
ptポイント
inインチ
cmセンチ
%全体に対する割合
■ 配置の基準位置
◆ position:基準位置;
 「基準位置」は次ものが有ります
relative本来の位置からの相対位置で指定
absolute外側要素からの絶対位置で指定
■ 位置
◆ top:上;
◆ left:左;
■ 大きさ
◆ width:幅;
◆ height:高さ;
■ [margin][padding][border] の概要

[margin][padding][border] の概要
■ 外側余白
◆ margin:上 右 下 左;
 次の「margin-top」「margin-right」「margin-bottom」「margin-left」をまとめて指定できます
 「上右下左」は時計回りで12時より4つの指定をします
margin:1px 2pt 3in 4cm;/* 上=1px 右=2pt 下=3in 左=4cm となります */
 省略した場合次のようになります
margin:1;/* 上右下左=1px となります */
margin:1px 2pt;/* 上下=1px 右左=2pt となります */
margin:1px 2pt 3in;/* 上=1px 右左=2pt 下=3in となります */
◆ margin-top:上;
◆ margin-right:右;
◆ margin-bottom:下;
◆ margin-left:左;
■ 内側余白
◆ padding:上 右 下 左;
 次の「上右下左」をまとめて指定できます、詳細は「margin:上 右 下 左;」を参照して下さい
◆ padding-top:上;
◆ padding-right:右;
◆ padding-bottom:下;
◆ padding-left:左;
■ 枠線
◆ border: width style color;
  widthは線幅です、スタイルシートでの単位に加え、thin(細線)medium(中線)thick(太線)が可能です
  styleは線種です、次ものが有ります
solid実線
double二重線
groove谷線
ridge山線
inset凹線
outset凸線
dotted点線
dashed破線
  colorは色指定です、名前の付いている色の一覧を参照して下さい
  注.border:は上=右=下=左として指定、次の4つをまとめてできる訳ではありません
◆ border-top: width style color;
◆ border-right: width style color;
◆ border-bottom: width style color;
◆ border-left: width style color;

◆ border-width:上 右 下 左;
 次の「上右下左」をまとめて指定できます、詳細は「margin:上 右 下 左;」を参照して下さい
◆ border-top-width:上;
◆ border-right-width:右;
◆ border-bottom-width:下;
◆ border-left-width:左;

◆ border-style:上 右 下 左;
 次の「上右下左」をまとめて指定できます、詳細は「margin:上 右 下 左;」を参照して下さい
◆ border-top-style:上;
◆ border-right-style:右;
◆ border-bottom-style:下;
◆ border-left-style:左;

◆ border-color:上 右 下 左;
 次の「上右下左」をまとめて指定できます、詳細は「margin:上 右 下 左;」を参照して下さい
◆ border-top-color:上;
◆ border-right-color:右;
◆ border-bottom-color:下;
◆ border-left-color:左;