1.枠線のスタイルを指定する。


border-style : キーワード;   上下左右のスタイル
border-style : キーワード キーワード;   上下、左右のスタイル
border-style : キーワード キーワード キーワード;   上、左右、下のスタイル
border-style : キーワード キーワード キーワード キーワード;   上、右、下、左のスタイル

<キーワード>
 none : 枠線表示なし(デフォルト)
 solid : 実線
 double : 二重線
 dotted : 点線
 dashed : 破線
 groove : くぼみ線
 ridge : 浮きだし線
 inset : インセット
 outset : アウトセット

(例)
 <DIV style="border-style:solid;">実線を設定</DIV><br>
 <DIV style="border-style:double;">二重線を設定</DIV><br>
 <DIV style="border-style:dotted;">点線を設定</DIV><br>
 <DIV style="border-style:dashed;">破線を設定</DIV><br>
 <DIV style="border-style:groove;">くぼみ線を設定</DIV><br>
 <DIV style="border-style:ridge;">浮き出し線を設定</DIV><br>
 <DIV style="border-style:inset;">インセットを設定</DIV><br>
 <DIV style="border-style:outset;">アウトセットを設定</DIV><br>

(結果)

実線を設定

二重線を設定

点線を設定

破線を設定

くぼみ線を設定

浮き出し線を設定

インセットを設定

アウトセットを設定



2.上下左右の枠線のスタイルを個別に指定する。


border-top-style : キーワード;   上部の枠線のスタイル
border-bottom-style : キーワード;   下部の枠線のスタイル
border-right-style : キーワード;   右部の枠線のスタイル
border-left-style : キーワード;   左部の枠線のスタイル

<キーワード>
 none : 枠線表示なし(デフォルト)
 solid : 実線
 double : 二重線
 dotted : 点線
 dashed : 破線
 groove : くぼみ線
 ridge : 浮きだし線
 inset : インセット
 outset : アウトセット

(例)
<DIV style="border-top-style:dottedt; border-left-style:dotted;">上と左だけスタイルを設定しています。<br></DIV>

(結果)
上と左だけスタイルを設定しています。



3.枠線の色を指定する



border-color : 色指定;   上下左右の色
border-color : 色指定 色指定;   上下、左右の色
border-color : 色指定 色指定 色指定;   上、左右、下の色
border-color : 色指定 色指定 色指定 色指定;   上、右、下、左の色

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

<色指定>
 #RRGGBB・・・・・R(赤)、G(緑)、B(青)の部分に2桁ずつの英数字(1からF)を指定。
 #RGB・・・・・・・・ 上の方法で2桁が同じ場合に省略して指定。
   例: #11aa66 → #1a6 、#0055ff → #05f
 rgb(R,G,B)・・・ ・R(赤)、G(緑)、B(青)の部分に 0〜255 の数字を指定。
 rgb(R%,G%,B%)・・R(赤)、G(緑)、B(青)の部分に 0〜100 の数字で%指定。
 カラーネーム・・るカラーネームを記入する。
   例: red blue green yellow orange purple pink black white
 色指定に関してはHTML講座のこちらも参照してみてください

<キーワード>
 transparent : 透明色(デフォルト)

(例)
<div style="border-style: dashed; border-color: red blue yellow green;"><br>枠線の上下左右で違う色を指定<br></div>
(結果)

枠線の上下左右で違う色を指定



4.上下左右の枠線の色を個別に指定する。



border-top-color : 色指定;   上部の枠線の色
border-bottom-color : 色指定;   下部の枠線の色
border-right-color : 色指定;   右部の枠線の色
border-left-color : 色指定;   左部の枠線の色

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

<色指定>
 #RRGGBB・・・・・R(赤)、G(緑)、B(青)の部分に2桁ずつの英数字(1からF)を指定。
 #RGB・・・・・・・・ 上の方法で2桁が同じ場合に省略して指定。
   例: #11aa66 → #1a6 、#0055ff → #05f
 rgb(R,G,B)・・・ ・R(赤)、G(緑)、B(青)の部分に 0〜255 の数字を指定。
 rgb(R%,G%,B%)・・R(赤)、G(緑)、B(青)の部分に 0〜100 の数字で%指定。
 カラーネーム・・るカラーネームを記入する。
   例: red blue green yellow orange purple pink black white
 色指定に関してはHTML講座のこちらも参照してみてください

<キーワード>
 transparent : 透明色(デフォルト)

(例)
<div style="border-style:double; border-left-color:red; border-right-color:red;">枠線の横だけ赤くしてみました。</div>

(結果)
枠線の横だけ赤くしてみました。



5.枠線の太さを設定する


border-width : 数値指定 又は キーワード;   上下左右の枠線の太さを設定
border-width : 数値指定 数値指定;   上下、左右の設定
border-width : 数値指定 数値指定 数値指定;   上、左右、下の設定
border-width : 数値指定 数値指定 数値指定 数値指定;   上、右、下、左の設定

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

<キーワード>
 thin : 細い枠線
 medium : 普通の枠線(デフォルト)
 thick : 太い枠線

(例)
<DIV style="border-style:ridge; border-width:10px 20px 30px 40px;">四方向の枠線の太さを変えてみました</DIV>

(結果)

四方向の枠線の太さを変えてみました



6.上下左右の枠線の太さを個別に指定する。


border-top-width : キーワード 又は 数値指定;   上部枠線の太さ
border-bottom-width : キーワード 又は 数値指定;   下部枠線の太さ
border-right-width : キーワード 又は 数値指定;   右部枠線の太さ
border-left-width : キーワード 又は 数値指定;   左部枠線の太さ

