| | | | | | | |
| 【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。 |
displayプロパティで要素の表示形式を変更する方法を解説します。
値の種類は４つあります。
【display:block】要素をブロック要素として表示し，要素の後に改行が入る。
【display:inline】インライン要素として扱われる。
【display:list-item】要素をリスト項目として扱う。
【display:none】要素そのものをなくしてしまうので，他の要素のレイアウトに影響を与えない。
◆以下は，表示形式を指定した状態 *************************************
この下にある画像にnoneを指定して見えなくしています。
↓桂林 2002.5.1
<span>で指定されたインライン要素にblockを指定したので，改行されました。
<div>で指定されたブロック要素に
inlineを指定したので
インライン要素として扱われています。
<span>で指定された次のインライン要素にlist-itemを指定すると，リスト表示その1
リスト表示その2と表示されます。
◆表示指定をはずすと以下のようになります ******************************
この下にある画像にnoneを指定して見えなくしています。
↓桂林 2002.5.1
<span>で指定されたインライン要素にblockを指定したので，改行されました。
<div>で指定されたブロック要素に
inlineを指定したので
インライン要素として扱われています。
<span>で指定された次のインライン要素にlist-itemを指定すると，リスト表示その1
リスト表示その2と表示されます。
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>要素の表示形式を指定する</title>
<style type="text/css">
<!--
body {font-size:14px;}
div,span {background-color:#E4E4F1;
line-height:1.5em;}
.display1 {display:none;}
.display2 {display:block;}
.display3 {display:inline;}
.display4 {display:list-item;}
-->
</style>
</head>
<body>
<p>displayプロパティで要素の表示形式を変更する方法を解説します。<BR>
値の種類は４つあります。<BR><BR>
【display:block】要素をブロック要素として表示し，要素の後に改行が入る。<BR>
【display:inline】インライン要素として扱われる。<BR>
【display:list-item】要素をリスト項目として扱う。<BR>
【display:none】要素そのものをなくしてしまうので，他の要素のレイアウトに影響を与えない。<BR><BR>
◆以下は，表示形式を指定した状態 *************************************<BR><BR>
この下にある画像にnoneを指定して見えなくしています。<br>
<span class="display1">↓桂林 2002.5.1</span><br>
<img src="photo001.jpg" class="display1" alt="桂林"></p>
<p><span>で指定されたインライン要素に<span class="display2">blockを指定したので，</span>改行されました。</p>
<p><div>で指定されたブロック要素に<div class="display3">inlineを指定したので</div>インライン要素として
扱われています。</p>
<p><span>で指定された次のインライン要素にlist-itemを指定すると，<span class="display4">リスト表示その1</span>
<span class="display4">リスト表示その2</span>と表示されます。</p>
◆表示指定をはずすと以下のようになります ******************************<BR><BR>
この下にある画像にnoneを指定して見えなくしています。<br>
<span>↓桂林 2002.5.1</span><br>
<img src="photo001.jpg" alt="桂林"></p>
<p><span>で指定されたインライン要素に<span>blockを指定したので，</span>改行されました。</p>
<p><div>で指定されたブロック要素に<div>inlineを指定したので</div>インライン要素として扱われています。</p>
<p><span>で指定された次のインライン要素にlist-itemを指定すると，<span>リスト表示その1</span>
<span>リスト表示その2</span>と表示されます。</p>
</body>
</html>
a要素をブロック要素に指定する
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>a要素をブロック要素に指定する</title>
<style type="text/css">
<!--
a {display:block;
width:350px;
margin:10px;
padding:5px;
text-decoration:none;
font-weight:bold;
font-size:15px;
background-color:#C4C4FF;}
.text002 {position:absolute;
top:40px;
left:400px;
width:200px;
height:80px;
font-size:16px;
color:#ffffff;
background-color:#004080;
padding:5px;}
-->
</style>
</head>
<body>
<div>
<a Href="aaa.htm">品揃え・価格に自信あり！</a>
<a Href="bbb.htm">Yahoo！BBのお申し込みはココをクリック!!</a>
<a Href="ccc.htm">マイクロソフト ショッピング</a>
<a Href="ddd.htm">全国31店舗展開！BTOパソコンならドスパラへ！</a>
<DIV class="text002">
a要素はwidthを使った幅の指定ができませんが，
ブロック要素を使って左のように幅を合わせることができます。
</DIV>
</div>
</body>
</html>
ここにポジションを指定。
▼position:absolute ＜絶対配置＞ 表示領域（ブラウザ画面）の左上端からの距離。
HTML記述の領域は表示されない。
position
absolute
*************************************************************************
▼position:relative ＜相対配置＞ 通常の配置の位置を規準として，そこから指定した距離。
HTML記述の領域は残される。
position
ここにポジションを指定。
relative
*************************************************************************
▼position:static ＜通常通りの配置＞ 通常の配置の位置。
position
通常のポジション。
static
*************************************************************************
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>要素の配置方法〜絶対配置と相対配置</title>
<style type="text/css">
<!--
body {margin:10px;
font-size:14px;}
h3#abs {background-color:#BFE1C1;
width:300px;}
h2#abs {position:absolute;
top:50px;
left:120px;
background-color:#00B75B;
color:#ffffff;
width:300px;}
h3#rel {background-color:#E6B7BF;
width:300px;}
h2#rel {position:relative;
top:30px;
left:120px;
background-color:#D92645;
color:#ffffff;
width:300px;}
h3#sta {background-color:#A9C5E2;
width:300px;}
h2#sta {position:static;
top:30px;
left:120px;
background-color:#3D5C9E;
color:#ffffff;
width:300px;}
-->
</style>
</head>
<body>
▼position:absolute ＜絶対配置＞ 表示領域（ブラウザ画面）の左上端からの距離。<BR>
HTML記述の領域は表示されない。
<h3 id="abs">position</h3>
<h2 id="abs">ここにポジションを指定。</h2>
<h3 id="abs">absolute</h3>
<BR><FONT COLOR="#0080C0">*************************************************************************</FONT>
<BR>
▼position:relative ＜相対配置＞ 通常の配置の位置を規準として，そこから指定した距離。<BR>
HTML記述の領域は残される。
<h3 id="rel">position</h3>
<h2 id="rel">ここにポジションを指定。</h2>
<h3 id="rel">relative</h3>
<BR><FONT COLOR="#0080C0">*************************************************************************</FONT>
<BR>
▼position:static ＜通常通りの配置＞ 通常の配置の位置。
<h3 id="sta">position</h3>
<h2 id="sta">通常のポジション。</h2>
<h3 id="sta">static</h3>
<BR><FONT COLOR="#0080C0">*************************************************************************</FONT>
<BR><BR>
<IMG SRC="image001.gif" WIDTH="502" HEIGHT="202" BORDER=0>
</body>
</html>
マイナスの値を相対配置で指定する
▼position:relative ＜相対配置＞ 通常の配置の位置を規準として，そこから指定した距離。
HTML記述の領域は残される。
position
ここにポジションを指定。
relative
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>マイナスの値を相対配置で指定する</title>
<style type="text/css">
<!--
body {margin:10px;
font-size:14px;}
h3#rel4 {background-color:#E6B7BF;
width:300px;}
h2#rel4 {position:relative;
top:-20px;
left:-120px;
background-color:#D92645;
color:#ffffff;
width:300px;}
-->
</style>
</head>
<body>
▼position:relative ＜相対配置＞ 通常の配置の位置を規準として，そこから指定した距離。<BR>
HTML記述の領域は残される。
<h3 id="rel4">position</h3>
<h2 id="rel4">ここにポジションを指定。</h2>
<h3 id="rel4">relative</h3>
</body>
</html>
| | | | | | | |
| 【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。 |
要素の重なり〜HTMLの要素の順
2番と3番のHTMLの要素の記述を入れ替えると重なり方が変わります。
1番
2番
1番
2番
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>要素の重なり〜HTMLの要素の順</title>
<style type="text/css">
<!--
.kasanari1 {position:absolute;
top:40px;
left:150px;
width:180px;
height:40px;
font-size:25px;
background-color:#AAB8D5;}
.kasanari2 {position:absolute;
top:70px;
left:20px;
width:180px;
height:40px;
font-size:25px;
background-color:#D0D889;}
.kasanari3 {position:absolute;
top:45px;
left:60px;}
.kasanari1b {position:absolute;
top:40px;
left:550px;
width:180px;
height:40px;
font-size:25px;
background-color:#AAB8D5;}
.kasanari2b {position:absolute;
top:70px;
left:420px;
width:180px;
height:40px;
font-size:25px;
background-color:#D0D889;}
.kasanari3b {position:absolute;
top:45px;
left:460px;}
-->
</style>
</head>
<body>
2番と3番のHTMLの要素の記述を入れ替えると重なり方が変わります。
<div class="kasanari1">1番</div>
<div class="kasanari2">2番</div>
<div class="kasanari3">
<img src="image002.gif" alt="3番"></div>
<!-- 2番と3番を入れ替え -->
<div class="kasanari1b">1番</div>
<div class="kasanari3b">
<img src="image002.gif" alt="3番"></div>
<div class="kasanari2b">2番</div>
</body>
</html>
| | | | | | | |
| 【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。 |
z-index:3
z-index:2
z-index:4
z-index:1
指定した数字が大きいと，より全面に表示されます。
Z-indexプロパティは，positionプロパティで，relativeなどの値をもつ要素にしか適用されません。
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>要素の重なり順序を指定する z-index</title>
<style type="text/css">
<!--
div {font-size:14px;}
.number1 {width:80px;
height:30px;
padding:2px 2px 2px 120px;
position:absolute;
top:20px;
left:100px;
background-color:#D98B71;
z-index:3;}
.number2 {width:160px;
height:30px;
padding:2px 2px 2px 40px;
position:absolute;
top:40px;
left:280px;
background-color:#A8CDD7;
z-index:2;}
.number3 {width:200px;
height:30px;
padding:2px;
position:absolute;
top:30px;
left:10px;
background-color:#A7B382;
z-index:4;}
.number4 {width:200px;
height:30px;
padding:2px;
position:absolute;
top:50px;
left:120px;
background-color:#9A91B0;
z-index:1;}
.number5 {width:250px;
height:30px;
padding:2px;
position:absolute;
top:20px;
left:500px;}
-->
</style>
</head>
<body>
<div class="number1">z-index:3</div>
<div class="number2">z-index:2</div>
<div class="number3">z-index:4</div>
<div class="number4"><br>z-index:1</div>
<div class="number5">指定した数字が大きいと，より全面に表示されます。<br>
Z-indexプロパティは，positionプロパティで，relativeなどの値をもつ要素にしか適用されません。</div>
</body>
</html>
| | | | | | | |
| 【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。 |
セブン-イレブンで受け取れば送料・手数料0円。ご購入いただいた商品の価格にかかわらず、送料・手数料が一切不要。セブンアンドワイならではの、お得なサービスです。
セブン-イレブンなら、24時間365日受け取り可能。昼間不在がちの方、休日外出がちの方でも、セブン-イレブンならご都合に合わせて何時でも受け取ることが可能です。
セブン-イレブン受取りなら、現金で安心お支払い。「クレジットカードは不正利用が心配」という方でも、セブン-イレブン受取りなら、商品と引換えにレジにて現金でお支払いいただけます。
専用パッケージでお届け。中身の情報はご本人様以外わかりません。ご購入いただいた商品は、専用パッケージでしっかり梱包してお届けします。配送伝票にも商品名は記入されないので、店員にも梱包の中身はわかりません。
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>float 回り込みの指定</title>
<style type="text/css">
<!--
body {font-size:13px;}
img {float:right;
margin-bottom:5px;
margin-left:10px;} //float:leftでテキストは右側に回り込みます。
-->
</style>
</head>
<body>
<img src="abc.jpg" alt="abc"><LI TYPE=disk>セブン-イレブンで受け取れば送料・手数料0円。
ご購入いただいた商品の価格にかかわらず、送料・手数料が一切不要。セブンアンドワイならではの、
お得なサービスです。
<LI TYPE=disk>セブン-イレブンなら、24時間365日受け取り可能。昼間不在がちの方、
休日外出がちの方でも、セブン-イレブンならご都合に合わせて何時でも受け取ることが可能です。
<LI TYPE=disk>セブン-イレブン受取りなら、現金で安心お支払い。
「クレジットカードは不正利用が心配」という方でも、セブン-イレブン受取りなら、
商品と引換えにレジにて現金でお支払いいただけます。
<LI TYPE=disk>専用パッケージでお届け。中身の情報はご本人様以外わかりません。
ご購入いただいた商品は、専用パッケージでしっかり梱包してお届けします。
配送伝票にも商品名は記入されないので、店員にも梱包の中身はわかりません。
</body>
</html>
画像以外の要素にも回り込み
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>画像以外の要素にも回り込み</title>
<style type="text/css">
<!--
body {font-size:13px;}
h2 {float:left;
width:160px;
height:70px;
padding:0px 10px;
margin-bottom:5px;
margin-right:10px;
color:#ffffff;
background-color:#FF6666;} //h2要素に回り込みを指定
-->
</style>
</head>
<body>
<h2>セブンドリーム<br>ドットコム</h2>
<LI TYPE=disk><a href="aaa.htm" >お近くのセブン-イレブンで受取れば送料・手数料無料！
宅配でも全国一律380円！･･･セブンドリーム･ドットコム</a>
<LI TYPE=disk>セブン-イレブンが近くにない方も安心。「宅配」でもお得！
<LI TYPE=disk>CD、DVD、パソコンソフトに限り、
一回のお買上げ金額が合計 1,500円（税込）以上の場合、送料無料です。
※他のカテゴリーの商品を同時にご注文された場合は、他の商品の送料が課金されます。
あらかじめご了承ください。
</body>
</html>
要素と画像を並べて，回り込み
第６巻
『ハリー・ポッターと謎のプリンス』
『ハリー・ポッターと謎のプリンス』発売決定特集 ハリポタと海外ファンタジー名作選
世界中の人々を魅了し、最新刊が出るたびに社会現象を起こすベストセラーファンタジー『ハリー・ポッターシリーズ』。2006年５月、その第６巻『ハリー・ポッターと謎のプリンス』が発売されます。
◆2006年５月17日水曜日、あなたは16歳のハリーと再会する！◆
「謎のプリンス」とはだれか？一段と成長したハリーの新しい恋人は？宿敵ヴォルデモートの戦いで、またしても悲しい別れが･･･。ハリーの運命を予言した第５巻に続き、第６巻が過去の謎を解き明かす。一気に読ませる30章！
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>要素と画像を並べて，回り込み</title>
<style type="text/css">
<!--
body {font-size:14px;}
h2 {width:150px;
height:120px;
padding:0px 10px;
color:#ffffff;
background-color:#000000;}
h2, img {float:left;
margin-bottom:5px;
margin-right:10px;}
-->
</style>
</head>
<body>
<h2>第６巻<br>『ハリー・ポッターと謎のプリンス』</h2>
<img src="aaa.gif">
『ハリー・ポッターと謎のプリンス』発売決定特集 ハリポタと海外ファンタジー名作選<br>
世界中の人々を魅了し、最新刊が出るたびに社会現象を起こすベストセラーファンタジー
『ハリー・ポッターシリーズ』。
2006年５月、その第６巻『ハリー・ポッターと謎のプリンス』が発売されます。<br><br>
◆2006年５月17日水曜日、あなたは16歳のハリーと再会する！◆<br>
「謎のプリンス」とはだれか？一段と成長したハリーの新しい恋人は？宿敵ヴォルデモートの戦いで、
またしても悲しい別れが･･･。ハリーの運命を予言した第５巻に続き、第６巻が過去の謎を解き明かす。
一気に読ませる30章！
</body>
</html>
要素を左右に，テキストを中央に
第６巻
『ハリー・ポッターと謎のプリンス』
『ハリー・ポッターと謎のプリンス』発売決定特集 ハリポタと海外ファンタジー名作選
世界中の人々を魅了し、最新刊が出るたびに社会現象を起こすベストセラーファンタジー『ハリー・ポッターシリーズ』。2006年５月、その第６巻『ハリー・ポッターと謎のプリンス』が発売されます。
◆2006年５月17日水曜日、あなたは16歳のハリーと再会する！◆
「謎のプリンス」とはだれか？一段と成長したハリーの新しい恋人は？宿敵ヴォルデモートの戦いで、またしても悲しい別れが･･･。ハリーの運命を予言した第５巻に続き、第６巻が過去の謎を解き明かす。一気に読ませる30章！
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>要素を左右に，テキストを中央に</title>
<style type="text/css">
<!--
body {font-size:14px;}
h2 {float:left;
width:150px;
height:120px;
padding:0px 10px;
color:#ffffff;
background-color:#000000;
margin-bottom:5px;
margin-right:10px;}
img {float:right;
margin-bottom:5px;
margin-left:10px;}
-->
</style>
</head>
<body>
<h2>第６巻<br>『ハリー・ポッターと謎のプリンス』</h2>
<img src="aaa.gif">
『ハリー・ポッターと謎のプリンス』発売決定特集 ハリポタと海外ファンタジー名作選<br>
世界中の人々を魅了し、最新刊が出るたびに社会現象を起こすベストセラーファンタジー
『ハリー・ポッターシリーズ』。
2006年５月、その第６巻『ハリー・ポッターと謎のプリンス』が発売されます。<br><br>
◆2006年５月17日水曜日、あなたは16歳のハリーと再会する！◆<br>
「謎のプリンス」とはだれか？一段と成長したハリーの新しい恋人は？宿敵ヴォルデモートの戦いで、
またしても悲しい別れが･･･。ハリーの運命を予言した第５巻に続き、第６巻が過去の謎を解き明かす。
一気に読ませる30章！
</body>
</html>
| | | | | | | |
| 【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>左側の要素に対する回り込みを解除する</title>
<style type="text/css">
<!--
body {font-size:13px;}
h2 {float:left;
width:160px;
height:70px;
padding:0px 10px;
margin-bottom:5px;
margin-right:10px;
color:#ffffff;
background-color:#FF6666;}
.kaijyo {clear:left;} //右要素に対する解除は，right
-->
</style>
</head>
<body>
<h2>セブンドリーム<br>ドットコム</h2>
<LI TYPE=disk><img src="aaa.gif" >
<p class="kaijyo"><LI TYPE=disk>セブン-イレブンが近くにない方も安心。
「宅配」でもお得！
<LI TYPE=disk>CD、DVD、パソコンソフトに限り、
一回のお買上げ金額が合計 1,500円（税込）以上の場合、送料無料です。
※他のカテゴリーの商品を同時にご注文された場合は、他の商品の送料が課金されます。
あらかじめご了承ください。</p>
</body>
</html>
中央の回り込みを解除する
第６巻
『ハリー・ポッターと謎のプリンス』
『ハリー・ポッターと謎のプリンス』発売決定特集 ハリポタと海外ファンタジー名作選
世界中の人々を魅了し、最新刊が出るたびに社会現象を起こすベストセラーファンタジー『ハリー・ポッターシリーズ』。2006年５月、その第６巻『ハリー・ポッターと謎のプリンス』が発売されます。
◆2006年５月17日水曜日、あなたは16歳のハリーと再会する！◆
「謎のプリンス」とはだれか？一段と成長したハリーの新しい恋人は？宿敵ヴォルデモートの戦いで、またしても悲しい別れが･･･。ハリーの運命を予言した第５巻に続き、第６巻が過去の謎を解き明かす。一気に読ませる30章！
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>中央の回り込みを解除する</title>
<style type="text/css">
<!--
body {font-size:14px;}
h2 {float:left;
width:150px;
height:120px;
padding:0px 10px;
color:#ffffff;
background-color:#000000;
margin-bottom:5px;
margin-right:10px;}
img {float:right;
margin-bottom:5px;
margin-left:10px;}
.kaijyo {clear:both;}
-->
</style>
</head>
<body>
<h2>第６巻<br>『ハリー・ポッターと謎のプリンス』</h2>
<img src="aaa.gif">
『ハリー・ポッターと謎のプリンス』発売決定特集 ハリポタと海外ファンタジー名作選<br>
世界中の人々を魅了し、最新刊が出るたびに社会現象を起こすベストセラーファンタジー
『ハリー・ポッターシリーズ』。
2006年５月、その第６巻『ハリー・ポッターと謎のプリンス』が発売されます。
<br><br><p class="kaijyo">
◆2006年５月17日水曜日、あなたは16歳のハリーと再会する！◆
<br>「謎のプリンス」とはだれか？一段と成長したハリーの新しい恋人は？
宿敵ヴォルデモートの戦いで、またしても悲しい別れが･･･。
ハリーの運命を予言した第５巻に続き、第６巻が過去の謎を解き明かす。一気に読ませる30章！</p>
</body>
</html>
| | | | | | | |
| 【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。 |
◆overflow:visible◆
ボックス領域の大きさを指定していると，要素の内容が領域内に収まらないときがある。＜overflow＞プロパティは，はみだした内容をどのように表示するか指定する。値には，visible，hidden，scroll，autoがある。
【visible】収まりきらない内容をそのまま表示する。
【hidden】収まりきらない内容は表示しない。
【scroll】スクロールバーをつけてすべての内容が見られるようにする。
【auto】処理方法はブラウザに依存する。（一般的にはスクロールバーが付く）
◆overflow:hidden◆
ボックス領域の大きさを指定していると，要素の内容が領域内に収まらないときがある。＜overflow＞プロパティは，はみだした内容をどのように表示するか指定する。値には，visible，hidden，scroll，autoがある。
【visible】収まりきらない内容をそのまま表示する。
【hidden】収まりきらない内容は表示しない。
【scroll】スクロールバーをつけてすべての内容が見られるようにする。
【auto】処理方法はブラウザに依存する。（一般的にはスクロールバーが付く）
◆overflow:scroll◆
ボックス領域の大きさを指定していると，要素の内容が領域内に収まらないときがある。＜overflow＞プロパティは，はみだした内容をどのように表示するか指定する。値には，visible，hidden，scroll，autoがある。
【visible】収まりきらない内容をそのまま表示する。
【hidden】収まりきらない内容は表示しない。
【scroll】スクロールバーをつけてすべての内容が見られるようにする。
【auto】処理方法はブラウザに依存する。（一般的にはスクロールバーが付く）
◆overflow:auto◆
ボックス領域の大きさを指定していると，要素の内容が領域内に収まらないときがある。＜overflow＞プロパティは，はみだした内容をどのように表示するか指定する。値には，visible，hidden，scroll，autoがある。
【visible】収まりきらない内容をそのまま表示する。
【hidden】収まりきらない内容は表示しない。
【scroll】スクロールバーをつけてすべての内容が見られるようにする。
【auto】処理方法はブラウザに依存する。（一般的にはスクロールバーが付く）
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>overflow 内容が収まらない場合の処理方法</title>
<style type="text/css">
<!--
p#ov_001 {overflow:visible;
width:600px;
height:70px;
padding:10px;
font-size:14px;
line-height:1.5em;
background-color:#F7DFB9;
border:solid 1px #96721F;}
p#ov_002 {overflow:hidden;
width:600px;
height:70px;
padding:10px;
font-size:14px;
line-height:1.5em;
background-color:#F7DFB9;
border:solid 1px #96721F;}
p#ov_003 {overflow:scroll;
width:600px;
height:70px;
padding:10px;
font-size:14px;
line-height:1.5em;
background-color:#F7DFB9;
border:solid 1px #96721F;}
p#ov_004 {overflow:auto;
width:600px;
height:70px;
padding:10px;
font-size:14px;
line-height:1.5em;
background-color:#F7DFB9;
border:solid 1px #96721F;}
-->
</style>
</head>
<body>
<p id="ov_001">◆overflow:visible◆<br>
ボックス領域の大きさを指定していると，要素の内容が領域内に収まらないときがある。
＜overflow＞プロパティは，はみだした内容をどのように表示するか指定する。
値には，visible，hidden，scroll，autoがある。<br>
【visible】収まりきらない内容をそのまま表示する。<br>
【hidden】収まりきらない内容は表示しない。<br>
【scroll】スクロールバーをつけてすべての内容が見られるようにする。<br>
【auto】処理方法はブラウザに依存する。（一般的にはスクロールバーが付く）</p>
<p id="ov_002">◆overflow:hidden◆<br>
ボックス領域の大きさを指定していると，要素の内容が領域内に収まらないときがある。
＜overflow＞プロパティは，はみだした内容をどのように表示するか指定する。
値には，visible，hidden，scroll，autoがある。<br>
【visible】収まりきらない内容をそのまま表示する。<br>
【hidden】収まりきらない内容は表示しない。<br>
【scroll】スクロールバーをつけてすべての内容が見られるようにする。<br>
【auto】処理方法はブラウザに依存する。（一般的にはスクロールバーが付く）</p>
<p id="ov_003">◆overflow:scroll◆<br>
ボックス領域の大きさを指定していると，要素の内容が領域内に収まらないときがある。
＜overflow＞プロパティは，はみだした内容をどのように表示するか指定する。
値には，visible，hidden，scroll，autoがある。<br>
【visible】収まりきらない内容をそのまま表示する。<br>
【hidden】収まりきらない内容は表示しない。<br>
【scroll】スクロールバーをつけてすべての内容が見られるようにする。<br>
【auto】処理方法はブラウザに依存する。（一般的にはスクロールバーが付く）</p>
<p id="ov_004">◆overflow:auto◆<br>
ボックス領域の大きさを指定していると，要素の内容が領域内に収まらないときがある。
＜overflow＞プロパティは，はみだした内容をどのように表示するか指定する。
値には，visible，hidden，scroll，autoがある。<br>
【visible】収まりきらない内容をそのまま表示する。<br>
【hidden】収まりきらない内容は表示しない。<br>
【scroll】スクロールバーをつけてすべての内容が見られるようにする。<br>
【auto】処理方法はブラウザに依存する。（一般的にはスクロールバーが付く）</p>
</body>
</html>
| | | | | | | |
| 【下記CSSのブラウザ対応】 バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。 |
表示の指定
****************************************************
【visible】通常と同じように要素を表示する。
この行に，＜visibility:visible＞を指定しています。
【hidden】要素を表示しない。ただし，要素がしめる領域は確保する。
****************************************************************
非表示の指定 **************************************************
【visible】通常と同じように要素を表示する。
この行に，＜visibility:hidden＞を指定しています。
【hidden】要素を表示しない。ただし，要素がしめる領域は確保する。
****************************************************************
visibility:hiddenとdisplay:noneの違い *************************
【行１】行１と行３の間にある行２に，display:noneを指定しています。
【行２】この行に，＜display:none＞を指定しています。
【行３】行２は非表示とともに要素そのものが存在しないような扱いになる。
****************************************************************
>>> HTMLソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>visibility 表示・非表示</title>
<style type="text/css">
body {font-size:14px;}
<!--
.vi001 {visibility:visible;
color:#ff0000;}
.vi002 {visibility:hidden;
color:#ff0000;}
.vi003 {display:none;
color:#ff0000;}
-->
</style>
</head>
<body>
表示の指定 <FONT COLOR="#008000">****************************************************</FONT>
<p>【visible】通常と同じように要素を表示する。</p>
<p class="vi001">この行に，＜visibility:visible＞を指定しています。</p>
<p>【hidden】要素を表示しない。ただし，要素がしめる領域は確保する。</p>
<FONT COLOR="#008000">****************************************************************</FONT>
<p>
非表示の指定 <FONT COLOR="#008000">**************************************************</FONT>
<p>【visible】通常と同じように要素を表示する。</p>
<p class="vi002">この行に，＜visibility:hidden＞を指定しています。</p>
<p>【hidden】要素を表示しない。ただし，要素がしめる領域は確保する。</p>
<FONT COLOR="#008000">****************************************************************</FONT>
<p>
visibility:hiddenとdisplay:noneの違い <FONT COLOR="#008000">*************************</FONT>
<p>【行１】行１と行３の間にある行２に，display:noneを指定しています。</p>
<p class="vi003">【行２】この行に，＜display:none＞を指定しています。</p>
<p>【行３】行２は非表示とともに要素そのものが存在しないような扱いになる。</p>
<FONT COLOR="#008000">****************************************************************</FONT>
</body>
</html>
古くて新しい！これからはAjax
Copyright（C)1997. itoben style. All Rights Reserved.
C:002564 T:006 Y:007
