【24】要素を切り抜き表示する clipプロパティ(非推奨ですが)

最終更新日:2018年01月24日  (初回投稿日:2018年01月24日)

clipプロパティは、要素を切抜き表示(クリッピング)するためのもの。
ですが、実はもう「deprecated(非推奨・廃止予定)」になっています。

代わりに勧告候補になっている clip-pathプロパティ は、SVGパスも使えます。
ただ、主要なブラウザで未実装だったり、部分的サポートだったり、今すぐ使えわけでもないようです。(2018年1月記)
いっぽうこの clipプロパティは、CSS2.1で勧告されたプロパティなので、今のところ、どのブラウザでも表示します(非推奨ではありますが)

そんなわけで、一応この clipプロパティを紹介しておきます。

本日のINDEX
  1. clipプロパティの値
  2. clipプロパティの切抜きは四角形のみ
  3. 位置や余白をどうにかする指定も必要

参考:
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification - W3C First Public Working Draft 12 April 2016
ここで非推奨(deprecated)とされています↓
CSS Masking Module Level 1 | W3C Candidate Recommendation, 26 August 2014

clipプロパティの値

clipプロパティは、Absolutely positioned elements(絶対位置指定された要素)のみに指定できます。position: absolute か、position: fixed を指定された要素だけが対象です。

position: absolute については、【22-2】要素を絶対位置に指定する position: absolute を、
position: fixed については、【22-3】要素を固定位置に指定する position: fixed をご覧ください。

auto これがデフォルト値。切り抜きされず、全体が表示されます。
rect(上,右,下,左) 要素の左上の角を基点に、上右下左の順で、それぞれの距離を単位を付けた数値で、「,(カンマ)」で区切って指定します。
(IE7以下は「,」でなく「半角スペース」で区切りますが、もう古すぎてどうでもいいよね)
inherit 親要素のclipプロパティの値を継承します。

この他「 inset()」という値もあったのですが、仕様に載っていないので略しました。
一般的なブラウザは「rect( )」の仕様で実装しているはず。

値の継承 なし 適用できる要素 絶対位置指定された要素
position: absoluteposition: fixed を指定された要素)

clipプロパティの切抜きは四角形のみ

とにかく使ってみます。下の画像をこのようにクリップしてみます。

clipプロパティは、四角形でしか切り抜けないんです。(丸とかで切り抜きたくても無理)
値は rect(上, 右, 下, 左) で、要素の左上の角を基点に、そこからの距離を指定します。
今回のサンプルは下記の数値で切り抜きます。

その前に、position指定が必要です。
サンプルでは、<img>要素を 親要素 <div> の中に入れ、親要素には position: relative を、子の <img> には position: absolute を指定しました。

そして <img>要素に clip: rect(100px, 600px, 380px, 40px) と指定します。

プレビューは下のようになります。
わかりやすいように親要素<div> の背景を薄いグレーにしました。
ちゃんと切り抜けてるけど、余白はそのままですね。

HTML と CSS はこちら。

<div class="smp1">
<img src="image/img.jpg">
</div>

<style>
.smp1 {
	position:relative;  /*子要素(img)に absolute を指定するので*/
    height:400px;       /*子要素が absolute なので親に高さが無いと他の要素が上がっちゃう*/
    background:rgba(204,204,204,.2)} /*背景を薄いグレーにしています*/
.smp1 img {
	clip:rect(100px, 600px, 380px, 40px);
	position:absolute}  /*「absolute」か「fixed」じゃないと無効*/
</style>

位置や余白をどうにかする指定も必要

まずは、位置をなんとかします。親要素の左上方向に画像をずらします。
<img>要素に topプロパティと leftプロパティで「top: -100px; left: -40px」と指定するか、
<img>要素にネガティブマージンで「margin: -100px 0 0 -40px」と指定します。

CSS はこちら。(HTMLはさっきと同じです)

.smp1 {
	position:relative;
    height:400px;
    background:rgba(204,204,204,.2)}
.smp1 img {
	clip:rect(100px, 600px, 380px, 40px);
	position:absolute
    top:-100px;  /*上にずらす*/
	left:-40px;  /*左にずらす*/
    }
	/*margin: -100px 0 0 -40px  ←またはネガティブマージンでもOK*/

次に、余白を無くします。
これは、親の <div>要素のサイズを 切抜き後の画像のサイズにするだけ。

CSS はこちら。(HTMLはさっきと同じです)

.smp1 {
	position:relative;
    background:rgba(204,204,204,.2);
    width:560px;
	height:280px}
.smp1 img {
	clip:rect(100px, 600px, 380px, 40px);
	position:absolute
    margin: -100px 0 0 -40px}

この場合、子要素 <img>が position: absolute なので、親の幅は「0」でも可。高ささえ切り抜いた画像と同じならOK。

このように clipプロパティは、Photoshopなどの画像編集アプリケーションを持っていなくても、CSSだけで画像を切り抜けて便利なのですが、
・絶対位置指定された要素にしか使えない
・四角形でしか切り抜きできない

と言うデメリットもあります。
新しく登場している clip-pathプロパティ は、上記のデメリットが無いのでイイ感じ。

次回予告

というわけで次回は、 clipプロパティの代わりになる clip-pathプロパティを使ってみます。
こちらは 円やポリゴン(星型とか多角形とか)での切抜きも用意されていて、SVGのパスで自由に切り抜くこともできます。
ロゴマークなどの自由な形で画像を切り抜けるので便利です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2018/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.