■ display
表示の指定 block none inline list-item
display とてもややこしいです。block で表示し、none で消す対称的な事もできますが、
block で改行して、inline で改行しないという対称的な事もできます。
none で消した場合は消したところにスペースさえ出来ないので、本来そこに何かがある事を
ソースを見ないと分かりません。
<span style="display:block">毎日暑い日が続きますね!</span>
毎日暑い日が続きますね!
IEでは<span style="display:none">none を使うと</span>痕跡を残さず消えます。
IEでは none を使うと痕跡を残さず消えます。
こんにちは。<span style="display:block">強制的に改行</span>
こんにちは。 強制的に改行
<div style="display:inline">div でも</div><div style="display:inline">改行されない</div>
div でも 改行されない
■ visibility
上からの配置指定 visible hidden
visibility は、表示するか表示しないかなので分かりやすいです。
こんにちは。<span style="visibility:visible">毎日暑い日が続きますね!</span>
こんにちは。毎日暑い日が続きますね!
hiddenを使うと<span style="visibility:hidden">消えても</span>消した痕跡が残る。
hiddenを使うと消えても消した痕跡が残る。
このように同じ消すでも display:none と visibility:hidden は消え方が違います。
■ z-index
重なりの順番を指定 <lenght>
ポジションやマージンを使って画像などを重ねた場合、通常はソースの下の方に書かれている方が上に重なりますが、
その重ねる順番を指定できます。
一般的には z-index に 1〜99 の数字を入れ、数字の大きい方が上に重なります。
<img src="image/fish1.png" style="position:absolute;top:30px;left:10px;">
<img src="image/fish2.png" style="position:absolute;top:40px;left:80px;">
<img src="image/fish3.png" style="position:absolute;top:40px;left:130px;">
<img src="image/fish1.png" style="position:absolute;top:30px;left:10px;z-index:3">
<img src="image/fish2.png" style="position:absolute;top:40px;left:80px;z-index:2">
<img src="image/fish3.png" style="position:absolute;top:40px;left:130px;z-index:1">
■ clip
上からの配置指定 auto <shape>
clip は、何かの理由でサイズを調整するなど、画像の切り抜きに使います。
<img src="image/horse5.gif" style="position:absolute;clip:rect(20px 250px 150px 10px)">
(20px 250px 150px 10px) の内訳は、
上から20px切り取る・左から250px残す・上から150px残す・左から10px切り取る
ホームページ作成に clip まず使われませんが、Javaスクリプトなどと併用したコンテンツで使われる事があります。
■ zoom
拡大・縮小表示 normal <lenght> <%>
画像やテキストを拡大したり縮小したりする事がIEでは出来ます。
<img src="image/fish2.png" style="">
<img src="image/fish2.png" style="zoom:2.0">
|