■スタイルシート辞典
種類はたくさんありますが必要なものはほんの少し。初めてのひとこそスタイルシートからはじめよう!
■ カラー(文字の色)
color: color ;
色は直接"red"(赤)と名前で指定したり"#ffffff"と指定する事が出来ます。
■ フォント(文字)
font-size: size ;
フォントの大きさを指定します。値はpt,px,emのいずれかで指定します。
font-style: style ;
フォントのスタイルをnormal(通常), italic(斜め)のいずれかで指定します。
font-weight: weight ;
フォントの太さを normal(通常), bold(太字)のいずれかで指定します。
■ ラインハイト(行間の高さ)
line-height: height ;
行間の高さをpt,px,emのいずれかで指定します。
body { line-height: 150%; }
■ マージン(外側の余白)
margin: size size size size ;
上下左右の外側の余白を一括して指定します。
margin-top: size ;
上の余白を指定します。
margin-right: size ;
右の余白を指定します。
margin-bottom: size ;
下の余白を指定します。
margin-left: size ;
左の余白を指定します。
■ パディング(内側の余白)
padding: size size size size ;
上下左右の内側の余白を一括して指定します
padding-top:
上の余白を指定します。
padding-right:
右の余白を指定します。
padding-bottom:
下の余白を指定します。
padding-left:
左の余白を指定します。
■ ボーダー(枠線)
border: width style color ;
上下左右の枠線を一括して指定します。width,style,colorは省略不可です。
普通の枠線はこれだけを憶えておくといいです。
<div style="border: 1px solid #000000;"></div>
border-top: width style color ;
上の枠線を一括して指定します。width,style,colorは省略不可です。
border-right: width style color ;
右の枠線を一括して指定します。width,style,colorは省略不可です。
border-bottom: width style color ;
下の枠線を一括して指定します。width,style,colorは省略不可です。
border-left: width style color ;
左の枠線を一括して指定します。width,style,colorは省略不可です。
■ ボーダー(枠線) - 枠線の太さ -
border-width: top right bottom left
上下左右の枠線の太さを一括して指定します。
border-top-width: width
上の枠線の太さを指定します。
border-right-width: width
右の枠線の太さを指定します。
border-bottom-width: width
下の枠線の太さを指定します。
border-left-width: width
左の枠線の太さを指定します。
枠線の太さをthin(細線),medium(規定値:中太線),thick(太線),1px(幅指定)のいずれかで指定します。
■ ボーダー(枠線)- 枠線のスタイル -
border-style: top right bottom left
上下左右の枠線のスタイルを一括して指定します。
border-top-style: style
上の枠線のスタイルを指定します。
border-right-style: style
右の枠線のスタイルを指定します。
border-bottom-style: style
下の枠線のスタイルを指定します。
border-left-style: style
左の枠線のスタイルを指定します。
枠線のスタイルを、none(線無し)、dotted(点線)、dashed(粗い点線)、solid(実線)、double(二重線)、groove(谷線)、ridge(山線)、inset(内線)、outset(外線)、inherit(継承)のいずれかで指定します。
■ ボーダー(枠線)- 枠線の色 -
border-color: top right bottom left
上下左右の枠線の色を一括して指定します。
border-top-color: color
上の枠線の色を指定します。
border-right-color: color
右の枠線の色を指定します。
border-bottom-color: color
下の枠線の色を指定します。
border-left-color: color
左の枠線の色を指定します。
枠線の色を名前(REDなど)または、RGB形式(#aa0000)のいずれかで指定します
■ ポジション(位置指定)
position: type ;
ポジションをstatic(規定値:本来の位置),relative(本来の位置からの相対位置指定),absolute(絶対位置指定),fixed(絶対位置に固定),inherit(継承)のいずれかで指定します。