コピーして作る、HTML+CSS

さいてーげんのスタイル一覧

検索でこのページだけ表示されてしまった人は、こちら、 フレーム表示

タグの指定
タグ { 〜 }

複数のタグの指定
タグ,タグ,タグ…… { 〜 } /* タグとタグの間はカンマ */

名前をつける
.名前 { 〜 } /* 名前の前はピリオド */

タグを指定して名前をつける
タグ.名前 { 〜 } /* タグ ピリオド　名前 */

/*** 内容の左右の位置 ***/
text-align:left; /* 左寄せ:left , 中央:center , 右寄せ:right */

/*** 内容の上下の位置 ***/
vertical-align:top; /* 上:top 中:middle 下:bottom */

/*** 行間 ***/
line-height:170%; /* 数値＋単位 */

/*** 文字の色 ***/
color:MAROON; /* 色名ないし、色コード */

/*** 文字の字体(フォント) ***/
font-family:hg創英角ﾎﾟｯﾌﾟ体; /* フォント名 */

/*** 文字の大きさ ***/
font-size:16pt; /* 数値＋単位 */

/*** 背景の色 ***/
background-color:#ffe0e0; /* 色名ないし、色コード */

/*** 背景の画像 ***/
background-image:url(****.*** ); /* 画像あり:ファイル名 画像なし:none*/

/*** 背景画像の並べ方 ***/
background-repeat:repeat; /* 全面:repeat , 横一列:repeat-x , 縦一列:repeat-y , 一つ:no-repeat */

/*** 背景画像の位置 ***/
background-position:left top; /* 上:top , 下:bottom , 中央:center , 左:left , 右:right */

/*** 背景画像の固定 ***/
background-attachment:fixed;

/*** リンクの設定 ***/
A:LINK {COLOR:#000080;background-color:yellow;} /* 未参照 */
A:VISITED {COLOR:#000080;background-color:red;}/* 参照済み */
A:HOVER {COLOR:#da0b00;background-color:yellow;}/* マウスオーバー時 */
A:FOCUS {COLOR:#da0b00;background-color:red;}/* クリック時 */
/* 文字の色、文字の大きさ、字体、背景の色など
フォント名 色名ないし、色コード */

/*** 全ての枠線 ***/
border:solid 3px blue; /* 枠の種類 太さ(数値＋単位) 色(色名ないし、色コード) */

/*** 個別の枠線 ***/
border-top:solid 3px #ffc0c0; /* 枠線上 */
border-left:solid 3px #e0ffc0; /* 枠線左 */
border-right:solid 3px #c0ffff; /* 枠線右 */
border-bottom:solid 3px #c0c0ff; /* 枠線下 */
/* 枠の種類 太さ(数値＋単位) 色(色名ないし、色コード) */

/*** 枠の外側の余裕 ***/
margin:2px; /* 数値＋単位 */
margin:0px 1px 5px 3px; /* 上　右　下　左 数値＋単位 */

/*** 枠の内側の余裕 ***/
padding:5px; /* 数値＋単位 */
padding:0px 1px 5px 3px; /* 上　右　下　左 数値＋単位 */

/*** 幅 ***/
width:800px; /* 数値＋単位 */

/*** 高さ ***/
height:500px; /* 数値＋単位 */