background-color＝背景色の設定
-- 例 --
背景色と文字の色に気をつけないと、いけません。つまり見えません。
--style--
.color1{background-color:#DBD8A4;}
.color2{background-color:red;}
.color3{color:#DBD8A4}
-- html --
<p class="color1">
背景色と文字の色に気をつけないと、
<span class="color2">いけません</span>
<span class="color3">。つまり見えません</span>。
</p>
background-color:色;
で指定する。ページ全体の背景に色を付けたい場合は、<body>を
<body class="color1">などとする。
background-img＝背景画像の設定
-- 例 --
拝啓
お袋、元気か?オラは元気でやってます。
いよいよ4年生になります。
就職活動も活発になってきました。
今度ゼミの合宿で箱根に行くことになりました。
その上、牛丼も食べれなくなりました。
お金が足りません。
なにとぞよろしくお願いします。
息子
--style sheet--
.tegami{
background-image: url('gyou.jpg');
background-repeat: repeat;
}
--html--
<div class="tegami">
<pre>
拝啓
お袋、元気か?オラは元気でやってます。
いよいよ4年生になります。
就職活動も活発になってきました。
今度ゼミの合宿で箱根に行くことになりました。
その上、牛丼も食べれなくなりました。
お金が足りません。
なにとぞよろしくお願いします。
息子
</pre>
</div>
説明
ここでは、
という画像を用意して、
縦方向と横方向にに繰り返して表示した。
他に、background-repeat:repeat-x;とすると、横方向のみ繰り返し、
background-repeat:repeat-y;とすると、縦方向のみ
繰り返すことが出来る。
border-color＝ボーダーの色
border-width＝ボーダーの太さ
border-style＝ボーダーのスタイル
border＝ボーダーの一括指定
-- 例 --
色 blue 太さ 1px スタイル solid (実線)
色 black 太さ 2px スタイル dotted (点線)
色 teal 太さ 3px スタイル dashed (破線)
色 red 太さ 4px スタイル double (二重線)
色 yellow 太さ 5px スタイル groove (谷線)
色 green 太さ 6px スタイル ridge (山線)
色 navy 太さ 7px スタイル inset (内線)
色 olive 太さ 8px スタイル outset (外線)
--style sheet--
.box1{
border-width:1px;
border-color:blue;
border-style:solid;}
--html--
<p class="box1">色 blue 太さ 1px スタイル solid (実線)</p>
説明
border-width:太さ;
border-color:色;
border-style:スタイル;
と指定しする。スタイルとして設定できるのは、上の例にある8つ。また、
border:太さ 色 スタイル;
とすると、一括で指定することが出来る。各項目の間は半角スペースを入れ
る。
-- style sheet --
border-width:1px 10px 2px 15px;
border-color:yellow red blue;
border-style:dashed solid;
説明
このように一辺つづの色、太さ、スタイルを変更することが出来る。
4つ設定すると、辺の上、右、下、左の順番に
なる。上から時計回りになっている。
3つ設定すると、辺の上、右と左、下の順番に
なる。
2つ設定すると、辺の上と下、右と左の順番に
なる。
margin＝マージン(余白)の設定
padding＝パディング(間隔)の設定
-- 例 --
マージンとパディングの違いは何なんでしょう。マージン(margin)とは「余白」
のこと、パディング(padding)とは「間隔」のこと？何を言っているのか!よく分
かりません!まったく。マージンとは要素同士の距離のことである。パディング
とは内容とボーダーの距離のことです。つまりは、ボーダーの中にどれだけスペー
スを開けるかです。ボーダーを指定しなければ、どちらあまりも変わらない様に
思われるかも知れません。ボーダーが分かれば、なんとなく分かってくると思う。
中の文章に対する ■マージン ■
パディング ■ボーダー
--style sheet--
.ma0{
border:black 1px solid;
background-color:#C8C8C8;
}
.ma1{
border:#9A9A9A 5px solid;
background-color:#EBEBEB;
padding:30px;
margin:30px;
}
.ma2{
background-color:white;
}
説明
ここでは、クラス「ma0」がマージンの色（文章にとっては背景色ということ）を、
クラス「ma1」が、文章のパディングとボーダーの色を、クラス「ma2」が内容の領域の色(文章の背景の色)
指定をしている。
--html--
<div class="ma0">
<div class="ma1">
<p><span class="ma2">
マージンとパディングの違いは何なんでしょう。マージン(margin)とは「余白」
のこと、パディング(padding)とは「間隔」のこと？何を言っているのか!よく分
かりません!まったく。マージンとは要素同士の距離のことである。パディング
とは内容とボーダーの距離のことです。つまりは、ボーダーの中にどれだけスペー
スを開けるかです。ボーダーを指定しなければ、どちらあまりも変わらない様に
思われるかも知れません。ボーダーが分かれば、なんとなく分かってくると思う。
</span></p>
</div>
</div>
height=高さの設定
width=幅の設定
-- 例 --
色 yellow 太さ 5px スタイル groove (谷線)
-- style sheet --
width:200px;
height:100px;
-- html --
<p style="width:200px;height:100px;"
class="box5">
色 yellow 太さ 5px スタイル groove (谷線)</p>
説明
heightやwidthを使うと、ボックスの大きさを設定することができる。
が、幅がちいさくても折り返しますが、
高さもちいさいとはみ出してしまうので、注意しましょう。
※windowsのIEと学内のns4など、heightが無視されるものも
ある。
-- 例 --
色 red 太さ 4px スタイ
ル double (二重線)
定義済みの色の指定。
CSS2で定義されている色
| 色 | 定義名 | 16進数では |
|---|
| ■ | black | #000000 |
| ■ | white | #FFFFFF |
| ■ | red | #FF0000 |
| ■ | blue | #0000FF |
| ■ | green | #008000 |
| ■ | yellow | #FFFF00 |
| ■ | fuchsia | #FF00FF |
| ■ | lime | #00FF00 |
| ■ | gray | #808080 |
| ■ | maroon | #800000 |
| ■ | navy | #000080 |
| ■ | purple | #800080 |
| ■ | olive | #808000 |
| ■ | teal | #008080 |
| ■ | aqua | #00FFFF |
| ■ | silver | #C0C0C0 |
このように、アルファベットで記入できる色は16種類その他にも試すと出て
くるが、それは、ブラウザの独自の使用なので、CSS2の今は、他のブラウザでは
違うように見えているかも知れない。
3原色を元にした色の表記
○その1
#ABCDEF
上記のように「#」のあとに赤
(R)緑(G)
青(B)を二桁の16進数の00〜FFをつかっ
て、表記します。各々の色を0〜255までの256段階の組み合わせで色を表現する。
○その2
#abc
その1の簡易版。赤
(R)緑(G)
青(B)を二桁の16進数の0〜Fをつかっ
て、表記します。各々の色を0〜15までの16段階の組み合わせで色を表現する。
○その3
#rgb(123, 234,156)
その1の10進数版。赤
(R)緑(G)
青(B)を各色、0〜255までの組み合わせで色を表記する。
○その4
#rgb(12%, 34%, 56%)
その3のパーセント版。赤
(R)緑(G)
青(B)を各色、0%〜100%までの組み合わせで色を表記する。
1em 標準フォントの文字の大きさ
1ex 標準フォントの文字「x」の高さ
1px ピクセル(環境によってピクセルの大きさは違う)
周囲の文字とではなく、画面の解像度に対して
相対的なので実質的には絶対単位のような扱いになる。
100% パーセント 文字なら初期の大きさ
横幅なら見る側のブラウザの幅
など使うものによって、参照するものが変わる。
1in インチ（1in=2.54cm）
1cm センチメートル（1cm=10mm）
1mm ミリメートル（10mm=1cm）
1pt ポイント（1pt=1/72in）
1pc パイカ（1pc=12pt）
文字を大きくして読みたい人など、絶対的な単位で書かれていると困る場合
がある。そのことを配慮して、文字の大きさは相対的な単位emや%など
を使おう。
個人的な意見としては、絶対的な単位としてpxを、相
対的な単位として%を使うことが多いように思う。それに、絶対的、相対的、場
合によっては、長さもブラウザによって、
まちまちなようなので、あまり期待しない方が良い。