よく使うＣＳＳ講座

◆マージン指定
マージンとは、ボックス要素の外側と隣接する親要素（たとえば、ＨＰ全体の枠など）との間隔のことです。
わかりやすく言えば、一つのテーブルがあったとして、このテーブルをＨＰの上の端からどのぐらい離すか・・とか、左からどのぐらい離すかとか、ピッタリくっつけるとかの指定をすると思ってください。
※<STYLE type="text/css"></STYLE>は省いて記述しています。

margin-top : ★;　　　　　　　（上側・★はキーワード、数値＋単位、％）
margin-right : ★;　　　　　　（右側・★はキーワード、数値＋単位、％）
margin-bottom : ★;　　　　（下側・★はキーワード、数値＋単位、％）
margin-left : ★;　　　　　　　（左側・★はキーワード、数値＋単位、％）
キーワード
auto　　　　　　　　（ブラウザ自動設定）
数値＋単位はこちらを参考にしてください。
％は親要素に対しての割合でマージンを指定します。

◆マージン一括指定

margin : ★;　　　　　　　　　　　（上下左右同じ）
margin : ★　★;　　　　　　　　（上下、左右別）
margin : ★　★　★;　　　　　　（上、左右、下別）
margin : ★　★　★　★;　　　（上、右、下、左別）
※指定の順番は崩せませんので注意。指定は上と同じ。
一番上は、すべてのマージンを同じで指定。
二番目は、上下と左右のマージンが違う指定。
三番目は、上、左右、下のマージンがそれぞれ違う指定。
四番目は、すべてを個別で指定する時に使います。

ページトップへ

◆パディング指定
パディングとは、上のマージンとは逆にボックス内の領域を指定します。
大抵の場合、テーブル内でのテキストの位置は、枠線にくっついてはいないですよね。
あれもパディングの指定によるものがほとんどです。（ＨＴＭＬでも指定可）

padding-top : ★;　　　　　　　（上側・★はキーワード、数値＋単位、％）
padding-right : ★;　　　　　　（右側・★はキーワード、数値＋単位、％）
padding-bottom : ★;　　　　（下側・★はキーワード、数値＋単位、％）
padding-left : ★;　　　　　　　（左側・★はキーワード、数値＋単位、％）
キーワード並びに数値＋単位、％の指定はマージンと同じです。

◆パディングの一括指定

padding : ★;　　　　　　　　　　　（上下左右同じ）
padding : ★　★;　　　　　　　　（上下、左右別）
padding : ★　★　★;　　　　　　（上、左右、下別）
padding : ★　★　★　★;　　　（上、右、下、左別）
指定についてもマージンと同じ順番での指定になります。

ページトップへ

◆枠線の太さを指定

border-top-width : ★;　　　　　　（上側）
border-right-width : ★;　　　　　（右側）
border-bottom-width : ★;　　　（下側）
border-left-width : ★;　　　　　　（左側）
指定はキーワード、数値＋単位でします。
キーワード
thin　　　　　　（細い線）
medium　　（中くらいの線・既定）
thick　　　　　（太い線）

◆枠線の太さを一括指定

border-width : ★;　　　　　　　　　　　（上下左右同じ）
border-width : ★　★;　　　　　　　　（上下、左右別）
border-width : ★　★　★;　　　　　　（上、左右、下別）
border-width : ★　★　★　★;　　　（上、右、下、左別）
指定は上と同じ方法です。

ページトップへ

◆枠線の色を指定

border-top-color : ★;　　　　　　　　（上側）
border-right-color : ★;　　　　　　　（右側）
border-bottom-color : ★;　　　　　（下側）
border-left-color : ★;　　　　　　　　（左側）
キーワード
transparent　　　　　　（透明）
指定はキーワードの他にRGB値、カラーネームで指定します。

◆枠線の色を一括指定

border-color : ★;　　　　　　　　　　　　（上下左右同じ）
border-color : ★　★;　　　　　　　　　（上下、左右別）
border-color : ★　★　★;　　　　　　　（上、左右、下別）
border-color : ★　★　★　★;　　　　（上、右、下、左別）
キーワード
transparent　　　　　　（透明）
指定はキーワードの他にRGB値、カラーネームで指定します。

ページトップへ

◆枠線の種類を指定

border-top-style : ★;　　　　　　　　　（上側）
border-right-style : ★;　　　　　　　　（右側）
border-bottom-style : ★;　　　　　　（下側）
border-left-style : ★;　　　　　　　　　（左側）
指定はキーワード。
キーワード
none　　　　　　（枠線を非表示・既定）
hidden　　　　（表示しない）
dotted　　　　　（点線）
dashed　　　　（破線）
solid　　　　　（実線）
double　　　　　（二重線）
groove　　　（へこんだように見える線）
ridge　　　　　　（浮き上がったように見える線）
inset　　　　　　（内側がへこんだような線）
outset　　　　　（内側が浮き上がったような線）

◆枠線の種類を一括指定

border-style : ★;　　　　　　　　　　　（上下左右同じ）
border-style : ★　★;　　　　　　　　（上下、左右別）
border-style : ★　★　★;　　　　　　（上、左右、下別）
border-style : ★　★　★　★;　　　（上、右、下、左別）
指定はキーワード。（キーワードは上と同じ）

ページトップへ

◆枠線の個別一括指定

border-top : ★　☆　▲;
border-right : ★　☆　▲;
border-bottom : ★　☆　▲;
border-left : ★　☆　▲;
※★＝枠線の太さ（width）☆＝枠線の種類（style）▲＝枠線の色（color）

◆枠線の一括指定
すべての枠線が同じで指定する時に使用します。

border : ★　☆　▲;
※★＝枠線の太さ（width）☆＝枠線の種類（style）▲＝枠線の色（color）

◆領域内の幅と高さを指定

width : ★;　　　　　　　　（幅）
height : ★;　　　　　　　（高さ）
数値＋単位の指定はこちらを参考にしてください。
％は親要素に対しての割合です。

枠線に関しては、頻繁に使うものなのでしっかりと覚えておくことが大事です。
普段よく使う指定は、１２番の指定法です。この形はぜひとも覚えていただきたいと思います。
ここでの指定は、DIV,P,TABLE,SPAN,INPUT,TEXTAREAなどに効力を持ちますので、いろいろな場面で使えてとても重宝します。
枠線を自由に扱えるということは、どんなものでも作れるということになりますので、テンプレートなども自由にカスタマイズできるようになりますね。