RIGHT:[[Lectures]]
#br
#br
CENTER:&size(28){HTML Box};
CENTER:&size(28){CSS(Cascading Style Sheets)};
#br
#br
#br
----
LEFT:''目 次''

#contents
----
CSS は Cascading Style Sheets の
*Links [#m60810db]
-http://open.shonan.bunkyo.ac.jp/~ohtan/kouza/css-margin.html
-http://az-store.nrym.org/archive/mynotes/lecture/
-http://open.shonan.bunkyo.ac.jp/~ohtan/kouza/
----
*マージンと余白 [#s7247979]
**ボックスの構造 [#u5b82c00]
*CSSとは [#w2598a68]
>CSSは、HTMLで記述されたWebページのスタイルを効率的に定義するための技術。HTMLで内容を定義し、CSSでスタイルを定義することにより、内容とスタイルを分離することが可能となる。

*構造 [#u5b82c00]
>http://open.shonan.bunkyo.ac.jp/~ohtan/kouza/margin-yohaku.gif

**マージン(margin)の指定 [#o5471ff8]
margin (値)
    上下左右の4方向について、すべて同じマージンを指定する
*マージンと余白 [#s7247979]

margin (上) (右) (下) (左)
    上下左右のマージンをそれぞれ別に指定する
**マージン(margin)の指定 [#o5471ff8]
-margin (値)
    上下左右の4方向について、すべて同じマージンを指定
-margin (上) (右) (下) (左)
    上下左右のマージンをそれぞれ別に指定
    (例) margin 10px 5px 10px 5px

margin-top (値)
    上マージンを指定する
-margin-top(値):上マージンを指定
-margin-bottom(値):下マージンを指定
-margin-left(値):左マージンを指定
-margin-right(値):右マージンを指定

margin-bottom (値)
    下マージンを指定する

margin-left (値)
    左マージンを指定する

margin-right (値)
    右マージンを指定する

**余白(padding)の指定 [#s842090d]
padding (値)
    上下左右の4方向について、すべて同じ余白を指定する

padding (上) (右) (下) (左)
    上下左右の余白をそれぞれ別に指定する
-padding (値)
    上下左右の4方向について、すべて同じ余白を指定
-adding (上) (右) (下) (左)
    上下左右の余白をそれぞれ別に指定
    (例) padding 10px 5px 10px 5px

padding-top (値)
    上の余白を指定する
-padding-top(値):上の余白を指定
-padding-bottom(値):下の余白を指定
-padding-left(値):左の余白を指定
-padding-right(値):右の余白を指定

padding-bottom (値)
    下の余白を指定する
*枠線(border)の指定 [#h9691991]

padding-left (値)
    左の余白を指定する

padding-right (値)
    右の余白を指定する


**枠線(border)の指定 [#h9691991]

***線の太さ [#k5596d48]
border-width (値)
**線の太さ [#k5596d48]
-border-width (値)
    上下左右の4辺の枠線すべてを、同じ太さに指定する

border-width (上) (右) (下) (左)
-border-width (上) (右) (下) (左)
    上下左右の4辺それぞれの太さを指定する
    (例) border-width 3px 5px 3px 5px

border-top-width (値)
    上枠線の太さを指定する
-border-top-width(値):上枠線の太さを指定
-border-bottom-width(値):下枠線の太さを指定
-border-left-width(値):左枠線の太さを指定
-border-right-width(値):右枠線の太さを指定

border-bottom-width (値)
    下枠線の太さを指定する
**線のスタイル [#w9713b72]
-border-style (スタイル)
    上下左右4辺の枠線に共通のスタイルを指定
--none    :  枠線なし
--solid    :   実線
--double  :  二重線
--dotted   :  点線

border-left-width (値)
    左枠線の太さを指定する
-border-style (上) (右) (下) (左)
    上下左右の4辺それぞれにスタイルを指定

border-right-width (値)
    右枠線の太さを指定する
-border-top-style(スタイル):上枠線にスタイルを指定
-border-bottom-style(スタイル):下枠線にスタイルを指定
-border-left-style(スタイル):左枠線にスタイルを指定
-border-right-style(スタイル):右枠線にスタイルを指定


***線のスタイル [#w9713b72]
     
border-style (スタイル)
    上下左右4辺の枠線に共通のスタイルを指定する

none   :  枠線なし
solid    :   実線
double  :  二重線
dotted  :  点線

border-style (上) (右) (下) (左)
    上下左右の4辺それぞれにスタイルを指定する

border-top-style (スタイル)
    上枠線にスタイルを指定する

border-bottom-style (スタイル)
    下枠線にスタイルを指定する

border-left-style (スタイル)
    左枠線にスタイルを指定する

border-right-style (スタイル)
    右枠線にスタイルを指定する

***線の色 [#nb280bb7]
     
border-color (色)
    上下左右4辺の枠線に同一の色を指定する
-border-color (色)
    上下左右4辺の枠線に同一の色を指定

border-color (上) (右) (下) (左)
    上下左右の4辺それぞれに色を指定する
-border-color (上) (右) (下) (左)
    上下左右の4辺それぞれに色を指定

border-top-color (色)
    上枠線に色を指定する
-border-top-color(色):上枠線に色を指定
-border-bottom-color(色):下枠線に色を指定
-border-left-color(色):左枠線に色を指定
-border-right-color(色):右枠線に色を指定

border-bottom-color (色)
    下枠線に色を指定する

border-left-color (色)
    左枠線に色を指定する

border-right-color (色)
    右枠線に色を指定する
*サンプル [#ib9a72f3]
-&ref(test1.html);:HTMLファイル
-&ref(back.gif);:GIFファイル
----


トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS