homepage-navi＞スタイルシートで作る＞スタイルシートへ書き込む前に

スタイルシートで作る

スタイルシートへ書きこむ前に

スタイルシートへ書き込む前に、知っておきたい基本的なルールを説明します。

要素 { プロパティ（属性）：プロパティ値（値）； }

要素とは<div>,<h1>,<p>等の事です。簡単な解釈は→[要素]の[何]を[どうする]かを指定します。

CSSでは、要素が生成する範囲をボックス（Box）と言います。ボックスの内容を内容領域と言い、その他、マージン、パディング、ボーダーのプロパティで構成されています。

margin（マージン）

マージンは、文字を囲む枠の外側の事で、上下左右のマージン領域を指定します。

最も外側の領域で、他の要素との境となる領域です。値は、%（パーセント）や、長さで指定します。また、まとめて値の指定をする場合は、半角スペースで区切ります。

値のまとめ指定

margin: の引数は 1～4個指定が可能で、それぞれ、下のように解釈されます。

margin: 1px 2px 3px 4px ;	→	上 1px、右 2px、下 3px、左 4px
margin: 1px 2px 3px ;	→	上 1px、左右 2px、下 3px
margin: 1px 2px ;	→	上下 1px、左右 2px
margin: 1px ;	→	上下左右 1px

上下左右のマージンを個別に指定する場合

margin-top: 2px ;	→	上辺に 2pxの余白
margin-bottom: 2px ;	→	下辺に 2pxの余白
margin-right: 2px ;	→	右辺に 2pxの余白
margin-left: 2px ;	→	左辺に 2pxの余白

border（ボーダー）

マージンは、文字を囲む枠の事を指します。

ボーダーの上下左右の枠線の太さ、スタイル、色の指定をまとめて行うプロパティです。

値の指定は、半角スペースで区切ります。

例

border-width : 1px ; border-style : solid ; border-color : #cdcdcd

↑まとめ指定をしない場合の記述

border : 1px solid #cdcdcd ;

↑まとめ指定した場合の記述

太さ、スタイル、色の記述順序は特に決まっていません。
また、指定する必要の無い値は、省略できます。その場合、各プロパティのデフォルトの値となります。

■太さ、スタイル、色を個別に指定する場合

・ border-width

ボーダーの上下左右の太さを指定します。

値は、単位をつけた数値の他、thin（細線）、medium（中太線）、thick（太線）
単位をつけた数値の上下左右との指定位置関係は、marginプロパティの、値のまとめ指定と同じです

・border-style

ボーダーの上下左右のスタイルを指定します。

値は、none（なにも無し）、solid（べた塗り）、double（二重線）、groove（立体線*くぼみ）、ridge（立体線*隆起）、inset（へこみ）、outset（盛りあがり）

・border-color

ボーダーの上下左右の枠線の色を指定します。

値は、カラーネーム、又はRGBコード

※border: の引数も 1～4個指定が可能で、それぞれの解釈も、marginプロパティと同じです。

padding（パディング）

要素から、ボーダーまでの領域を指定します。

値の指定は、marginプロパティと同じです。また、四辺の個別指定も、padding-top、padding-bottom、padding-left、padding-right、と、marginプロパティと paddingプロパティを入れ替えるだけで、要素から、ボーダーまでの領域の余白を指定することができます。

floatプロパティ

floatプロパティは、要素のボックスを左、または右に配置し、反対側に、要素に続く内容を回り込ませます。この一連の表示方法は、『回り込み』と言い換える事ができます。

値

none(回り込み(フロート)しない)
left(要素のボックスを左揃え、続く内容が右から回り込みます。)
right(要素のボックスを右揃え、続く内容が左から回り込みます。)
floatプロパティで、レイアウトを組む場合、いくつかの注意点があります。
1. 2つ以上のボックスを表示する場合、外側にボックスを設け、その内側にボックスを内包するように記述します。
2. floatプロパティを指定したボックスには、幅を必ず指定します。(CSS2の仕様です。)
3. floatプロパティでレイアウトを組む場合、左右のボックスにfloatプロパティを指定すようにします。
  例えば、左ボックスにフロートを指定( float : left )し、右ボックスを回り込ませる場合、右ボックスにも同じ float : left を指定しておかないと、右ボックスが、左ボックスより大きくなると、floatプロパティ本来の働きである回り込み(左ボックスの下側にも回り込む)表示となります。

例

外部CSSファイル	ソース<body>～</body>内
.cont{width::800;} hidarii{width:200px; float:left; } .migi{width:550px; float:right;} .	<div class="cont"> <div class="hidari"> </div> <div class="migi"> </div> </div>

回り込みの解除　clear

floatプロパティで指定された内容の回り込みを解除します。

レイアウトにおいて、clearプロパティは、フロートを解除したいボックスに指定し、そのボックスを表示させます。

値

none(回り込み(フロート)を解除しません )
left(float : left を解除します)
right(float : right を解除します)
both(left、right 両方解除します)

例

外部CSSファイル	ソース<body>～</body>内
.cont{width::800;} .hidarii{width:200px; float:left; } .migi{width:550px; float:right;} .cl{clear:both;}	<div class="cont"> <div class="hidari"> </div> <div class="migi"> </div> <div class="cl"> </div> </div>

次は実際にスタイルシートに記述していきましょう。

スタイルシートの書き方へ

ページTOPに戻る

グッジョブhomepage-navi

TOPページ

ホームページの仕組み

スタイルシートについて

スタイルシートで作る

・スタイルシートの書き方

・スタイルシートの適用

グッジョブhomepage-navi　TOP
ホームページの仕組み→ホームページの仕組み｜HTML基本構造
スタイルシートについて→スタイルシートとは
スタイルシートで作る→まず最初に・・・｜書き込む前に｜スタイルシートの書き方｜スタイルシートの適用