目次 < プロパティ一覧 戻る 使用例

バナー

中年おっちゃんでも出来た ウェブページ作成講座 with ? mark

clipプロパティ

clipプロパティは、絶対位置配置 ( position : absolute ) された要素の一部分だけを表示します。


(value)
shaperect(top right botom left) と時計回り順に表示領域をpx値で指定します。
  • 対象要素の左上を "0" とします。
    1. topは、表示領域を上から何pxとするか
    2. rightは、表示開域を左から何pxまでとするか
    3. botomは、表示領域を上から何pxまでとするか
    4. leftは、表示領域を左から何pxとするか
  • top < bottom , left < right の関係が成立しないと表示されません。
  • rect(top,right,botom,left) と , で区切った場合、少し古いブラウザでは反映されない場合があります。
auto 全て表示
inherit親要素からの継承
適用要素絶対位置配置 ( position : absolute ) された要素
初期値auto
継承しません

使用例

はスタイルシート記述です。

はHTML記述です。

XXXX 背景色と内枠線は要素の範囲です。

XXXX 背景色と外枠線は親要素です。

スタイルシート記述
.oya{width:16em;
height:6em;
position:relative;}
.cl1{position:absolute;}
HTML記述
<div class="ota"><p class="cl1"> とりなくこゑす ゆめさませ みよあけわたる ひんかしを そらいろはえて おきつへに ほふねむれゐぬ もやのうち </p></div>
表示例

とりなくこゑす ゆめさませ みよあけわたる ひんかしを そらいろはえて おきつへに ほふねむれゐぬ もやのうち

で clipプロパティ を検証します。

スタイルシート記述
.cl2{clip:rect(0px 200px 80px 0px);}
HTML記述
<p class="cl1 cl2"> とりなくこゑす ゆめさませ みよあけわたる ひんかしを そらいろはえて おきつへに ほふねむれゐぬ もやのうち </p>
表示例

とりなくこゑす ゆめさませ みよあけわたる ひんかしを そらいろはえて おきつへに ほふねむれゐぬ もやのうち

スタイルシート記述
.cl3{clip:(10px 200px 60px 10px);}
HTML記述
<p class="cl1 cl3"> とりなくこゑす ゆめさませ みよあけわたる ひんかしを そらいろはえて おきつへに ほふねむれゐぬ もやのうち </p>
表示例

とりなくこゑす ゆめさませ みよあけわたる ひんかしを そらいろはえて おきつへに ほふねむれゐぬ もやのうち

目次 < プロパティ一覧 戻る Top

Created:Jun 01, 2005 Updated:Oct.,25,2011 © by おっちゃん
Oct.,25,2011 全面更新