プレミアム バンダイ   Challenge HP
HP作成 スタイルシート apeskin サーバー HP作成ソフト アフィリエイト リンク BBS top
スタイルシート

CSSリファレンス


IEツールバー
Googleツールバー
Infoseekツールバー
Yahoo!ツールバー
Windowsをお使いでしたら、IEツールバーを利用すると検索に便利。 ブラウザに組み込まれ、キーワード検索できます。




■ 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">

z-index で重なる順番を指定
■ 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">

 you style Copyright (C) 2003-2004 Challenge HP, All rights reserved.