スタイルシートの確認所

「ふりーリンク」「さんくすリンク」（リンク集 無料レンタル）でスタイルシートを使用するための事前テスト場です。 下のスタイルシートのサンプルを修正し、プレビューで確かめた後、使用して下さい。 [プレビュー] [初期状態に戻す] 下の内容を修正し、スタイルシートの確認所（オブジェクト）を変更できます オブジェクトに「class=style1」を指定します

[名前の付いている色の一覧] [HTMLタグの確認所]

■　スタイルシートでの単位

位置・大きさ・距離を表わす単位は次ものが有ります

px	ピクセル
em	フォントの高さ
ex	小文字の｢x｣の高さ
pt	ポイント
in	インチ
cm	センチ
%	全体に対する割合

■　配置の基準位置

◆ position:基準位置;

　「基準位置」は次ものが有ります

relative	本来の位置からの相対位置で指定
absolute	外側要素からの絶対位置で指定

■　位置

◆ top:上;

◆ left:左;

■　大きさ

◆ width:幅;

◆ height:高さ;

■　[margin][padding][border] の概要

■　外側余白

◆ margin:上 右 下 左;

　次の「margin-top」「margin-right」「margin-bottom」「margin-left」をまとめて指定できます

　「上右下左」は時計回りで１２時より４つの指定をします

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:は上=右=下=左として指定、次の４つをまとめてできる訳ではありません

◆ 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:左;