記述例
<div style="border-style :groove; border-right-width:40px; border-left-width:30;">左右の枠線だけ太くしてみました。</div>
   
左右の枠線だけ太くしてみました。



7.枠線の設定をまとめてする

border : boder-styleの値 border-colorの値 border-widthの値;  上下左右、すべて同じ設定

指定したい属性を半角スペースで区切って記述します。
 boder-style:スタイル・・・省略不可
 border-color:色・・・・省力可
 
border-width:太さ・・・・省略可

(例)
<div style="border : double red 10px;">四方向共に同じ設定になります</div>
(結果)
四方向共に同じ設定になります



8.上下左右の枠線の設定をまとめてする

border-top : boder-styleの値 border-colorの値 border-widthの値;   上方向に設定
border-bottom : boder-styleの値 border-colorの値 border-widthの値;   下方向に設定
border-right : boder-styleの値 border-colorの値 border-widthの値;   右方向に設定
border-left : boder-styleの値 border-colorの値 border-widthの値;   左方向に設定

指定したい属性を半角スペースで区切って記述します。
 boder-style:スタイル・・・省略不可
 border-color:色・・・・省力可
 
border-width:太さ・・・・省略可


(例)
<div style="border-top:dashed #99f 10px; border-bottom : dotted #99f 10px; border-right:none; border-left:none;">上は破線で、下は点線、左右は枠線無し</div>
(結果)
   上は破線で、下は点線、左右は枠線無し



9.ボックス領域の幅と高さを設定する


width : キーワード、数値指定、%指定;  横幅
height : キーワード、数値指定、%指定;  高さ

<キーワード>
 auto:ブラウザが自動調節する

<%指定>
 親要素のボックス領域に対する割合で指定する

<数値指定>
 単位を付けた数値を使って余白を指定する。

(例)
<DIV style="width: 300px; height: 100px; background-color:olive;">幅が300px、高さが100pxのボックス領域です。</DIV>
(結果)
幅が300px、高さが100pxのボックス領域です。



10.ボックスにマージンを指定する


margin : キーワード、数値指定、%指定; 上下左右の枠線のマージン
margin : 数値指定 数値指定;   上下、左右の設定
margin : 数値指定 数値指定 数値指定;
  上、左右、下の設定
margin : 数値指定 数値指定 数値指定 数値指定;
  上、右、下、左の設定

:*ボックス領域とその内側にあるボックス領域の外枠との間隔(マージン)

<キーワード>
 auto:ブラウザが自動調節する

<%指定>
 親要素のボックス領域に対する割合で指定する

<数値指定>
 単位を付けた数値を使ってマージンを指定する。

(例)
<dl style="background-color:yellow">
 <dt style="background-color:silver">ボックス1</dt>
  <dd style="background-color:aqua; margin:10px 100px;">マージン 上下:10px 左右:100px</dd>
 <dt style="background-color:silver">ボックス2</dt>
  <dd style="background-color:lime; margin:10%;">マージン 上下左右:10%</dd>
 <dt style="background-color:silver">ボックス3</dt>
  <dd style="background-color:purple; margin:2mm 2mm 2mm 2mm;">マージン 上下左右:2mm</dd>
</dl>

(結果)      
ボックス1   
マージン 上下:10px 左右:100px   
ボックス2   
マージン 上下左右:10%   
ボックス3   
マージン 上下左右:2mm   



11.上下左右の枠線のマージンを個別に指定する。

margin-top : キーワード、数値指定、%指定;  上方向
margin-bottom : キーワード、数値指定、%指定;  下方向
margin-right : キーワード、数値指定、%指定;  右方向
margin-left : キーワード、数値指定、%指定;  左方向

<キーワード>
 auto:ブラウザが自動調節する

<%指定>
 親要素のボックス領域に対する割合で指定する

<数値指定>
 単位を付けた数値を使ってマージンを指定する。


(例)
<DIV style="margin-right: 200px; background-color:pink;">右にマージンを200px設定しました</DIV>

(結果)
右にマージンを200px設定しました



12.余白を設定する


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

*ボックス領域とコンテンツの間隔

<キーワード>
 auto:ブラウザが自動調節する

<%指定>
 親要素のボックス領域に対する割合で指定する

<数値指定>
 単位を付けた数値を使って余白を指定する。


(例)
<dl style="background-color:yellow">
<dt style="background-color:silver">ボックス1</dt>
<dd style="background-color:aqua; padding:10px 100px;">余白 上下:10px 左右:100px</dd>
<dt style="background-color:silver">ボックス2</dt>
<dd style="background-color:lime; padding:10%;">余白 上下左右:10%</dd>
<dt style="background-color:silver">ボックス3</dt>
<dd style="background-color:purple; padding:2mm 2mm 2mm 2mm;">余白 上下左右:2mm</dd>
</dl>

(結果)          
ボックス1   
余白 上下:10px 左右:100px   
ボックス2   
余白 上下左右:10%   
ボックス3   
余白 上下左右:2mm   



13.上下左右の枠線の余白を個別に指定する。


padding-top : キーワード、数値指定、%指定;   上方向の余白
padding-bottom : キーワード、数値指定、%指定;   下方向の余白
padding-right : キーワード、数値指定、%指定;   右方向の余白
padding-left : キーワード、数値指定、%指定;   左方向の余白

<キーワード>
 auto:ブラウザが自動調節する

<%指定>
 親要素のボックス領域に対する割合で指定する

<数値指定>
 単位を付けた数値を使って余白を指定する。

(例)
<div style="padding-top : 40px;padding-left : 30px;padding-bottom : 10px;">上40px下10px左30pxで設定しています</dl>
(結果)
上40px下10px左30pxで設定しています







初心者による初心者のためのCSS講座_TOPに戻る