みなさんこんにちは！

私が最近覚えたCSS　第2弾を第1弾と同じく備忘録としてご紹介しようと思います！

今回ご紹介する中にもIEやEdgeに対応していないものあるので、ご注意ください！

スムーズスクロール

IE・safariには非対応です。スムーズスクロールってJSじゃないの！？という私の常識が吹っ飛びました。

html{
  scroll-behavior: smooth;
}

See the Pen スムーススクロール by sayuri (@giraffeweb) on CodePen.0

セクションごとにタイトルを固定

これはIE・Edgeには非対応です。
でも結構デザイン的に使い方によってはすごくおもしろい表現ができるのでおすすめなんです～！
IEやEdgeの方には固定できなくてもちゃんと見れてればよしとして使っています。

h3 {
  position: sticky;
  top: 0;
}

See the Pen セクションごとにタイトルを固定 by sayuri (@giraffeweb) on CodePen.0

imgタグにサイズを指定して「object-fit: cover;」を1行追加するだけで
画像のトリミングができちゃうんです★夢のよう～

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
}

See the Pen CSSだけで画像をトリミング！ by sayuri (@giraffeweb) on CodePen.0

最近覚えたCSS　第2弾は以上です！
今回のは割と使い勝手が良いものばかりだと思います！
すべてのブラウザで使えるといいんですが…

みなさんもぜひ使ってみてくださいね！

• blog,
• code,
• css3