●CSSのサンプル例→ >
№00 >
№01 >
№02 >
№03 >
№04 >
№05 >
№06 >
№07 >
END
06css_iframe(フレーム)+CSS_form(フォーム)+css_cursor(カーソル)+css_print(印刷)
サンプル例
●01width/height(フレーム)
●02border(フレーム)
●03background-color(フレーム)
●04background-image(フレーム)
●0501width/height(フォーム)
●0602border(フォーム)
●0703background-color(フォーム)
●0804outline(フォーム)
●0901cursor(カーソル)
●1001page-break-before
●1102page-break-after
END
06css_iframe(フレーム)+CSS_form(フォーム)+css_cursor(カーソル)+css_print(印刷)
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>
|
▲Top
02borderプロパティは、設定をまとめて指定します。
ここでは、部品のボーダーに関する設定を紹介します。適用要素:すべての要素
*CASE:input要素、textarea要素、select要素
▲Top
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>
|
▲Top
background-imageプロパティは、背景画像の指定します。
ここではインラインフレームの背景画像の指定を紹介します。
適用要素:すべての要素
*読み込まれる文書に設定します。
値 |
解説 |
none |
背景画像を使用しない(初期値) |
URI |
背景画像のuriを指定 |
※CSS
body {
background-image: url(bg.gif);
}
※HTML
<div class="sample"><iframe src="iframe.html">代替内容</iframe></div>
|
▲Top
widthプロパティ、heightプロパティで、幅や高さを指定します。
ここでは、部品に対する幅や高さの設定を紹介します。
適用要素(width):すべての要素(置換要素以外のインライン要素とtr要素、thead要素、tbody要素、tfoot要素を除く)
適用要素(height):すべての要素(置換要素以外のインライン要素とcol要素、colgroup要素を除く)
*CASE:input要素、textarea要素、select要素
値 |
解説 |
実数値+単位 |
幅や長さを数値(px等の単位をつけて)で設定 |
%値 |
幅や長さを親ボックスに対する割合で設定 |
auto |
幅や長さをブラウザに依存して設定(初期値) |
▲Top
borderプロパティは、設定をまとめて指定します。
ここでは、部品のボーダーに関する設定を紹介します。
適用要素:すべての要素
*CASE:input要素、textarea要素、select要素
値 |
border-colorプロパティで指定する値 |
border-widthプロパティで指定する値 |
border-styleプロパティで指定する値 |
▲Top
background-colorプロパティは、背景色の指定します。
ここでは、部品の背景色の指定を紹介します。
適用要素:すべての要素
*CASE:input要素、textarea要素、select要素
値 |
解説 |
transparent |
背景を透明にする(初期値) |
背景色 |
カラーコード、キーワード 色見本はこちらを参照下さい |
▲Top
outlineプロパティは、アウトラインに関する設定をまとめて指定します。
ここでは、部品の設定を紹介します。
適用要素:すべての要素
*CASE:input要素、textarea要素、select要素
*IEは標準モードでのみ機能(IE7以下は未対応)。
値 |
outline-colorプロパティで指定する値 |
outline-widthプロパティで指定する値 |
outline-styleプロパティで指定する値 |
▲Top
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
|
▲Top
page-break-beforeプロパティは、印刷の改ページ箇所(要素の直前)を指定します。
適用要素:ブロックレベル要素
値 |
解説 |
auto |
改ページの制御なし(初期値) |
always |
直前で改ページする |
avoid |
改ページしない |
left |
左ページに改ページする |
right |
右ページに改ページする |
※CSS
CSS
hr {
page-break-before: always;
}
※HTML
|
▲Top
page-break-afterプロパティは、印刷の改ページ箇所(要素の直後)を指定します。
適用要素:ブロックレベル要素
値 |
解説 |
auto |
改ページの制御なし(初期値) |
always |
直後で改ページする |
avoid |
改ページしない |
left |
左ページに改ページする |
right |
右ページに改ページする |
※CSS
CSS
hr {
page-break-after: always;
}
※HTML
|
▲Top