これは覚えておきたい！ シンプルなCSSで、画像をホバーすると拡大し、マスクまでしてくれる

2026/03/18(Wed) 08:55

画像をホバーすると拡大するCSSのテクニックは昔からありますが、画像の拡大分をoverflow:hidden;で非表示にするのではなく、clip-pathでクリッピングするとってもシンプルなCSSを紹介します。

https://coliss.com/articles/build-websites/operation/css/css-image-hover-scaley-mask.html

ちょっと面白いフォントがGoogle Fontsで使える！ テキストを棒グラフや折れ線グラフ、円グラフに変換して表示できるフォント -Datatype

2026/03/17(Tue) 09:01

テキストを棒グラフや折れ線グラフ、円グラフに変換して表示するフォントがGoogle Fontsで利用できるようになったので紹介します。たとえば、{b:15,45,80,30,60}というテキストは5つのバーがある棒グラフに、{l:2,5,3,8,1,6,4}は折れ線グラフに、{p:62}は62％の円グラフを表示するオープンソースのフォントです。

https://coliss.com/articles/freebies/turns-text-into-charts-datatype.html

Web制作者は要チェック！ スマホでもテキストサイズの拡大縮小ができるようになるなど、Chrome 146で新しく追加された5個のCSSの機能

2026/03/13(Fri) 08:56

スマホでもテキストの拡大縮小ができるようように これまでiOSやAndroidではテキストサイズを変更しても、Webページのテキストサイズに反映されないことがありました。これはブラウザと作成されたコードに依存しており、推奨されるアプローチとは異なります。Chrome 146でmetaに新しくtext-scaleが導入されました。これにより、ユーザーはOSでフォ​​ントサイズの設定を大きくした場合に、フォントサイズを大きくできるようになります。

https://coliss.com/articles/build-websites/operation/work/chrome-146-adds-5-new-css-feature.html