ぱそおーるCSS講座

ボックスにマージンを設定する
margin : キーワード、数値指定、%指定;

キーワードはブラウザが自動調節する[auto]しかありません。
%指定は親要素のボックス幅を100%としてサイズを指定します。
上下のマージンも親要素のボックスの横幅に対する割合になります。

margin : 10px; 上下左右のマージンが10pxに設定されます。
margin : 10px 20px; 上下のマージンが10px左右のマージンが20pxに設定されます。
margin : 10px 20px 30px; 上10px左右20px下30oxに設定されます。
margin : 10px 20px 30px 40px; 上10px右20px下30px左40pxに設定されます。

記述例
<div style="margin : 10px 20px 30px 40px;">
上のように二つのボックスのマージンが重なった場合は、大きい方のマージンが適用されます。

上下左右のマージンを個別に設定する場合
margin-top : キーワード、数値指定、%指定;（上方向）
margin-bottom : キーワード、数値指定、%指定;（下方向）
margin-right : キーワード、数値指定、%指定;（右方向）
margin-left : キーワード、数値指定、%指定;（左方向）

使い方はmarginと同じです。複数設定する事も出来ます。

記述例
<div style="margin-left : 200px;">

ボックスの幅と高さを設定する
width : キーワード、数値指定、%指定;（横幅の指定）
height : キーワード、数値指定、%指定;（高さの指定）

キーワードはブラウザが自動調節する[auto]しかありません。
文字だけでなく画像などにも設定する事が出来ます。
%指定は親要素のボックス幅と高さを100%としてサイズを決定します。

記述例
<div style="width : 400px;height : 50px;">

枠線のスタイルを設定する
border-style : キーワード; （上下左右のスタイルを設定）
border-style : キーワード キーワード; （上下、左右のスタイルを設定）
border-style : キーワード キーワード キーワード; （上、左右、下のスタイルを設定）
border-style : キーワード キーワード キーワード キーワード; （上、右、下、左のスタイル設定）

キーワードは９種類あります。

1. none : 枠線表示なし（デフォルト）
2. solid : 実線
3. double : 二重線
4. dotted : 点線
5. dashed : 破線
6. groove : くぼみ線
7. ridge : 浮きだし線
8. inset : インセット
9. outset : アウトセット

記述例
<div style="border-style : double none;">

上下左右の枠線のスタイルを個別に設定する場合
border-top-style : キーワード; （上部の枠線のスタイルを設定）
border-bottom-style : キーワード; （下部の枠線のスタイルを設定）
border-right-style : キーワード; （右部の枠線のスタイルを設定）
border-left-style : キーワード; （左部の枠線のスタイルを設定）

キーワードは同じものを使います。

<div style="border-top-style : dashed;border-left-style : dashed;">

枠線の色を設定する
border-color : 色指定; （上下左右の色を設定）
border-color : red blue; （上下、左右の色を設定）
border-color : red blue yellow; （上、左右、下の色を設定）
border-color : red blue yellow green; （上、右、下、左の色を設定）

この属性は枠線のスタイルを設定していないと効果がありません。

記述例
<div style="border-style : dashed;border-color : red blue yellow green;">

上下左右の枠線の色を個別に設定する場合
border-top-color : 色指定; （上部の枠線の色を設定）
border-bottom-color : 色指定; （下部の枠線の色を設定）
border-right-color : 色指定; （右部の枠線の色を設定）
border-left-color : 色指定; （左部の枠線の色を設定）

記述例
<div style="border-style : dashed;border-top-color : red;border-right-color : blue;border-bottom-color : yellow;border-left-color : green;">

枠線の太さを設定する
border-width : キーワード、数値指定; （上下左右の枠線の太さを設定）
border-width : 10px 20px; （上下、左右の設定）
border-width : 10px 20px 30px; （上、左右、下の設定）
border-width : 10px 20px 30px 20px; （上、右、下、左の設定）

この属性は枠線のスタイルを設定していないと効果がありません。

キーワードは３種類です。

1. thin : 細い枠線
2. medium : 普通の枠線（デフォルト）
3. thick : 太い枠線

記述例
<div style="border-width : 10px 20px 30px 40px;border-style : solid;">

上下左右の枠線の太さを個別に設定する場合
border-top-width : キーワード、色指定; （上部枠線の太さを設定）
border-bottom-width : キーワード、色指定; （下部枠線の太さを設定）
border-right-width : キーワード、色指定; （右部枠線の太さを設定）
border-left-width : キーワード、色指定; （左部枠線の太さを設定）

記述例
<div style="border-top-width : 30px;border-right-width : 40px;border-bottom-width : 10px;border-left-width : 20;border-style : solid;">

枠線の設定をまとめてする
border : スタイル カラー 太さ; （四方向に設定する場合）
border-top : スタイル カラー 太さ; （上方向に設定する場合）
border-bottom : スタイル カラー 太さ; （下方向に設定する場合）
border-right : スタイル カラー 太さ; （右方向に設定する場合）
border-left : スタイル カラー 太さ; （左方向に設定する場合）

スタイル、カラー、太さ、共に省略可能です。
ただし、スタイルを省略すると効果がありません。
スタイル、カラー、太さは半角スペースで区切って記述します。

記述例
<div style="border : double red 10px;">

<div style="border-top : double red 10px;border-right : double blue 10px;border-bottom : double yellow 10px;border-left : double green 10px;">

<div style="border : double 10px;border-color : red blue yellow green;">

余白を設定する
padding : キーワード、数値指定、%指定; （四方向に設定）
padding : 10px 20px; （上下、左右に設定）
padding : 10px 20px 30px; （上、左右、下の設定）
padding : 10px 20px 30px 40; （上、右、下、左の設定）

キーワードはブラウザが自動調節する[auto]しかありません。
%指定は親要素のボックス幅を100%としてサイズを指定します。
上下の余白も親要素のボックスの横幅に対する割合になります。

記述例（違いを見るために枠線を入れてあります）
<div style="padding : 30px;">

上下左右の余白を個別に設定する場合
padding-top : キーワード、数値指定、%指定; （上方向の余白を設定）
padding-bottom : キーワード、数値指定、%指定; （下方向の余白を設定）
padding-right : キーワード、数値指定、%指定; （右方向の余白を設定）
padding-left : キーワード、数値指定、%指定; （左方向の余白を設定）

記述例
<div style="padding-top : 40px;padding-left : 30px;padding-bottom : 10px;">