この記事では、便利なCSSプロパティを 5 つ紹介します。あなたもよく知っているはずですが、おそらくめったに使用しないでしょう。私は新しい CSS3 プロパティの将来について話しているのではなく、すべてのブラウザで広くサポートされている、clip、min-height、white-space、curosr、display などの古い CSS2 プロパティについて話しています。とても役に立つかもしれないので、この記事をお見逃しなく。
1.CSSクリップ
クリップ プロパティはマスクのようなものです。四角形を使用してページ要素のコンテンツをマスクできます。要素をクリップするには: その位置プロパティを絶対として指定し、要素を基準にして上、右、下、左の値を指定する必要があります。
.gif)
画像の切り抜き例（ デモ）
次の例は、clip プロパティを使用して画像をマスクする方法を示しています。まず、<div> 要素をposition:relativeとして指定し、次に<img>要素をposition:absoluteとして指定し、実際のニーズに応じてrect値を設定します。
.gif)
.クリップ{
位置: 相対的;
高さ: 130ピクセル;
幅: 200ピクセル;
境界線: 実線 1px #ccc;
}
.clip img {
位置: 絶対;
クリップ：rect(30px 165px 100px 30px);
}
画像のサイズ変更とクリッピング ( デモ)
この例では、画像のサイズを変更してトリミングする方法を示します。ストック画像は長方形なので、そのサイズの 50% に縮小して正方形形式のサムネイルを作成したいと考えています。そこで、width プロパティと height プロパティを使用して画像のサイズを変更し、clip プロパティを使用して画像をマスクしました。次に、 left 属性を使用して画像を 15 ピクセル左に移動します。
.gif)
。
ギャラリーリー {
フロート: 左;
マージン: 0 10px 0 0;
位置: 相対的;
幅: 70ピクセル;
高さ: 70ピクセル;
境界線: 実線 1px #000;
}
.ギャラリー画像 {
幅: 100ピクセル;
高さ: 70ピクセル;
位置: 絶対;
クリップ：rect(0 85px 70px 15px);
左: -15px;
}