CSS

これは朗報！ ついにCSSでif else文が使えるようになります、Chrome 137で新しく追加された7個のCSSの機能

2025/05/30(Fri) 09:12

Chrome 137で追加された、CSSの新しい機能7個を紹介します。今回のアップデートで目玉は、if else文の条件付きでCSSの値を設定できるif()関数がついに使用できるようになりました。また、CSS GridやFleboxで見た目の順序とtabキーの順序が異なるのを制御できる新しいプロパティもサポートされるなど、Web制作者は要チェックです！

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

アクセシビリティを重視した新時代のリセットCSS、ベースとなるより良いスタイルシートを求める人に最適 -UA+

2025/05/26(Mon) 08:53

モダンブラウザが主流となった現在、リセットCSSの必要性が薄れてきました。とは言え、各ブラウザに搭載されているUAスタイルシート（ユーザーエージェントスタイルシート）だけをベースにするのはまだ時期尚早です。

https://coliss.com/articles/build-websites/operation/css/user-agent-plus-css.html#google_vignette

このアイデアはすごい！ テーブルでセルの行を強調表示、さらにそれ以外の部分はぼかして目立たせるCSSのテクニック

2025/05/21(Wed) 08:57

テーブルでセルをハイライトして目立たせるというのはよくあるテクニックですが、さらにそれ以外のセルはぼかしてより目立たせるCSSのテクニックを紹介します。実装のポイントは、:focus-within疑似クラスと:not()否定疑似クラスです。

https://coliss.com/articles/build-websites/operation/css/highlight-the-row-and-blur-out-the-distractions.html#google_vignette

JavaScript不要! HTMLとCSSでつくるカルーセルUI

2025/05/20(Tue) 08:53

2025年4月にリリースされたChrome 135、Edge 135からHTMLとCSSのみでカルーセルUIがつくれるようになりました。新たに追加された::scroll-button()、::scroll-marker疑似要素を使用して、ボタンやインジケーターが実装可能です。

https://ics.media/entry/250516/

カルーセルはもうCSSだけで実装できる！ 疑似要素::scroll-button()と::scroll-marker()の使い方を解説

2025/05/09(Fri) 08:54

Chrome 135でサポートされた::scroll-button()疑似要素は、疑似要素としてインタラクティブなスクロールボタンを作成できます。さらに::scroll-marker()疑似要素は、スクロールコンテナ内の関連するすべてのアイテムに対してフォーカス可能なマーカーのセットを作成できます。

https://coliss.com/articles/build-websites/operation/css/carousel-using-only-css.html

ブックマークしておくと便利！ よく見かけるUIコンポーネントやUI要素を実装するCSSのまとめ -CSSnippets

2025/04/18(Fri) 08:59

Webサイトやスマホアプリでよく見かけるボタンやカード、フォーム、ローディングなど、UIコンポーネントやUI要素を実装するCSSのコード、Tailwind CSSのコード、さらにはReactのコードをまとめたCSSnippetsを紹介します。

https://coliss.com/articles/build-websites/operation/css/cssnippets-by-shefali.html#google_vignette

CSSで幾何学模様や繊細なグラデーションなど、さまざまな要素の背景にパターンを実装できる -MotifyX

2025/04/16(Wed) 08:58

美しい幾何学模様のパターン、ドットやグリッドベースのパターン、繊細なカラーの変化が楽しめるダークグラデーション、マトリックスのような近未来のパターンなど、CSSで実装された背景パターンを紹介します。商用プロジェクトでも完全に無料で利用できます。カラーの変更などのカスタマイズも簡単で、ダークモードでもライトモードでも機能します。

https://coliss.com/articles/build-websites/operation/css/modern-background-patterns-motifyx.html

CSSのfilterプロパティを一覧で設定できる「CSS Filter Preview」作ってみました

2025/04/03(Thu) 08:55

CSSで画像に様々なフィルター効果を指定できるfilterプロパティ。画像をぼかしたり、明度や彩度を設定したり、様々なグラフィック効果を付けることができます。そんなCSSで画像加工ができるfilterプロパティの各フィルター効果を一覧で表示し、各値を画面上で調整しながら効果を確認することができる「CSS Filter Preview」を作ってみたので紹介してみます。

https://black-flag.net/release/20250401-8292.html

フォントをもっと自由に！ CSSのfont-variant活用術

2025/04/02(Wed) 08:54

font-variantプロパティを使用すると、フォントの特定のスタイルや装飾を制御できます。これは、OpenTypeフォントのさまざまな機能を有効化するためのプロパティであり、細かい文字の見た目を調整するために役立ちます。この記事では、font-variantの各種プロパティについて、とくに日本語フォントに役立つものに焦点を当てて紹介します。

https://ics.media/entry/250401/

実は難しい！ CSSのborder-radiusで実装した角丸を矩形からスムーズにアニメーションさせるテクニック

2025/03/26(Wed) 09:01

CSSのborder-radiusで角丸を適用したボックスを拡大・縮小のアニメーションにするとき、最初は鋭角で、拡大したときには角丸になるようにしたいと思ったことはありませんか？

https://coliss.com/articles/build-websites/operation/css/smoothly-animating-border-radius.html