TOP ＞ Place

表示の領域（ボックス）

　目に見えないのであまり意識することもないのですが、Webページの要素「領域（ボックス）」四角形のエリアを持ち、「margin＝マージン」「border＝ボーダー」「padding＝パディング」と中心のコンテンツで成り立っています。（下図参照）
CSSでは、「margin＝マージン」「border＝ボーダー」「padding＝パディング」をコントロールします。

◆　CSS：ボックス属性

●　WIDTH/HEIGHT属性

　スタイルシートでは、横幅（WIDTH）や高さ（HEIGHT）プロパティの設定値を数値「px」、パーセント「%」、綴り「auto」、等で行います。　表示領域の値に「margin」「border」「padding」の値を合わせたものになります。
また、IMG、TABLEは属性値によって横幅（WIDTH）や高さ（HEIGHT）を指定できます。

▼　プロパティ設定要素
・特定オブジェクトに置換される要素
APPLET、BUTTON、IFRAME、IMG、INPUT、TEXTAREA、SELECT、OBJECT
・表内要素
TD、TH
・表内要素WIDTHのみ
COL、COLGROUP
・表内要素HEIGHTのみ
TBODY、TFOOT、THEAD、TR
●　テキストの表示設定 ▼　はみ出し内容の表示設定

　「overflow:表示値」で領域の内容が指定枠に収まらない場合の方法を指定出来ます。

▼　テキストの回り込み、float＝囲み

　「float:位置値」で、ほとんどの要素に領域を左右に配置させる指定が出来ます。IMG、TABLE のalign属性と同様でテキスト（文章）を開いた空間に回り込ませる属性名。必ず最後に回り込み解除。

位置値
float：NONE
初期値で回り込みしない。
float：LEFT
要素左に配置しテキストを右にする。
float：RIGHT
要素左に配置しテキストを右にする。

・テキストと回り込みの間隔は「mirgin」を使用します。
・positionの値が「absolute」「fixed」に設定されている場合、無効です。
・回り込みの解除は「clear」を使います。

▼　回り込み解除、clear＝解除

　「clear:値」でスタイルシートの回り込み「float:位置値」を解除します。
・「none」は、初期値で解除はしません。
・「left」は、左回り込みを解除
・「right」は、右回り込みを解除
・「all」は、全ての回り込みを解除（面倒な時はこれで良いでしょう）

●　BORDERでの枠線

　BORDER属性名には、属性値「太さ・線の種類・色」と四辺個別に属性値の指定が出来ます。

・border-style 「 外縁スタイル」
値：none | dotted | dashed | solid | double | groove | inset | outset
・border-color 「 外縁カラー」
属性は外縁の色を設定します。値：カラーコード
・border-width 「 外縁幅 」
値：thin | medium | thick
▼　太さの値：border ▼　色値 ▼　線の種類値
・border-style 「外縁スタイル 」
値：none | dotted | dashed | solid | double | groove | ridge | inset | outset | hidden

◆　CSS：BORDER属性

　四辺（外縁）のスタイル（太さ・色・線の種類）を設定します。

●　BORDER属性の組み合わせ
　[]＝半角英数のスペース
BORDERの基本指定
セレクタ
（要素名）		 []border -（ハイフン）から
部分の指定をし:（ダブルコロン）		 各値  
-（ハイフン）から
部分の指定をし -（ハイフン）
属性選択（width、style、color）
:（ダブルコロン）
枠線（外縁）に太さ「width」を指定
セレクタ
（要素名）		 []border 指定なし -width: 値
(px、pt、綴り)
-top
-bottom
-left
-right
　[]＝半角英数のスペース
枠線（外縁）に太さ「width」の四辺個別にし、まとめて値指定
セレクタ（要素名）[]border-width: 個別指定なし サイズ値
上下と左右の場合 サイズ値[]サイズ値
上と左右と下の場合 サイズ値[]サイズ値[]サイズ値
上と左と右と下の場合 サイズ値[]サイズ値[]サイズ値[]サイズ値

　インラインでは、例：<P style="border-width:値指定">になります。

　[]＝半角英数のスペース
枠線（外縁）に線の種類「style」を指定
セレクタ（要素名） []border 指定なし -style:形状値(綴り)
-top
-bottom
-left
-right
　[]＝半角英数のスペース
枠線（外縁）に線の種類「style」の四辺個別にし、まとめて値指定
セレクタ（要素名）[]border-style: 個別指定なし 形状値
上下と左右の場合 形状値[]形状値
上と左右と下の場合 形状値[]形状値[]形状値
上と左と右と下の場合 形状値[]形状値[]形状値[]形状値

　インラインでは、例：<H1 style="border-style:値指定">になります。

　[]＝半角英数のスペース
枠線（外縁）に色「color」を指定
セレクタ（要素名） []border 指定なし -color:色値(RGB、カラーネーム)
-top
-bottom
-left
-right
　[]＝半角英数のスペース
枠線（外縁）に線の色「color」の四辺個別にし、まとめて値指定
セレクタ（要素名）[]border-color: 個別指定なし 色値
上下と左右の場合 色値[]色値
上と左右と下の場合 色値[]色値[]色値
上と左と右と下の場合 色値[]色値[]色値[]色値

◆　CSS：MARGIN属性

　表示領域の周囲にある外側の余白（マージン）を設定します。

