第五章　クライアントサイドの技術：スタイルシートへのアクセス方法

　特定の範囲だけ画像や文字を表示させるにはクリッピングを行います。スタイルシートには表示範囲を設定するclipプロパティがあります。このプロパティは以下のように指定します。

clip:rect(上座標　右座標　下座標　左座標）

　上の座標を指定したら時計回りに座標を指定していきます。これにより表示範囲が決定されます。基準となるのは親オブジェクトの座標です。前項のマウスに追従するサンプルを見てみましょう。スクリプトは以下のようになります。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>マウスに追従（クリッピング）</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"></script>
</head>
<body>
<h1>マウスに追従（クリッピング）</h1>
<div id="mainContents">
<div id="footer">フッター部分です。</div>
</div>
</body>
</html>

　実はスクリプトは前項と全く同じもので、以下のようにスタイルシートでclipプロパティを記述するだけでできてしまいます。

#mainContents {
position:absolute;
left:60px;
top:100px;
width:400px;
height:300px;
border:1px black solid;
clip:rect(0px 402px 302px 0px);
}
#footer {
position:absolute;
left:10px;
top:100px;
border:1px blue solid;
width:200px;
height:150px;
background-color:#e0ffff;
}

　これで、問題なく表示されればよいのですが、ブラウザごとに表示結果が違ってしまっています。Internet ExplorerとOperaでは表示範囲がはみ出している上に線が消えてしまいます。Safariでは右側と下側の線が消えてしまいます。Firefoxははみ出したりせず正常です。こうなるとブラウザ別に表示範囲を指定しないといけなくなってしまいます。
　スタイルシートには表示範囲を決定するプロパティが他にもあります。それはoverflowプロパティです。このプロパティにscroll, auto, visible, hiddenなどを設定することで表示範囲からはみだした場合に、どう表示するかを指定できます。例えばscrollを指定すると表示範囲からはみだした場合にスクロールバーを表示させることができます。長い文章などを表示させる場合に役立ちます。（サンプルを実行する）

【スタイルシート：main.cssの内容】
#mainContents {
position:absolute;
left:60px;
top:100px;
width:400px;
height:300px;
border:1px black solid;
overflow:scroll;
}
#footer {
position:absolute;
left:10px;
top:100px;
border:1px blue solid;
width:200px;
height:150px;
background-color:#e0ffff;
}

　scrollでなくhiddenを指定すると、はみ出した部分は表示されません。（実際のサンプルを実行する）

【スタイルシート：main.cssの内容】
#mainContents {
position:absolute;
left:60px;
top:100px;
width:400px;
height:300px;
border:1px black solid;
overflow:hidden;
}
#footer {
position:absolute;
left:10px;
top:100px;
border:1px blue solid;
width:200px;
height:150px;
background-color:#e0ffff;
}

　overflowを利用するとOpera以外は同じように表示されます。clipプロパティを使うよりもoverflowプロパティを使う方が安全です。もし、上記サンプルのように枠を表示する場合にOperaでは枠が消えてしまうので、以下のようにして枠を一番上に表示するようにします。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>マウスに追従（枠が消える：Opera対策）</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"></script>
</head>
<body>
<h1>マウスに追従（枠が消える：Opera対策）</h1>
<div id="mainContents">
<div id="footer">フッター部分です。</div>
<div id="mainBorder"></div>
</div>
</body>
</html>

【スタイルシート：main.cssの内容】
#mainContents {
position:absolute;
left:60px;
top:100px;
width:400px;
height:300px;
border:1px black solid;
overflow:hidden;
}
#footer {
position:absolute;
left:10px;
top:100px;
border:1px blue solid;
width:200px;
height:150px;
background-color:#e0ffff;
}
#mainBorder {
position:absolute;
left:-1px;
top:-1px;
width:400px;
height:300px;
border:1px black solid;
}

　clipを使うよりもoverflowを使う方がスクリプトも簡単になります。以下のサンプルは前項のマウス座標に合わせて横幅を変更するものですが、スクリプトは全く同じものです。唯一異なるのはスタイルシートでoverflow:hiddenを指定しているだけです。もし、clipを指定していたのであれば、幅の変更にともなってclipも再設定しなければなりません。少しですが行数も増えますしブラウザごとの対処もしなければなりません。簡単かつ安全なoverflowを利用するのが良いと言えます。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>マウスに合わせて幅を変更</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"></script>
</head>
<body>
<h1>マウスに合わせて幅を変更</h1>
<div id="mainContents">
<div id="footer">フッター部分です。</div>
</div>
</body>
</html>

【スタイルシート：main.cssの内容】
#mainContents {
position:absolute;
left:10px;
top:100px;
width:400px;
height:400px;
border:1px black solid;
overflow:hidden;
}
#footer {
position:absolute;
left:10px;
top:100px;
border:1px blue solid;
width:200px;
height:150px;
background-color:#e0ffff;
}
body {
margin:0px;
}

　他にもoverflow-x、overflow-yプロパティで横幅と縦幅を個別に指定できますが、利用できるのはInternet ExplorerとFirefoxのみです。現時点では使わない方がよいでしょう。（サンプルを実行する）

　次項ではイベントについて説明します。

[第五章　9:各種イベントについてへ]
[目次へ]

(2006.1.14)

スタイルシートへのアクセス方法 - クリッピング（表示範囲指定） -