要素の位置調整と表示
- position(位置)
- top (上位置の指定）
- left(左位置の指定）
- bottom(下位置の指定）
- right(右位置の指定）
- width(幅)
- min-width(最小幅)
- max-width(最大幅)
- height(高さ)
- min-height(最低)
- max-height(最高)
- overflow(収まりきれない場合)
- direction(指示)
- float(左右への回り込みを指定する)
- clear(左右への回り込みを解除する)
- z-index(要素の重ね順を指定する)
- display(要素の表示の仕方を設定する)
- visibility(要素の表示/非表示を設定する)
- clip(要素内のみ得る範囲を指定する)
position (位置)
CSS2
positionとは、ボックスの配置方法を指定するためのプロパティです。初期値はstaticであり、配置方法を指定しないのと同義になります。相対配置する場合にはrelative、絶対配置をする場合にはabsoluteを指定します。fixedを指定すると、他の要素からは独立しつつページに対し固定されます。
| 値 | static | relative | absolute | fixed | inherit |
|---|---|
| 初期値 | static |
| 適用 | 生成内容以外のすべての要素 |
| 継承 | しない |
| 値 | 機能 |
|---|---|
| absolute | ひとつ外側のボックスからの絶対位置で配置する注意 |
| relative | 標準の位置からの相対位置で配置する |
| static | 配置方法を指定しない標準の状態に設定する |
| fixed | ひとつ外側のボックスからの位置で配置し固定する |
注意基準となるブロックにはposition: relativeを指定しないとブラウザーの枠がposition:
absoluteの基準となります。逆にブラウザーを基準にしたい場合は、ひとつ外側のボックス要素にはposition:は指定しません。
適応要素 ：すべての要素 (自動生成コンテンツを除く)
継承 ：しない (デフォルト値 ＝static )
要素のは位置方法を指定する属性です。
static を指定するとtop、left、right、bottom といった表示位置を調整する属性は無効になります。position属性を単独で指定してもあまり効果なく、通常はtop、left、right、bottom という表示位置を指定する属性と共に使用します。
DIVの表示位置を制御するDIV(position)を使いこなす
<head>
<title>position</title>
<style type="text/css">
<!--
body { }
#box1 { position:absolute;
top:10px;
left:10px;
width:150px;
height:150px;
z-index:1;
}
#box2 { position:absolute;
top:40px;
left:40px;
width:100px;
height:100px;
z-index:2;
}
#box3 { position:absolute;
top:80px;
left:50px;
width:150px;
height:150px;
z-index:3;
}
#box4 { position:absolute;
top:40px;
left:20px;
width:70px;
height:70px;
z-index:1;
}
#box5 { position:absolute;
top:60px;
left:10px;
width:80px;
height:80px;
z-index:2;
}
#box6 { position:absolute;
top:20px;
left:50px;
width:90px;
height:90px;
z-index:-1;
}
-->
</style>
</head>
<body bgcolor="FFFFFF"
text="#000000">
<div
id="box1"
style="background:red;
border:solid 2px blue;">
box1
</div>
<div
id="box2"
style="background:blue;
border:solid 2px white;">
box2</div>
<div
id="box3"
style="background:yellow;
border:solid 2px red;">
box3
<div
id="box4"
style="background:gold;
border:solid 2px green;">
box4</div>
<div
id="box5"
style="background:lime;
border:solid 2px navy;">
box5</div>
<div
id="box6"
style="background:red;
border:solid 2px blue;">
box6</div>
</div>
</body>
</html>
top上からの位置を指定する
topとは、ある要素を相対もしくは絶対配置する場合に、基準となるボックスとの位置関係を指定するためのプロパティのひとつです。基準となるボックスの上から指定するボックスの上までの距離を、数値に単位をつけて指定、もしくはautoを指定します。
autoはtopプロパティの初期値であり、距離は場合に応じて自動的に決定されます。
left左からの位置を指定する
leftとは、ある要素を相対もしくは絶対配置する場合に、基準となるボックスとの位置関係を指定するためのプロパティのひとつです。基準となるボックスの左から、指定するボックスの左までの距離を、数値に単位をつけて指定、もしくはautoを指定します。
autoはleftプロパティの初期値であり、距離は場合に応じて自動的に決定されます。
bottom下からの位置を指定する
bottomとは、ある要素を相対もしくは絶対配置する場合に、基準となるボックスとの位置関係を指定するためのプロパティのひとつです。基準となるボックスの下から、指定するボックスの下までの距離を、数値に単位をつけて指定、もしくはautoを指定します。
autoはbottomプロパティの初期値であり、距離は場合に応じて自動的に決定されます。
right右からの位置を指定する
rightとは、ある要素を相対もしくは絶対配置する場合に、基準となるボックスとの位置関係を指定するためのプロパティのひとつです。基準となるボックスの右から、指定するボックスの右までの距離を、数値に単位をつけて指定、もしくはautoを指定します。
autoはrightプロパティの初期値であり、距離は場合に応じて自動的に決定されます。'position' の値がstatic
以外の場合、ボックスの包含ブロックに対するオフセット値を指定できます。
| プロパティ名 | 値 |
|---|---|
| top, right, bottom, left | <length> | <percentage> | auto | inherit |
オフセット関連のプロパティは子要素に継承されません。デフォルトの値は、auto です。inherit
は、親要素の値を明示的に継承する指定です。
<percentage>- 包含ブロックの幅又は高さを 100% としてパーセントで指定する。
'
top', 'bottom' に対しては、包含ブロックの高さが明示的に指定されない場合は、'auto' の場合と同様に解釈される。 auto- 0 で置換するか、利用可能な包含ブロックのサイズに対する変数値と解釈される。
| 値 | 機能 |
|---|---|
| 数値＋単位 | em, ex, pt, px などの単位で指定 |
| 数値＋％ | ひとつ外側のボックスに対する割合 |
| auto | 自動調整 |
適応要素 ：位置指定されるすべての要素
継承 ：しない (デフォルト値 ＝auto )
要素の位置方法を指定する属性です。
static を指定するとtop、left、right、bottom といった表示位置を調整する属性は無効になります。通常はposition属性と共に使われます。
TOP: 4.8cm">
<IMG height=181 alt=ワン src="../../images/hund.gif"
width=208 border=0>
</DIV>
<DIV
style="BORDER-RIGHT: #804000 1px solid;
PADDING-RIGHT: 10px;
BORDER-TOP: #804000 1px solid;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
BORDER-LEFT: #804000 1px solid;
WIDTH: 208px;
PADDING-TOP: 10px;
BORDER-BOTTOM: #804000 1px solid;
POSITION: absolute;
TOP: 3.6cm;
BACKGROUND-COLOR: #ffffe0">
どうだい！<br>
CSSを理解できたかい<br>
まあ、ゆっくりしていきな
</DIV>
left(左)
leftとは、ある要素を相対もしくは絶対配置する場合に、基準となるボックスとの位置関係を指定するためのプロパティのひとつです。基準となるボックスの左から、指定するボックスの左までの距離を、数値に単位をつけて指定、もしくはautoを指定します。autoはleftプロパティの初期値であり、距離は場合に応じて自動的に決定されます。
| 値 | <長さ> | <パーセンテージ> | auto | inherit |
|---|---|
| 初期値 | auto |
| 適用 | 'position'が[static]以外の要素 |
| 継承 | しない |
POSITION: absolute;
TOP: 100px">
<IMG height=181 alt=ワン src="../../images/hund.gif"
width=208 border=0>
</DIV>
<DIV
style="BORDER-RIGHT: #804000 1px solid;
PADDING-RIGHT: 10px;
BORDER-TOP: #804000 1px solid;
PADDING-LEFT: 10px;
LEFT: 350px;
PADDING-BOTTOM: 10px;
BORDER-LEFT: #804000 1px solid;
WIDTH: 200px;
PADDING-TOP: 10px;
BORDER-BOTTOM: #804000 1px solid;
POSITION: absolute;
TOP: 140px;
BACKGROUND-COLOR: #ffffe0">
あまり深刻に考えずに<br>
気軽につかってみるさ<br>
どんなところに使うか<br>
bottom(下)
bottomとは、ある要素を相対もしくは絶対配置する場合に、基準となるボックスとの位置関係を指定するためのプロパティのひとつです。基準となるボックスの下から、指定するボックスの下までの距離を、数値に単位をつけて指定、もしくはautoを指定します。autoはbottomプロパティの初期値であり、距離は場合に応じて自動的に決定されます。
'position' の値がstatic 以外の場合、ボックスの包含ブロックに対するオフセット値を指定できます。
| プロパティ名 | 値 |
|---|---|
| top, right, bottom, left | <length> | <percentage> | auto | inherit |
オフセット関連のプロパティは子要素に継承されません。デフォルトの値は、auto です。inherit
は、親要素の値を明示的に継承する指定です。
<percentage>- 包含ブロックの幅又は高さを 100% としてパーセントで指定する。
'
top', 'bottom' に対しては、包含ブロックの高さが明示的に指定されない場合は、'auto' の場合と同様に解釈される。 auto- 0 で置換するか、利用可能な包含ブロックのサイズに対する変数値と解釈される。
style="LEFT: 100px;
BOTTOM: 0px;
POSITION: absolute">
この場合あまり文字が多いとかっこよくないさ<BR>
<IMG height=181 alt=ワン src="../../images/hund.gif"
width=208 border=0>
</DIV>
right(右)
rightとは、ある要素を相対もしくは絶対配置する場合に、基準となるボックスとの位置関係を指定するためのプロパティのひとつです。基準となるボックスの右から、指定するボックスの右までの距離を、数値に単位をつけて指定、もしくはautoを指定します。autoはrightプロパティの初期値であり、距離は場合に応じて自動的に決定されます。
'position' の値がstatic 以外の場合、ボックスの包含ブロックに対するオフセット値を指定できます。
| プロパティ名 | 値 |
|---|---|
| top, right, bottom, left | <length> | <percentage> | auto | inherit |
オフセット関連のプロパティは子要素に継承されません。デフォルトの値は、auto です。inherit
は、親要素の値を明示的に継承する指定です。
<percentage>- 包含ブロックの幅又は高さを 100% としてパーセントで指定する。
'
top', 'bottom' に対しては、包含ブロックの高さが明示的に指定されない場合は、'auto' の場合と同様に解釈される。 auto- 0 で置換するか、利用可能な包含ブロックのサイズに対する変数値と解釈される。
style="RIGHT: 0px;
POSITION: absolute;
TOP: 100px">
右に貼り付けて見たよ<BR>
<IMG height=181 alt=ワン src="../../images/hund.gif"
width=208 border=0>
</DIV>
width(幅)
widthとは、ブロックレベル要素や置換要素の横幅を指定するためのプロパティです。実数値に単位を付けて指定します。初期値はautoであり、自動的に適切な内容幅が設定されます。
| 書式 | width: <value:値> |
|---|---|
| 値 | <length> |<percentage> | auto |
| 初期値 | auto |
| 適用要素 | ブロック−レベルとそれに代わる要素 |
| 継承性 | 不可 |
各ブロック−レベルまたは置き代えられる要素は、幅を持ち得て、length・percentageまたはautoとして特定されます（置き代えられる要素は、内部次元のみが知られているものの一つ；置き代えられるHTML要素には IMG・ INPUT・ TEXTAREA・ SELECTそして OBJECTがあります）。
widthプロパティーの初期値はautoで、これは結果として要素の内部幅になります（例、要素自身の幅は、例えば画像の幅）。
パーセントは親要素の幅を参照します。マイナスは許されていません。このプロパティーは、送信（submit）や再設定（reset）ボタンのような INPUT要素に共通の幅を与えるのに使うことができます：
style="width:200px;
overflow:hidden;
border:1px solid red;
padding:10px;
font-size:36pt">
xxxxxxxxxxxxxxxxxxxxxxxx
</h1>
min-width
min-widthとは、ボックスのコンテンツの取りうる幅の最小値を指定するためのプロパティです。値には実数値に単位をつけて指定します。
| 値 | <長さ> | <パーセンテージ> | inherit |
|---|---|
| 初期値 | 0 |
| 適用 | 非置換インライン要素、表関連要素以外の要素すべて |
| 継承 | しない |
POSITION: absolute;
TOP: 100px">
右に貼り付けて見たよ<BR><IMG height=181 alt=ワン src="../../images/hund.gif"
width=208 border=0>
</DIV>
max-width (最幅)
max-widthとは、ボックスのコンテンツの取りうる幅の最大値を指定するためのプロパティです。値には実数値に単位をつけて指定します。
| 値 | <長さ> | <パーセンテージ> | none | inherit |
|---|---|
| 初期値 | none |
| 適用 | 非置換インライン要素、表関連要素以外の要素すべて |
| 継承 | しない |
PADDING-RIGHT: 10px;
BORDER-TOP: green 1px solid;
PADDING-LEFT: 10px;
FONT-SIZE: 36pt;
PADDING-BOTTOM: 10px;
OVERFLOW: hidden;
BORDER-LEFT: green 1px solid;
PADDING-TOP: 10px;
BORDER-BOTTOM: green 1px solid;
max-width: 250px">
H1の今度は幅の制御です </H1>
height (高)
heightとは、ボックスのコンテンツの高さを指定するためのプロパティです。初期値はautoであり、高さは場合に応じて自動的に決定されます。また、実数値に単位をつけて指定することもできます。なお、マイナスを指定することはできません。
| 書式 | height: <value:値> |
|---|---|
| 値 | <length> | auto |
| 初期値 | auto |
| 適用要素 | ブロック−レベルと置き代えできる要素 |
| 継承性 | 不可 |
各ブロック−レベルまたは置き代えられる要素は高さが与えられ、lengthか autoとして特定されます（置き代えられる要素は、 IMG・ INPUT・ TEXTAREA・ SELECTそして OBJECTを含みます）。heightプロパティーの初期値は autoで、結果的に要素の内部の高さになります（例、要素自身の高さは、例えば画像の高さに）。負の高さは許されていません。
widthプロパティーでのように、 heightは画像を計測するのに使えます：
height: 40px }
多くの場合制作者は画像編集プログラムで画像を計測するよう忠告されますすが、というのはブラウザは精度の高い画像計測をしないようだからで、小規模化がユーザーに不必要に大きなファイルを保存させることになるからです。しかし、 widthやheightプロパティーでの小規模化は、視覚問題を克服するするために、ユーザー定義のスタイル・シートでの有用な選択です。
style="BORDER-RIGHT: red 1px solid;
PADDING-RIGHT: 10px;
BORDER-TOP: red 1px solid;
PADDING-LEFT: 10px;
FONT-SIZE: 36pt;
PADDING-BOTTOM: 10px;
OVERFLOW: hidden;
BORDER-LEFT: red 1px solid;
WIDTH: 300px;
PADDING-TOP: 10px;
BORDER-BOTTOM: red 1px solid;
HEIGHT: 100px">
高さだってさどう変わるのかよくわからない？？</H1>
<p>指定を超えた分は表示されません</p>
min-height (最低)
min-heightとは、ボックスのコンテンツの取りうる高さの最小値を指定するためのプロパティです。値には実数値に単位をつけて指定します。
| 値 | <長さ> | <パーセンテージ> | inherit |
|---|---|
| 初期値 | 0 |
| 適用 | 非置換インライン要素、表関連要素以外の要素すべて |
| 継承 | しない |
PADDING-RIGHT: 10px;
BORDER-TOP: blue 1px solid;
PADDING-LEFT: 10px;
MIN-HEIGHT: 200px;
LEFT: 100px;
PADDING-BOTTOM: 10px;
BORDER-LEFT: blue 1px solid;
PADDING-TOP: 10px;
BORDER-BOTTOM: blue 1px solid;
POSITION: absolute;
TOP: 100px">
最小の高さって実際どのように使うのかな？</DIV>
max-height (最高)
max-heightとは、ボックスのコンテンツの取りうる高さの最大値を指定するためのプロパティです。値には実数値に単位をつけて指定します。
| 値 | <長さ> | <パーセンテージ> | none | inherit |
|---|---|
| 初期値 | none |
| 適用 | 非置換インライン要素、表関連要素以外の要素すべて |
| 継承 | しない |
max-height:300px;
overflow:hidden;
border:solid 1px green;
font-size:36pt;
padding:10px">
xxxxxxxxxxxxxxxx</h1>
overflow内容が収まりきれない場合の表示方法を設定する
CSS2
overflowとは、ボックスのコンテンツがボックスの外にはみ出る場合の表示形式を指定するためのプロパティです。初期値はvisibleであり、ボックスの外にはみ出してもコンテンツはすべて表示されます。このほかに、はみ出る部分を表示しないhidden、ボックスの大きさはそのままにスクロールバーを使ってコンテンツを表示できるようにするscroll、ブラウザに処理を任せるautoが指定できます。
| 値 | visible | hidden | scroll | auto | inherit |
|---|---|
| 初期値 | visible |
| 適用 | ブロック要素 及び 置換要素 |
| 継承 | しない |
overflow-xoverflow-y
overflowとは、ボックスのコンテンツがボックスの外にはみ出る場合の表示形式を指定するためのプロパティです。初期値はvisibleであり、ボックスの外にはみ出してもコンテンツはすべて表示されます。このほかに、はみ出る部分を表示しないhidden、ボックスの大きさはそのままにスクロールバーを使ってコンテンツを表示できるようにするscroll、ブラウザに処理を任せるautoが指定できますそれぞれ横方向、縦方向にはみ出した部分をどう処理するのかを指定します。
'overflow'を縦方向と横方向、独立して考えたプロパティです。
| 値 | visible | hidden | scroll | auto |
|---|---|
| 初期値 | visible |
| 適用 | ブロック要素 及び 置換要素 |
| 継承 | しない |
| 値 | 機能 |
|---|---|
| visible | はみ出た部分も表示する |
| hidden | はみ出た部分は表示しない |
| scroll | スクロールして表示する |
| auto | 自動調整 |
適応要素 ：ブロックレベル要素、置換要素
継承 ：しない (デフォルト値 ＝auto )
height 属性やwidth 属性でボックス領域の幅や高さを指定すると、コンテンツの量によってはボックス領域内に収まりきれないことがあります。この属性は、コンテンツがあふれる場合の処理を指定します。
BORDER-TOP: #804000 thin solid;
LEFT: 100px;
OVERFLOW: hidden;
BORDER-LEFT: #804000 thin solid;
WIDTH: 200px;
BORDER-BOTTOM: #804000 thin solid;
POSITION: absolute;
TOP: 100px;
HEIGHT: 150px">
画像が入りきらない<BR><IMG height=181 alt=ワン src="../../images/hund.gif"
width=208 border=0></DIV>
direction（指示）
directionとは、文字表記の方向性を指定するためのプロパティです。初期値はltrであり、文字は左から右に向かって順に表記されます。これと逆に、値にrtlを指定した場合、文字は右から左に向かって順に表記されます。
| 値 | ltr | rtl | inherit |
|---|---|
| 初期値 | ltr |
| 適用 | すべての要素 |
| 継承 | する |
<H1>Hi Guest</H1>
<P>もうCSSって解っただろう、あとは中身だな、内容 ...</P>
float要素の左右への回り込みを指定する
CSS1
floatとは、指定されたボックスの後続の要素を回り込ませるためのプロパティです。初期値はnoneであり、後続の要素を回り込ませません。値にleftあるいはrightを指定すると、それぞれ後続の要素を右または左に回り込ませます。
| 書式 | float: <value:値> |
|---|---|
| 値 | left | right | none |
| 初期値 | none |
| 適用要素 | 全ての要素 |
| 継承性 | 不可 |
floatプロパティーは、要素の周囲でテキストを折り返すことができます。
これは IMG要素のHTML 3.2のALIGN=leftやALIGN=rightと目的は同じですが、CSS1は全ての要素で「回り込み回避」ができ、HTML 3.2でできるimagesや tablesだけではありません。
| 値 | 機能 |
|---|---|
| left | 要素を左に配置し、その右側に他の要素が回りこむ |
| right | 要素を右に配置し、その左側に他の要素が回りこむ |
| none | 左右への配置と回り込みをしない |
適応要素 ：すべての要素 (位置を指定される要素と自動生成コンテンツを除く)
継承 ：しない (デフォルト値 ＝none )
対象となるボックス領域に対しての文字の回りこみを指定する要素です。
なお、position属性でabsoluteを指定すると無効になります。
WIDTH: 400px;
COLOR: red">HTML TAGタグたぐ〜</H1>
<P style="FONT-SIZE: 120%">
MOPAは、1995年のWindows95ブームに乗ってしまった中年サラリーマンが、インターネットに興味を持ち、調子に乗ってホームページを作ってしまったものです。HTML TAGはその過程で蓄えた資料やTipsを公開ししています。.</P>
clear左右への回り込みを解除する
CSS1
clearとは、floatプロパティで配置されたボックスに対する回り込みを解除するためのプロパティです。初期値はnoneで、回り込みを解除しません。leftを指定すると左に配置されたボックスへの回り込み、rightを指定すると右に配置されたボックスへの回りこみ、bothではすべてのボックスに対する回りこみの解除を行います。
| 書式 | clear: <value:値> |
|---|---|
| 値 | none | left | right | both |
| 初期値 | none |
| 適用要素 | 全ての要素 |
| 継承性 | 不可 |
clearプロパティーは、要素が側面に要素の回り込み回避を可能にするかどうかを特定します。leftの値は、左側で回避する要素の下に要素を移動するのを可能にします； rightは右側で回避する要素で同じ様に作用します。
別の値は noneで、両側面で回避する要素の下に要素を移動するのを可能にします。このプロパティーはHTML 3.2の <BR CLEAR=left|right|all|none>に機能的に似ていますが、全ての要素に適用可能です。
| 値 | 機能 |
|---|---|
| none | 回り込みを解除しない |
| right | 右に配置された要素に対する回り込みを解除する |
| left | 左に配置された要素に対する回り込みを解除する |
| both | 左右に配置された要素に対する回り込みを解除する |
適応要素 ：ブロックレベル要素
継承 ：しない (デフォルト値 ＝none )
float属性によって設定した回り込みを解除する属性です。
BORDER-TOP: red 1px solid;
FLOAT: left;
MARGIN-BOTTOM: 20px;
BORDER-LEFT: red 1px solid;
MARGIN-RIGHT: 20px;
BORDER-BOTTOM: red 1px solid;
TEXT-ALIGN: center">章<BR>
<SPAN style="FONT-SIZE: 72pt;
COLOR: red;
FONT-FAMILY: Algerian,serif">
1 </SPAN></DIV>
<P style="FONT-SIZE: 120%">画像よりは確実に軽い</P>
<P style="CLEAR: left">文章を章立てにする場合は使ってみては？</P>
z-index要素の重ね順を指定する
z-indexとは、要素を重ねる順序を指定するためのプロパティです。整数を指定しますが、値が大きければ大きいほど上に重ねて表示されます。初期値はautoであり、親要素と同じ階層に表示されます。
| 値 | 機能 |
|---|---|
| 整数 | 値が大きいほど上に配置する |
| auto | 親要素と同じ階層に配置する |
適応要素 ：位置指定されるすべての要素
継承 ：しない (デフォルト値 ＝auto )
スタイルシートでは、 position やtop、left、right、bottom 属性の値によっては要素が層状（レイヤー）に重なり合います。その際に、どの要素が前面になるかを指定する属性です。整数の指定は、0を基準にしてプラスの数値になるほど前面に重なり、逆に、マイナスになるほど背面に回ります。
指定は整数で行います。
top:100px;
left:100px;
z-index:1;
border:thin solid #804000;">
<b>1.</b><img src="hund.gif"
width="208"
height="181"
border="0"
alt="Hund">
</div>
<div style="position:absolute;
top:130px;
left:150px;
z-index:4;
border:thin solid #804000;">
<b>2.</b><img src="hund.gif"
width="208"
height="181"
border="0"
alt="Hund">
</div>
<div style="position:absolute;
top:160px;
left:200px;
z-index:2;
border:thin solid #804000;">
<b>3.</b><img src="hund.gif"
width="208"
height="181"
border="0"
alt="Hund">
</div>
<div style="position:absolute;
top:190px;
left:250px;
z-index:3;
border:thin solid #804000;">
<b>4.</b><img src="hund.gif"
width="208"
height="181"
border="0"
alt="Hund">
</div>
display要素の表示の仕方を設定する
CSS1
displayとは、要素の表示形式を指定するためのプロパティです。初期値はinlineであり、指定された要素はインラインで表示されます。このほかに、指定が可能なキーワードには要素を表示させないnone、ブロックレベルで表示するblockなどがあります。
| 書式 | display: <value:値> |
|---|---|
| 値 | block | inline | list-item | none |
| 初期値 | block |
| 適用要素 | 全ての要素 |
| 継承性 | 不可 |
displayプロパティーは四つの値の一つで要素を定義するのに使われます。
：
- block（要素の前後で改行）
- inline（要素の前後で改行しない）
- list-item（リスト項目マークを除く blockと同じブロックがつく）
- none（画面表示なし）
各要素は、典型的には初期にdisplay値がブラウザによって与えられていて、これはHTML仕様書での示唆された表示にもとずいています。不適切な形式の要素の表示能力故に displayプロパティーは危険です。値 noneは、指定された要素の子要素も含めて画面表示を無効にします。
| 値 | 機能 |
|---|---|
| block | ブロックレベル要素として扱う |
| inline | インライン要素として扱う |
| list-item | リスト項目として扱う |
| none | 表示されない |
適応要素 ：すべての要素
継承 ：しない (デフォルト値 ＝ 各要素の初期値)
表示形式を変更する属性です。
インラインレベル要素をブロックレベル要素に変更する、といったことが可能です。block 属性を指定した要素はブロックレベル要素となり、そのため、前後に改行が入ります。属性の中にはブロックレベル要素にしか影響が及ぼさないものもあるため、そのような属性を扱いたい場合は、block を指定します。inline 属性を指定した要素はインラインレベル要素となり、要素の前後には改行が入りません。リストアイテム要素として扱う場合は、 list-item 属性を指定します 。none を指定すると要素を生成しません。
要素は非表示となり、レイアウトにも影響を与えない存在しないものとして処理されます。なお、このdisplay 属性で要素の型を変更したとしても、文書の論理構造を変更するものではありません。
inline-Element</H1>
<P style="DISPLAY: inline">style="DISPLAY: inline"</P>
<H1 id=versteckt style="DISPLAY: none">表示されないH1要素</H1>
<P>style="DISPLAY: noneって何に使うんだろう？</P>
<div class="tr">
<div class="td">ich</div>
<div class="td">bin</div>
<div class="td">eine</div>
<div class="td">Tabelle</div>
</div>
</div>
visibility要素の表示/非表示を設定する
visibilityとは、ボックスを表示するかどうか指定するためのプロパティです。
初期値はvisibleであり、ボックスは表示されます。hiddenを指定するとボックスは表示されなくなります。ただし、ボックスの存在が無くなるわけではなく、他の要素のレイアウトは影響を受けません。また、表の行や列に対してcollapseを指定すると、その部分を詰めて表示されます。
| 値 | 機能 |
|---|---|
| visible | 表示する |
| hidden | 非表示にする |
| collapse | テーブルの行、列、およびそのグループを非表示にする |
適応要素 ：すべての要素
継承 ：しない (デフォルト値 ＝visible )
要素の表示・非表示を指定する属性です。
この属性は非表示であっても要素の領域は確保されます。
<HEAD>
<TITLE>visibility</TITLE>
<META http-equiv=Content-Type content="text/html;
charset=shift_jis">
<SCRIPT language=JavaScript type=text/javascript>
<!--
function show() {
if(document.getElementById)
document.getElementById("Ueberschrift")
.style.visibility = "visible";
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<H1 id=Ueberschrift style="VISIBILITY: hidden">
隠れた要素を表示させる</H1></P>
<P><A href="javascript:show()">ここをクリック</A></P>
</BODY>
</HTML>
clip要素内のみ得る範囲を指定する
clipとは、ボックスの描画領域を指定するためのプロパティです。初期値はautoであり、ボックスの全体を表示します。あるいは、上下左右の各辺から内側に向かって描画領域までの距離を個別に指定します。
| 値 | 機能 |
|---|---|
| rect | ボックスの各辺から内側への距離の見える部分を指定する |
| auto | 自動調整 |
適応要素 ：ブロックレベル要素、置換要素
継承 ：しない (デフォルト値 ＝auto )
ブロックレベル要素の一部を表示する属性です。
この属性は、position属性で、 absolute を指定していないと効果がありません
top:100px;
left:100px;
clip:rect(0px 130px 130px 0px);">
Etwas Hund:<br>
<img src="hund.gif"
width="208"
height="181"
border="0"
alt="Hund"></div>
目的別属性
広告