CSSにおけるブラウザによる互換性の問題はWeb制作でモダンブラウザをターゲットにした場合、以前に比べるとはるかに少なくなりました。昔から使用している無理なリセットCSSやすべてをリセットする必要は全くありません。

IE11のサポート終了から2年が経ち、現在はモダンブラウザの時代です。Chromeをはじめ、chromiumベースのEdge、Safari、Firefoxはエバーグリーンブラウザ（最新版に自動アップデートするブラウザ）と呼ばれています。

現在の制作環境に合わせて制作された新しいリセットCSSの中から特に注目すべきリセットCSSを紹介します。CSSのテクニックや知見も満載です！

「知っておくと便利なCSSの単位」シリーズの最後となる今回は、絶対単位（px, in, mmなど）の使いどころを紹介します。

Webサイトやスマホアプリを実装する際に使用する単位は、相対単位が主流ですが、現在でも絶対単位は特定のケースで非常に役立ちます。

Absolute length units -Going beyond pixels and (r)ems in CSS
by Brecht De Ruyte

「になロマン」「ネコミミフォント」「おまつりふぉんと」など、楽しくてかわいいフリーフォントをたくさんリリースされている213ちゃんから、新作フリーフォントがリリースされました！

今回は、筆の入りがくちばしだったり、濁点・半濁点がたまごにデザインされた、鳥をあしらったフォント「くちばしフォント」 フォントの日（4/10）のまとめ記事で漏れてしまったので、紹介します。

くちばしフォント【商用可】

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

AIをクリエイティブな作業で使用するときに重要になるのが、最初と最後です。最初とは「適切なプロンプト」、最後とは「どう使用するかの決断」、この2つは人間にしかできない重要な役割です。

Chat GPTをはじめ、Adobe Firefly, Photoshop, Illustrator, Premiere Pro, Midjourney, DaVinci Resolve, ideogram, AIいらすとや, Runway, Soundrawなど、さまざまなAIツールをクリエイティブワークでどのように活用するかが分かる解説書を紹介します。

本書のテーマはズバリ「地味なことはAIに任せて、クリエイティブに集中しよう！」

Webサイトをライトテーマとダークテーマ対応にするには、CSSのlight-dark()関数を使用すると今までより簡単に実装できます。現在のところ、サポートブラウザはChrome, Firefoxですが、Safari TPに実装されており、次のバージョンでサポート予定となっています。

CSSのlight-dark()関数の基礎知識と実践的な使い方を紹介します。

CSS color-scheme-dependent colors with light-dark()
by Bramus!

本日（4/10）は、フォントの日！
そんなフォントの日に合わせて、たくさんの日本語フリーフォントがリリースされているので紹介します。

先日リリースされたSafari 17.4をはじめ、まもなくリリースされるChrome 124でフォームコントロールの縦書きモードが正式にサポートされます。これで、すべての主要モダンブラウザでサポートされることになります。

縦書きモードの対象として日本語ユーザーも含まれているのだと思いますが、見慣れぬせいか違和感が、、、縦書きのコンテンツだったらいいのかな。

Webサイトやスマホアプリの実装に、ボタンは欠かせない要素の一つです。そんなボタンの実装に設定しておくと便利なCSSのスタイルを紹介します。

スマホでボタンをタップした際にズームなどの誤動作が起きないようにするCSS、ボタンのテキストが選択されてハイライトにならないようにするCSS、フォーカス時のアウトラインをより見やすくするCSS、ボタンの論理サイズを設定するCSSなど、デフォルトのスタイルとして設定しておくと便利です。

CSS Button Styles You Might Not Know
by David Bushell