こんにちは、かずです。
8月8日は世界猫の日だったそうです。
23時50分前後に知って何もできませんでした・・・
はい、というわけで今日はIEのサポートが終了したので
使い始めたCSSをいくつかご紹介します。
clip-path
便利ですねー。
普通に要素を丸くするだけなら「border-radius」と「overflow:hidden」で事足りますが、できない形も多々あったのですごく助かっています。
（すぐに例が出てきませんが・・・）
種類が色々あり、覚えるのも至難の業なので、下記サイトをぐりぐりしながら使ってます。これもまた便利。
filter
グレースケールやぼかし効果につかえます。
ただ、自分的にかなり便利と思ったのが、「filter: drop-shadow」です。
「box-shadow」では、要素のフチに影をつけるのが限界でしたが、こちらはpngやsvgの形に沿って影をおとせるスグレモノ。
参考にアプリコットデザインのロゴを以下に。
こちらがbox-shadow
こちらがdrop-shadow
もう画像書き出し時に影をつけるかどうかなんて迷わないですね！
object-fit
続いてこちら。コンテナの大きさに合わせて画像をトリミングしてくれます。
ただ、jsライブラリを使ってIEも対応できていたので、js使わなくなって楽になったなーくらい・・・
そして最後にイチオシのこちら！！
line-clamp
テキスト省略はこれまで「text-overflow: ellipsis」を使って1行で省略するか
phpで「mb_strlen()」で数えて、「mb_substr()」で制限付けて・・・みたいに面倒でしたが
このline-clampを使うことでもう全部解決！
下記テキストを省略していきます。※長くてすみません
私も今いったいその安心方というのの上をしないた。近頃今日に戦争院はとにかくその活動たなくなりへ上るて下さいましには希望するですまして、まだにはしましたですた。人格をするた訳はまあほかの万なうまし。ことに大森君から詐欺画いっそ真似が考えず手段その個人私か仕事をというご帰着ですですごとくませから、どういう今は彼らか人尻馬が会って、岡田君のものを世界のどこをはなはだ皆発展と聴きて私外国をご附与からしようにようやくご意味にやっだなけれと、初めて何だか学習に見えますからならなものに知れだな。しかしそこでおろからすれものはしっかり愉快とできるたて、その師範をはおらでてというところを思いてならたべき。
2行指定
3行指定
はい好き。便利すぎない・・・？
といくつかご紹介させていただきました。
他にもたくさん便利なCSSが制限なしに使えるようになりましたが
実務で割と頻繁に使うものになります。
正直、Can I use…を見る機会が減ったのが何よりも時短になっている気がします。
それはさておきこれからもこんな使い方も出来る！みたいなものがあればどんどん紹介していこうと思います！
それでは。
JOURNALが気に入ったら「いいね」してね！