外側の余白のサイズ値は
・数値単位
px、em
・パーセント
親要素との割合で指定
・auto
領域サイズ（WIDTH/HEIGHTのプロパティ）や親要素サイズから自動設定
●　MARGIN属性の組み合わせ
　[]＝半角英数のスペース
MARGINの基本指定
セレクタ
（要素名）		 []margin -（ハイフン）から
部分の指定をし:（ダブルコロン）		 各値
外側の余白（マージン）を個別に指定
セレクタ
（要素名）		 []margin 指定なし :サイズ値
-top
-bottom
-left
-right
　[]＝半角英数のスペース
外側の余白「margin」の四辺個別にし、まとめて値指定
セレクタ（要素名）[]margin: 個別指定なし サイズ値
上下と左右の場合 サイズ値[]サイズ値
上と左右と下の場合 サイズ値[]サイズ値[]サイズ値
上と左と右と下の場合 サイズ値[]サイズ値[]サイズ値[]サイズ値

◆　CSS：PADDING属性

　表示領域の周囲にある内側の余白（パディング）を設定します。

内側の余白のサイズ値は
・数値単位
px、pt
・パーセント
親要素との割合で指定
●　PADDING属性の組み合わせ
　[]＝半角英数のスペース
PADDINGの基本指定
セレクタ
（要素名）		 []padding -（ハイフン）から
部分の指定をし:（ダブルコロン）		 各値
内側の余白（パディング）を個別に指定
セレクタ
（要素名）		 []padding 指定なし :サイズ値
-top
-bottom
-left
-right
　[]＝半角英数のスペース
内側の余白「padding」の四辺個別にし、まとめて値指定
セレクタ（要素名）[]padding: 個別指定なし サイズ値
上下と左右の場合 サイズ値[]サイズ値
上と左右と下の場合 サイズ値[]サイズ値[]サイズ値
上と左と右と下の場合 サイズ値[]サイズ値[]サイズ値[]サイズ値

◆　CSS：領域表示その他

●　POSITION：領域の配置方法を指定

　POSITIONは、指定した要素の表示位置を方向設定します。

  値 解説
position: static 初期値
relative ページ指定配置の位置（原点）から相対座標で表示位置を配置指定。
（座標は、top、bottom、left、right のプロパティで指定）
absolute 領域位置を絶対座標で表示位置を配置指定。
（ブラウザの画面、左端を基点にし、top、bottom、left、right のプロパティで指定）
fixed 領域位置を絶対座標で表示位置を配置指定。
画面をスクロールしても常に同じ位置に表示
●　POSITION：上下左右の位置を指定

top、bottom、left、right のプロパティを使い表示領域を指定配置する。

距離の値

clip：範囲指定
スタイルシートのCLIPを使いトリミングします。「clip:auto」は初期値で「clip:rect」で指定します。
clip:rect(数px[]数px[]数px[]数px)の（）内は（上[]右[]下[]左）という順番に数値指定します。（[]は、半角スペース）

・　その他

visibility:hidden：非表示その一
IMG{visibility:hidden}で画像は表示しません。

display:none：非表示その二
IMG{display:none}で画像は表示しません。

●　マウスポインタの形状を変更

　マウスポインタの形（カーソル）を「cursor:形状名」で、変えることができます。
BODY{cursor:形状名} は、ページ全体に対して変ります。
<要素名[]style="cursor:形状名">〜〜〜</要素名>は、マウスポインタが要素名に乗った時に変ります。
（[]は、半角スペース）
例えば：<a href="URL" style="cursor:help">〜〜〜</要素名>とします。
表示例：〜〜〜　どうですか？普通リンクには手の形Gが出るはずが、ヘルプ（？）になってます。

形状名 説明 表示例（マウスをポイントしてください）
┓
┃
┃
┃
┃
┣其々変化
┃
┃
┃
┛
auto 初期値で何も変りません ？？？
crosshair クロス（十字） ？？？
default 普通の選択マウスポインタの矢印 ？？？
pointer リンクポインタ ？？？
move 矢印クロス（移動可ポインタ） ？？？
text テキストポインタ ？？？
wait 時計・砂時計ポインタ ？？？
help ヘルプポインタ ？？？
n-resize 上に動かせるポインタ ？？？ ┳IEでは、同じ
┛
s-resize 下に動かせるポインタ ？？？
w-resize 左に動かせるポインタ ？？？ ┳IEでは、同じ
┛
e-resize 右に動かせるポインタ ？？？
nw-resize 左上に動かせるポインタ ？？？ ┳IEでは、同じ
┛
se-resize 右下に動かせるポインタ ？？？
ne-resize 右上に動かせるポインタ ？？？ ┳IEでは、同じ
┛
sw-resize 左下に動かせるポインタ ？？？
not-allowed 禁止マーク ？？？ IE 6.0 以降に対応
no-drop pointerに禁止マーク ？？？ IE 6.0 以降に対応
progress 矢印に砂時計 ？？？ IE 6.0 以降に対応
all-scroll 全方向スクロール ？？？ IE 6.0 以降に対応
vertical-text 縦書きテキスト ？？？ IE 6.0 以降に対応
col-resize 横方向リサイズ ？？？ IE 6.0 以降に対応
row-resize 縦方向リサイズ ？？？ IE 6.0 以降に対応
IE 6.0 以降に対応ですが、他にも自作カーソルを創りページに表示させることが可能です。
「 style="cursor:url(自作ファイル名)"の形式ですが、拡張子は「.ani」か「.cur」にすることが条件です。
　【←BACK 】
Copyright (c) Producer by System KS. 2001 All rights reserved.