Home > ★Lesson⇒ menu  ★html_Lesson⇒  01Spell Lesson > 02sample  ★css_Lesson⇒  01Spell Lesson№1 > 02Spell Lesson№2 > 03sample 

●CSSのサンプル例→ > №01 > №02 > №03 > №04 > №05 > №06 > №00 > END

06css_iframe(フレーム)＋CSS_form(フォーム)＋css_cursor(カーソル)＋css_print(印刷）

06css_iframe(フレーム)＋CSS_form(フォーム)＋css_cursor(カーソル)＋css_print(印刷)

01width/height

widthプロパティ、heightプロパティで、幅や高さを指定します。 ここでは、インラインフレームに対する幅や高さの設定を紹介します。 適用要素(width)：すべての要素（置換要素以外のインライン要素とtr要素、thead要素、tbody要素、tfoot要素を除く） 適用要素(height)：すべての要素（置換要素以外のインライン要素とcol要素、colgroup要素を除く）

値 解説
実数値+単位 幅や長さを数値（px等の単位をつけて）で設定
%値 幅や長さを親ボックスに対する割合で設定
auto 幅や長さをブラウザに依存して設定（初期値）
※CSS 

CSS
iframe {
	width: 300px;
	height: 180px;
}

※HTML
<div class="sample"><iframe src="00_image/iframe.html">代替内容</iframe></div>
※★sample
★①01width/heightサンプル

▲Ｔｏｐ

02border

02borderプロパティは、設定をまとめて指定します。 ここでは、部品のボーダーに関する設定を紹介します。適用要素：すべての要素 *CASE:input要素、textarea要素、select要素

値 解説
○○○ ○○○○○○○○○
※値 

border-colorプロパティで指定する値
border-widthプロパティで指定する値
border-styleプロパティで指定する値


★CSS
input {
	width: 300px;
	height: 15px;
	border: 1px solid #990099;
	font-size: 12px;
}


<p><input type="text" name="name"></p>

※HTML
※★sample
★①02borderサンプル

▲Ｔｏｐ

03background-color

background-colorプロパティは、背景色の指定します。 ここでは、インラインフレームの背景色の指定を紹介します。 適用要素：すべての要素 *読み込まれる文書に設定します。 *IE、Opera以外のブラウザはこの設定がなくても透過します。 *IEで透過させる場合allowtransparency="true"属性も必須です。

値 解説
transparent 背景を透明にする（初期値）
背景色 カラーコード、キーワード
色見本はこちらを参照下さい
※CSS 

body {
	background-color: transparent;
}

※HTML
<div class="sample1"><iframe src="00_image/iframe.html">
代替内容</iframe></div>
<div class="sample2"><iframe src="00_image/iframe.html"
 allowtransparency="true">代替内容</iframe></div>
※★sample
★①03background-colorサンプル

▲Ｔｏｐ

04background-image

background-imageプロパティは、背景画像の指定します。 ここではインラインフレームの背景画像の指定を紹介します。 適用要素：すべての要素 *読み込まれる文書に設定します。

値 解説
none 背景画像を使用しない（初期値）
URI 背景画像のuriを指定
※CSS 

body {
	background-image: url(bg.gif);
}

※HTML
<div class="sample"><iframe src="iframe.html">代替内容</iframe></div>
※★sample
★①04background-imageサンプル

▲Ｔｏｐ

05width/height

widthプロパティ、heightプロパティで、幅や高さを指定します。 ここでは、部品に対する幅や高さの設定を紹介します。 適用要素(width)：すべての要素（置換要素以外のインライン要素とtr要素、thead要素、tbody要素、tfoot要素を除く） 適用要素(height)：すべての要素（置換要素以外のインライン要素とcol要素、colgroup要素を除く） *CASE:input要素、textarea要素、select要素

値 解説
実数値+単位 幅や長さを数値（px等の単位をつけて）で設定
%値 幅や長さを親ボックスに対する割合で設定
auto 幅や長さをブラウザに依存して設定（初期値）
※CSS 

CSS
input {
	width: 300px;
	height: 15px;
	font-size: 12px;
}

※HTML
<p><input type="text" name="name" /></p>
※★sample
★①05width/heightサンプル

▲Ｔｏｐ

06border

borderプロパティは、設定をまとめて指定します。 ここでは、部品のボーダーに関する設定を紹介します。 適用要素：すべての要素 *CASE:input要素、textarea要素、select要素

値
border-colorプロパティで指定する値
border-widthプロパティで指定する値
border-styleプロパティで指定する値
※CSS 

input {
	width: 300px;
	height: 15px;
	border: 1px solid #990099;
	font-size: 12px;
}

※HTML
<p><input type="text" name="name" /></p>
※★sample

★①06borderサンプル

▲Ｔｏｐ

07background-color

background-colorプロパティは、背景色の指定します。 ここでは、部品の背景色の指定を紹介します。 適用要素：すべての要素 *CASE:input要素、textarea要素、select要素

値 解説
transparent 背景を透明にする（初期値）
背景色 カラーコード、キーワード
色見本はこちらを参照下さい
※CSS 

CSS
.sample1 input {
	width: 300px;
	height: 20px;
	background-color: #9fb7d4;
}

.sample2 input {
	width: 300px;
	height: 20px;
}
.sample2 input:focus {/*IEは標準モードでのみ機能（IE7以下は未対応）。*/
	background-color: #9fb7d4;
}

※HTML
<div class="sample1"><input type="text" name="name" value="sample1" /></div>
<div class="sample2"><input type="text" name="name" value="sample2" /></div>
※★sample
★①07background-colorサンプル

▲Ｔｏｐ

08outline

outlineプロパティは、アウトラインに関する設定をまとめて指定します。 ここでは、部品の設定を紹介します。 適用要素：すべての要素 *CASE:input要素、textarea要素、select要素 *IEは標準モードでのみ機能（IE7以下は未対応）。

値
outline-colorプロパティで指定する値
outline-widthプロパティで指定する値
outline-styleプロパティで指定する値
※CSS 

CSS
input:focus {
	outline: 1px solid #990099;
}

※HTML
<div><input type="text" name="name" /></div>
※★sample
★①08outlineサンプル

▲Ｔｏｐ

09cursor

cursorプロパティは、カーソルの形状を指定します。 適用要素：すべての要素

値 解説（カーソル一覧）
auto 自動選択（初期値）
default デフォルト
pointer リンク
crosshair クロス
move 移動
text テキスト
wait 処理中
help ヘルプ
n-resize 上リサイズ
e-resize 右リサイズ
s-resize 下リサイズ
w-resize 左リサイズ
ne-resize 右上リサイズ
se-resize 右下リサイズ
sw-resize 左下リサイズ
nw-resize 左上リサイズ
url(uri) オリジナル
値 解説（独自拡張カーソル一覧）
col-resize 左右リサイズ
row-resize 上下リサイズ
all-scroll 上下左右スクロール
not-allowed 不可
no-drop ドロップ不可
progress 処理中
vertical-text 縦書テキスト
※CSS 

.sample {
	cursor: auto;
}



カーソル一覧
auto
default
pointer
crosshair
move
text
wait
help
n-resize
e-resize
s-resize
w-resize
ne-resize
se-resize
sw-resize
nw-resize
url(URI)

独自拡張カーソル一覧
col-resize
row-resize
all-scroll
not-allowed
no-drop
progress
vertical-text

※HTML
※★sample
★①09cursorサンプル

▲Ｔｏｐ

10page-break-before

page-break-beforeプロパティは、印刷の改ページ箇所（要素の直前）を指定します。 適用要素：ブロックレベル要素

値 解説
auto 改ページの制御なし（初期値）
always 直前で改ページする
avoid 改ページしない
left 左ページに改ページする
right 右ページに改ページする
※CSS 

CSS
hr {
	page-break-before: always;
}

※HTML
※★sample
★①10page-break-beforeサンプル

▲Ｔｏｐ

11page-break-after

page-break-afterプロパティは、印刷の改ページ箇所（要素の直後）を指定します。 適用要素：ブロックレベル要素

値 解説
auto 改ページの制御なし（初期値）
always 直後で改ページする
avoid 改ページしない
left 左ページに改ページする
right 右ページに改ページする
※CSS 

CSS
hr {
	page-break-after: always;
}

※HTML
※★sample
★★①11page-break-afterサンプル

▲Ｔｏｐ