CSS

CSSでheight: autoでもアニメーションが可能に! interpolate-sizeとは

2025/07/07(Mon) 09:06

Chrome 129、Edge 129（2024年9月）で登場した、CSSのinterpolate-sizeプロパティとcalc-size()関数により、固有キーワード値のアニメーションが可能になりました。本記事ではinterpolate-sizeとcalc-size()がどのようなものなのか、作例とともに紹介します。

https://ics.media/entry/250627/

これは朗報！ width: 100%;より便利なstretchキーワードが使えるようになります、Chrome 138で新しく追加された6個のCSSの機能

2025/07/03(Thu) 09:08

先日リリースされたChrome 138で追加された、CSSの新しい機能6個を紹介します。今回のアップデートで目玉は、stretchキーワードをはじめ、新しい関数がいくつかサポートされました。Web制作者は要チェックです！

https://coliss.com/articles/build-websites/operation/work/chrome-138-adds-6-new-css-feature.html#google_vignette

このデザイン、どうコーディングする？ #7｜縦書き⇔横書きをCSSだけでスマートに切り替えるには？writing-modeと論理プロパティを使いこなす

2025/06/30(Mon) 09:00

縦書き、そろそろ避けて通れなくなってきました。以前は「Webは横書き前提」が常識でしたが、最近は日本語デザインでの縦書きニーズもちらほら見かけるようになりました。特にFigmaなどで、「スマホでは縦書きで見せたい」といった指示があると、ちょっと焦りますよね。

https://fastcoding.jp/blog/all/frontend/css-writing-mode-tategaki/

CSS GridやFlexboxでアイテム間のスペース（ギャップ）をスタイル設定するCSSの新しいテクニック

2025/06/20(Fri) 09:02

CSS GridやFlexboxは非常に便利ですが、アイテム間のスペース（ギャップ）をスタイルするときにはボーダーや疑似要素や背景画像を使ったハックでしか実装できませんでした。

https://coliss.com/articles/build-websites/operation/css/new-way-to-style-gaps-in-css.html

CSSで簡単カスタマイズ、洗練されたデザインと気持ちいいアニメーションで動作するUIコンポーネント -SmoothUI

2025/06/17(Tue) 08:58

WebサイトやスマホアプリのUIでよく使用されるアコーディオンやモーダルといった基本的なコンポーネントをはじめ、AppleにインスパイアされたカードやフォトギャラリーやDynamic Islandなどの気持ちよく動作するアニメーションで美しくデザインされたUIコンポーネントを紹介します。

http://coliss.com/articles/build-websites/operation/css/smoothui-beautifully-designed-components-with-smooth-animations.html#google_vignette

CSSのreading-flowプロパティが便利！ CSS GridやFlexboxで見た目とDOMツリー内の順序を一致させることができます

2025/06/13(Fri) 08:58

CSS GridやFlexboxは便利でよく使用していると思います、ただし、見た目の順序とDOMツリー内の順序が一致しないことがあります。これはキーボードやアクセシビリティツールで操作するユーザーにとって非常に問題です。

https://coliss.com/articles/build-websites/operation/css/css-reading-flow.html#google_vignette

Web制作者はチェックしておきたい！ モダンCSSやデベロッパーツールなど、これからの実装に役立つ新機能のまとめ

2025/06/09(Mon) 08:56

2025年もCSSをはじめ、Web制作関連の進化は止まらないですね！Google I/O 2025で、これからのWebを実装するための新機能が発表されました。先日の記事でも紹介したCSSのみでカルーセルを実装する疑似要素のサポート、宣言型ポップオーバー、デベロッパーツールにAIが搭載など、Web制作者がチェックしたおきたい10個の新機能を紹介します。

https://coliss.com/articles/build-websites/operation/work/10-innovations-for-build-modern-web.html#google_vignette

CSSのカスケードレイヤーが便利！ 複数のCSSファイルを効率よく管理できるデフォルトのCSS構造 -CSS boilerplate

2025/06/04(Wed) 08:49

小規模のプロジェクトをはじめ、大規模のプロジェクトもサポートしたCSSのベースとなるテンプレートを紹介します。大きな特徴は、@layerでCSSの構造を明確にし、リセットCSSやサードパーティのCSS、オリジナルのCSSなどのカスケードをより効率よく管理できることです。詳細度や!importantに頭を悩ますこともなくなります。

https://coliss.com/articles/build-websites/operation/css/default-css-structure.html#google_vignette

これは朗報！ ついに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