CSSでスタイルクエリ(@container style())を使えるようになると、実装がいろいろ便利になる

コンテナクエリがすべてのモダンブラウザの安定版でサポートされ、メディアクエリに代わり、コンテナクエリを使用する機会も増えてきたと思います。

コンテナクエリは親コンテナに基づいてスタイルを定義できるものですが、親のサイズによるクエリだけではありません。親のスタイル値によるクエリ(スタイルクエリ)も可能です。スタイルクエリを使えるようになると、どんな風に便利になるかを紹介します。

スタイルクエリ(@container style())を使えるようになると、CSSの実装がかなり便利になる

Add Superpowers to Your CSS Variables with Style Queries
by Jared White

続きを読む

商用無料、新作フリーフォントがリリース! レトロでロマン溢れるかわいいフォント「になロマン」

2024年用、日本語のフリーフォント699種類のまとめをアップデートした際に好評だった「ネコミミフォント」をはじめ、「おまつりふぉんと」など、楽しくてかわいいフリーフォントをたくさんリリースされている213ちゃんから、新作フリーフォントがリリースされました!

今回は、レトロでかわいい「になロマン」
これはぜひ使ってみたくなるフォントですね。

になロマン

になロマン【商用可】

続きを読む

自分で描いた文字を美しいデザインに! レタリングの基本から応用までしっかりと分かる解説書 -レタリングデザインの極意

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

書体デザインに興味がある人は多いと思います。中でも文字を描くレタリングは、商品のロゴや本の表紙、街中のポスターや看板でもよく見かけます。

レタリングを始めるのに特別な道具は必要ありません。紙とペンがあれば、始められます。自分で描いた文字を美しいデザインにするレタリングの基本から応用までしっかりと分かる解説書を紹介します。

レタリングデザインの極意

続きを読む

WebサイトのUIに役立つ、CSSの:has()疑似クラスの便利な使い方

CSSの:has()疑似クラスは2023年暮れにFirefoxでもサポートされ、すべての主要ブラウザでサポートされました。今までのCSSでは、要素の存在のあり・なしによって特定の親や要素にスタイルを設定することは不可能でしたが、:has()疑似クラスのおかげで、指定した要素がある場合にのみスタイルを適用できるようになりました。

WebサイトのUIでよく見かけるCSSの:has()疑似クラスの便利な使い方を紹介します。今までは少し面倒なCSS、もしくはJavaScriptが必要でしたが、:has()疑似クラスを用いると簡単に実装できます。

WebサイトのUIに役立つ、CSSの:has()疑似クラスの便利な使い方

Some little ways I’m using CSS :has() in the real world
by Andy Bell

続きを読む

これでもうUIデザイン用のSVGアイコンに困らない! 商用無料のSVGアイコンを横断検索・ダウンロードでき、カスタマイズもできる便利サイト -Iconbuddy

商用で無料利用できる、MITライセンスなどのオープンソースで利用できるSVGアイコンは、たくさんのサイトからリリースされています。これらをまとめて検索してダウンロードでき、しかもカスタマイズもできてしまう便利サイトを紹介します。

FigmaとVS Codeのプラグインも揃っており、そこから直接アイコンを利用することもできるので、かなり便利です。

商用無料のSVGアイコンを横断検索・ダウンロードでき、カスタマイズもできる便利サイト -Iconbuddy

Iconbuddy -200K+ open source free svg icons

続きを読む

CSSだけでif~else文と同じことができる! しかもすべてのブラウザでサポートされています

CSSでif~else文が使えたら、と思ったことはありませんか?
もちろんifとかelseはCSSにはありませんが、CSSだけでif~else文と同じようにスタイルを設定できます。

CSSだけでif~else文が使える! しかもすべてのブラウザでサポートされています

続きを読む

商用無料、新作フリーフォントがリリース! 柔らかで穏やかな、紙面を彩る見出し用ゴシック体「紙モノゴシック」

「晩秋レトロミン」「筆竹仮名B」などのフリーフォントをリリースされている二人組ユニット「すずみばと書林」から、新作フリーフォントがリリースされました。

今回は、印刷での使用を目的にデザインされた「紙モノゴシック」
とは言え、もちろんスクリーン、Webデザインやスマホアプリやゲームに使用してもOKで、しっかりとその存在感を残すフォントです。

紙モノゴシック

【フリーフォント】紙モノゴシック

続きを読む

CSS Gridのしっかりとした知識とレイアウトやUIコンポーネントを実装するテクニックを学びたい人にお勧めの解説書 -作って学ぶ HTML+CSSグリッドレイアウト

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

CSS Gridをそろそろ真剣に覚えないと、思っている人にぴったりの解説書を紹介します。

Web制作系の解説書で評価が高いエビスコム様の最新刊で、本書もかなり充実した内容となっています。CSS Gridの基礎知識はもちろん、基本のグリッド、さまざまなレイアウトやUIコンポーネントの実装も豊富で、簡潔なコードでかなりしっかりと解説されています。

作って学ぶ HTML+CSSグリッドレイアウト

続きを読む

top of page

©2024 coliss