object-fit・currentColor・will-change・image-renderingなどマイナーだけど便利過ぎるCSSプロパティの使い方
object-fit・currentColor・will-change・image-renderingなど、結構マイナーだけど、実用的なCSSプロパティをピックアップしました。
PR
Sponsored Link
object-fit
object-fitプロパティはボックスに合わせて、アスペクト比を維持したまま画像サイズを調整できます。
例えば600×300の画像をCSSで400×400で指定したとすると正方形に引き伸ばされます。この時アスペクト比は崩れてしまいます。
しかし、imgにobject-fit: contain;を追加すると、imgに指定した400×400の大きさのボックスに全体が格納されるようにアスペクト比を維持したまま表示されます。
img {
width: 400px;
height: 400px;
object-fit: contain;
}
object-fit: cover;を指定するとボックス全体を覆うように表示されます。ボックスからはみ出した部分は表示されません。アスペクト比は維持されています。
値のfillを使うとアスペクト比は調整されません（fillは初期値である）が、none/contain/cover/scale-downを使うと維持されます。background-sizeで指定しなくても、imgタグ内にプロパティを追記するだけでいいのは便利ですね。
サイズ調整に便利なCSSのobject-fitとobject-positionプロパティの使い方 - WPJによると動画にも適用可能なそうです。
昔はOperaだけだったのですが、現在はIE/Edge以外のブラウザで使えるようになってます。
image-rendering
image-renderingは画像の拡大縮小処理アルゴリズムの変更を行えます。ドット絵など、ページを拡大した時に違和感を軽減するために画像（エッジ）がぼやけるのをCSSでコントロールしたい場合に使うとよいそうです。
img {
image-rendering: pixelated;
}
will-change / レスポンス向上、チラツキを防止する
will-changeを使えば、要素の変更などを事前にUAに知らせることができるので、レンダリング処理が早くなります。過度に使用したり、ページに問題がないのに使うと逆効果になるとのこと。値はauto/scroll-position/contents/transform/opacity/left, topがあります。
.foo {
will-change: opacity;
}
will-changeは最適化を長く維持してしまうので、Dev.Opera — CSS will-changeプロパティについて知っておくべきことに書かれてある「JavaScriptを使って、使い終わったwill-changeを削除する方法」を参考にしてみましょう。
CSS Will Change Module Level 1 （日本語訳）
IE/Edge/Android2~4系は使えません。
Can I use... Support tables for HTML5, CSS3, etc
currentColor / 色の継承
currentColorは色（colorプロパティ）を継承できるプロパティです。borderやbox-shadowなどへ適用可能。これを使うことによって個別に指定する必要がなくなります。色を統一したい時に便利。
See the Pen currentColor by commte (@commte) on CodePen.
以下の例だと、テキストにblueを指定したのをborderやbox-shadowなどでblueを継承しています。
div {
color: green;
background-color: currentcolor;
}
プロパティや、デフォルトでは継承を行わない子要素のプロパティに、色のプロパティを継承させることができます。
- CSS | MDN
column-rule / 多段レイアウト、高さが揃う区切り線
column-ruleプロパティはマルチカラムの段落間に区切り線を表示することができます。
column-countでカラム数を指定し、column-ruleで区切り線のスタイル・太さ・色の値を指定します。
p {
column-count: 2;
column-rule: solid 1px #ccc;
}
CSS Shapes / 円の中にテキストを格納する
shape-outside: circle();を使えばテキストを回り込ませることができますが、こちらはshape-outside: url();と半円画像を使って、半円の中にテキストを格納する荒業。
.foo {
float: right;
-webkit-shape-outside: url(半円の画像);
}
スポンサード リンク
-
投稿者：commte
株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。
URL：西田 鉄平
この後によく読まれている記事
Leave a Comment