【CSS】短いコードで実装できるCSS小技まとめ

村上 著者:村上

【CSS】短いコードで実装できるCSS小技まとめ

とても便利そうなサイトの記事を見つけたので、備忘録としてまとめ。
短いコードで実装できる CSS の小技まとめです。

見つけた記事はこちら。

【第3弾】少しのコードで実装可能な15のCSS小技集 | Webクリエイターボックス
https://www.webcreatorbox.com/tech/css-tips-3

 

ぬるぬる動くスムーズスクロールの実装方法や、Webフォントの表示遅延を回避する方法などがまとめられています。
以前紹介した CSS で計算式を扱える calc() や、画像をトリミングできる object-fit プロパティも紹介されていました。
確かに、上記 2つには大変お世話になりました…!

記事はこちらから。

【CSS】スタイルシート内で計算式が使えるcalc()が便利
【CSS】CSSのみで画像を簡単にトリミングできる「object-fit」プロパティが便利

 

で、紹介した記事で個人的に面白いと思ったのが、テキストを円形に回り込ませる方法です。
円形要素、例えば円形の写真に対して shape-outside: circle(); を指定すると、画像の周りにテキストを丸く回り込ませることができるそうです。
サンプルは記事に載っているので、そちらをご参考にしてください。
なお、画像自体が円形である必要はなく、border-radius プロパティで円形したものでもOKみたいです。

 

以上、CSS の小技集についてのおすすめ記事のご紹介でした。

  • この記事いいね! (0)

著者について

村上

村上 administrator