基本形
緑字丸写しで数値をいじればスタイルシートの出来上がり。
class指定の.○○は分かりやすい好きな文字で…
body
背景に画像、文字色、文字サイズの指定。
画像のurlの後ろの( )は必要！追記という意味ではありません！！
body { background-image : url(画像ファイル名.拡張子) ;
background-attachment : 背景画像スクロールする？ ;
font-size : 基本文字のサイズ ;
color : 基本文字の色※英語かカラーコード }
p
p文字の色と太さを指定。
p { color : pの文字色※英語かカラーコード ;
font-weight : 文字の太さを変えてみようか }
h
h1の文字サイズと色を指定。
h1 { font-size : h1の文字サイズ ;
color : h1の文字色※英語かカラーコード }
h2の文字サイズと色を指定。
h2 { font-size : h2の文字サイズ ;
color : h2の文字色※英語かカラーコード }
h3の文字サイズと色を指定。
h3 { font-size : h3の文字サイズ ;
color : h3の文字色※英語かカラーコード }
h4の文字サイズと色を指定。
h4 { font-size : h4の文字サイズ ;
color : h4の文字色※英語かカラーコード }
h5の文字サイズと色を指定。
h5 { font-size : h5の文字サイズ ;
color : h5の文字色※英語かカラーコード }
h6の文字サイズと色と配置を指定。
h6 { font-size : h6の文字サイズ ;
color : h6の文字色※英語かカラーコード ;
text-align : h6の文字位置変えてみたり }
class
センタリング用クラス
.center { text-align : center }
右寄せ用クラス
.right { text-align : right }
色指定用クラス(白)※英語かカラーコード
.white { color : white }
色指定用クラス(赤)※英語かカラーコード
.red { color : red }
色指定用クラス(青)※英語かカラーコード
.blue { color : blue }
色指定用クラス(緑)※英語かカラーコード
.green { color : green }
色指定用クラス(オレンジ)※英語かカラーコード
.orange { color : orange }
取り消し線+色指定用クラス(赤)※英語かカラーコード
.del { text-decoration : line-through ;
color : red }
a
aテキストの指定
a:text { font-size : 12px ;
color : 文字色※英語かカラーコード }
aリンクの指定
a:link { color : 文字色※英語かカラーコード ;
text-decoration : 装飾指定 }
a待機中の指定
a:visited { color : 文字色※英語かカラーコード ;
text-decoration : 装飾指定 }
a訪問済みの指定
a:active { color : 文字色※英語かカラーコード }
aにカーソルを乗せた時の指定
a:hover { color : 文字色※英語かカラーコード ;
background-color : カーソルを乗せた時の該当文字の背景色だけ変えてみたり※英語かカラーコード }
table
テーブルのスタイル指定
.table1 { border : 線の太さ 線のスタイル 線の色※英語かカラーコード ;
border-spacing : 間隔 ;
width : テーブル全体の幅 }
テーブルのスタイル指定(例1)
.table2 { border : 4px solid white ;
width : 100px }
テーブルのスタイル指定(例2)
.table3 { border : 2px dotted blue ;
border-spacing : none ;
width : 100% }
tr
行のスタイル指定
.tr1 { border : 線の太さ 線のスタイル 線の色※英語かカラーコード ;
border-spacing : 間隔 ;
width : 行全体の幅 }
行のスタイル指定(例1)
.tr2 { border : 1px double maroon ;
border-spacing : 0px ;
width : 50px }
行のスタイル指定(例2)
.tr3 { border : 3px dashed green ;
border-spacing : 1px ;
width : 100px }
td
列のスタイル指定
.td1 { border : 線の太さ 線のスタイル 線の色※英語かカラーコード ;
border-spacing : 間隔 ;
width : 列全体の幅 }
列のスタイル指定(例1)
.td2 { border : 5px outset red ;
border-spacing : 2px ;
width : 200px }
列のスタイル指定(例2)
.td3 { border : 10px ridge lightyellow ;
border-spacing : 3px ;
width : 230px }
list
リストのスタイル指定(例1)
.list1 { list-style-type : disc }
リストのスタイル指定(例2)
.list2 { list-style-type : lower-alpha }
リストのスタイル指定(例3)
画像のurlの後ろの( )は必要！追記という意味ではありません！！
.list3 { list-style-image : url(画像ファイル名.拡張子) }
Copyright © 2009 NNHF All Rights Reserved.
