CSSだけでスタイルクエリのサポートを確認する方法、Safari 18のバグを回避する方法も

スタイルクエリとは、親要素のスタイルに応じて子要素のスタイルを適用するCSSの機能です。たとえば、カードのコンテナがあり、カードによってラベルやボタンのスタイルを変更したい場合などに便利です。

このスタイルクエリがブラウザにサポートされているかをCSSだけで確認するテクニックを紹介します。

CSSだけでスタイルクエリのサポートを確認する方法、Safari 18のバグを回避する方法も

Feature detect Style Queries Support in CSS
by Bramus!

続きを読む

2024年最新版、Adobe PhotoshopやIllustratorの新機能をまとめたPDFを無料でダウンロードできます

Adobe公式から、2024年最新版となるPhotoshopやIllustratorの機能一覧がアップデートされたので、紹介します。

新機能が追えてない、まとめて一覧で見たい、過去のアップデート内容も知りたい、そんな人は要チェックです。また、Adobe Fontsで使用できる日本語フォントをまとめたPDFも無料でダウンロードできます。

2024年最新版、Adobe PhotoshopやIllustratorの新機能をまとめたPDFを無料でダウンロードできます

新機能一覧(Illustrator/Photoshop/InDesign) -Adobe公式ブログ

続きを読む

スキルを磨きたい人にお勧め! Adobe Illustratorをすでに使用している中級者に最適な解説書 -10倍ラクするIllustrator仕事術【改訂第3版】

※本ページは、アフィリエイト広告を利用しています。

PhotoshopやIllustratorなど、ソフトウェアの基本操作は書籍やネットで学ぶこともできますが、実践的なテクニックや効率的なテクニックをまとめたものとなるとなかなか見つかりません。

本書はIllustrator使い必携書の10年ぶりのリニューアル版。基本操作の解説はなし、実務ですぐに役立つ効率化の新常識がまとめられた解説書です。

10倍ラクするIllustrator仕事術【改訂第3版】

続きを読む

ついにCSSだけでwidth: auto;やheight: auto;へのアニメーションができるようになります

CSSだけでwidth: auto;height: auto;にアニメーションできたらいいな、と思ったことはありませんか?
たとえば、下記のようにテキストの量によってサイズが異なるボタンです。

これまではCSSでアニメーションするときは、固定値(width: 100px;しかアニメーションが機能しませんでしたが、Chrome 129でサポートされたinterpolate-sizeプロパティやcalc-size()関数を使用すると、簡単にwidth: auto;へのアニメーションが実装できます。

CSSだけでwidth: auto;やheight: auto;へのアニメーションができるようになります

Animate to height: auto; in CSS
by Bramus!

続きを読む

グラデーションがくすんでしまうのには原因がある、それを自動的に解決して美しいグラデーションを生成できる無料ツール -Gradient Generator

美しいグラデーションを作成するには、補間するカラーにグレーが含まれないようにすることが重要です。グレーが含まれてしまうと、それがデッドゾーンになり、汚いグラデーションになってしまいます。

このグレーのデッドゾーンを回避し、簡単に美しいグラデーションを生成できる無料ツールを紹介します。

美しいグラデーションを簡単に生成できる無料ツール -Gradient Generator

Gradient Generator – CSS & SVG Export

続きを読む

Kindle本の特大セールが開催! Figmaの解説書、UIデザイン、フロントエンド開発が最安値でお買い得です

※本ページは、アフィリエイト広告を利用しています。

Kindle本の特大セールが開催されています。
Figmaの解説書、UIデザイン、プロダクトマネジメント本、HTML/CSSのWeb制作、フロントエンド開発など、良書がたくさんセール対象です!

セール期間は、11/7まで。

対象のKindle本は最安値(当方調べ)、久しぶりのセール対象もあり、貴重なこの機会をお見逃しないように。

Kindleセールの対象本

【最大50%OFF】Kindle本 (電子書籍) 高額書籍セール

続きを読む

Illustratorに苦手意識がある人に! デザインするために必要な知識とテクニックが確実に身につく解説書 -はじめてイラレ

※本ページは、アフィリエイト広告を利用しています。

デザイン系のソフトで、その操作が難しいと思われているのがAdobe Illustratorかもしれません。他のソフトは使えるけど、Illustratorはいまいちという人もいると思います。

そんな苦手意識を持っている人に、Illustratorでデザインするために必要な最低限の知識とテクニックを確実に身につけることができる解説書を紹介します。

はじめてイラレ

続きを読む

これは便利なVS Codeの機能拡張! CSSのclamp()関数を使ったレスポンシブ対応のフォントサイズが簡単にできる -Clamp It!

CSSの実装に便利なVS Code用の機能拡張がリリースされました!

レスポンシブ対応のフォントサイズをCSSで定義するときに、面倒なclamp()関数の定義を簡単にできるClamp It!を紹介します。

CSSのclamp()関数を使ったレスポンシブ対応のフォントサイズが簡単にできるVS Codeの機能拡張

Clamp It! -GitHub
Clamp It! -Visual Studio Marketplace

続きを読む

top of page

©2024 coliss