作成:2016/11/14更新:2016/11/15Web制作object-fit・currentColor・will-change・image-renderingなど、結構マイナーだけど、実用的なCSSプロパティをピックアップしました。Linkobject-fitobject-fitプロパティはボックスに合わせて、アスペクト比を維持したまま画像サイズを調整できます。600×300の画像をCSSで400×400で指定したとすると正方形に引き伸ばされます。この時アスペクト比は崩れてしまいます。contain;を追加すると、imgに指定した400×400の大きさのボックスに全体が格納されるようにアスペクト比を維持したまま表示されます。cover;を指定するとボックス全体を覆うように表示されます。ボックスからはみ出した部分は表示されません。アスペクト比は維持されています。値のfillを使うとアスペクト比は調整されません(fillは初期値である)が、none/contain/cover/scale-downを使うと維持されます。background-sizeで指定しなくても、imgタグ内にプロパティを追記するだけでいいのは便利ですね。WPJによると動画にも適用可能なそうです。昔はOperaだけだったのですが、現在はIE/Edge以外のブラウザで使えるようになってます。useimage-renderingimage-renderingは画像の拡大縮小処理アルゴリズムの変更を行えます。ドット絵など、ページを拡大した時に違和感を軽減するために画像(エッジ)がぼやけるのをCSSでコントロールしたい場合に使うとよいそうです。レスポンス向上、チラツキを防止するwill-changeを使えば、要素の変更などを事前にUAに知らせることができるので、レンダリング処理が早くなります。過度に使用したり、ページに問題がないのに使うと逆効果になるとのこと。will-changeプロパティについて知っておくべきことに書かれてある「JavaScriptを使って、使い終わったwill-changeを削除する方法」を参考にしてみましょう。(日本語訳)IE/Edge/Android2~4系は使えません。色の継承currentColorは色(colorプロパティ)を継承できるプロパティ値です。borderやbox-shadowなどへ適用可能。これを使うことによって個別に指定する必要がなくなります。色を統一したい時に便利。※2016/11/15:twitterでcurrentColorはvalueではないかとご指摘がありました。プロパティの計算値ですので修正いたします。ご指摘ありがとうございました。CodePen.テキストにblueを指定したのをborderやbox-shadowなどでblueを継承しています。currentcolor;}プロパティや、デフォルトでは継承を行わない子要素のプロパティに、色のプロパティを継承させることができます。多段レイアウト、高さが揃う区切り線column-ruleプロパティはマルチカラムの段落間に区切り線を表示することができます。CodePen.column-countでカラム数を指定し、column-ruleで区切り線のスタイル・太さ・色の値を指定します。url();と半円画像を使って、半円の中にテキストを格納する荒業。投稿者:commte株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。した話し方をするおっさん。この後によく読まれている記事2016/01/4それなりに使える、Web制作者がお世話になる便利ツール毎回使うわけではないけれど、いざとなったら意外と役に立つもの。今回はディレクターからコーダーまで「それなり」に使えそうなツールをまとめました。作業労力を軽減してくれる系です。見ているだけでデザインの参考になりそうなテンプレートや、無駄な作業2016/08/29それとなく今風にできる、グローバルナビゲーションのコード集Webサイト全ページのヘッダーかサイドバーに共通して設置される、今時のグローバルナビゲーションをピックアップしました。洗練された見え方にしたい時に。コメントデータの処理方法の詳細はこちらをご覧ください。