|
トップページ > スタイルシートリファレンス > clip
★スタイルシートリファレンス
|
clip･････ボックスを切り抜き表示（クリッピング）する
       
  
    
   
     
clipプロパティは、ボックスを切り抜き表示（クリッピング）する際に使用します。 CSS2の仕様で指定できる切り抜きの形状は矩形のみです。 矩形の指定方法について、CSS2の仕様では「ボックスの四辺の端から内側への距離」を指定することになっていますが、 CSS2.1では「ボックスの上辺と左辺を基準とした距離」と改定されています。 一般的なブラウザではCSS2.1の仕様に準拠しています。  また、CSS2.1ではclipプロパティの適用要素が「絶対配置された要素」と改定されており、 一般的なブラウザでclipプロパティによる切り抜き表示を有効にするには、 clipプロパティと同時にpositionプロパティでabsoluteかfixedを指定する必要があります。 Internet Explorer7以下では、カンマ（,）区切りではなく半角スペース区切りで値を指定しないと切り抜きされないようです。 ■値
■使用例スタイルシート部分は外部ファイル（sample.css）に記述。div.sample {height:200px;}img.sample1 {clip:rect(60px,150px,130px,40px); position:absolute;} img.sample2 {clip:rect(60px 150px 130px 40px); position:absolute;} HTMLソース<html><head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="sample"> 元の画像<br> <img src="images/kaeru.gif"> </div> <div class="sample"> 画像を切り抜き表示します。（カンマ区切りで指定）<br> <img src="images/kaeru.gif" class="sample1"> </div> <div class="sample"> 画像を切り抜き表示します。（スペース区切りで指定）<br> <img src="images/kaeru.gif" class="sample2"> </div> </body> </html> ↓↓↓ ブラウザ上の表示
元の画像
画像を切り抜き表示します。（カンマ区切りで指定）
画像を切り抜き表示します。（スペース区切りで指定）
■関連項目
overflow････････････････はみ出た内容の表示方法を指定する
overflow-x･････････････はみ出た内容の表示方法を指定する（IE独自の仕様） overflow-y･････････････はみ出た内容の表示方法を指定する（IE独自の仕様） position････････････････ボックスの配置方法（基準位置）を指定する top････････････････････上からの配置位置（距離）を指定する bottom････････････････下からの配置位置（距離）を指定する left････････････････････左からの配置位置（距離）を指定する right･･･････････････････右からの配置位置（距離）を指定する display･････････････････要素の表示形式（ブロック・インライン）を指定する float･･･････････････････左または右に寄せて配置する clear････････････････････回り込みを解除する z-index･･････････････････重なりの順序を指定する visibility･････････････････ボックスの表示・非表示を指定する clip･････････････････････ボックスを切り抜き表示（クリッピング）する direction････････････････文字表記の方向（左右）を指定する unicode-bidi･････････････Unicodeの文字表記の方向を上書きする writing-mode････････････文字表記の方向（縦横）を指定する（IE独自の仕様） |
トップページ > スタイルシートリファレンス > clip
|
©2012 HTMQ