CSSでスタイルクエリ(@container style())を使えるようになると、実装がいろいろ便利になる
Post on:2024年3月19日
コンテナクエリがすべてのモダンブラウザの安定版でサポートされ、メディアクエリに代わり、コンテナクエリを使用する機会も増えてきたと思います。
コンテナクエリは親コンテナに基づいてスタイルを定義できるものですが、親のサイズによるクエリだけではありません。親のスタイル値によるクエリ(スタイルクエリ)も可能です。スタイルクエリを使えるようになると、どんな風に便利になるかを紹介します。
Add Superpowers to Your CSS Variables with Style Queries
by Jared White
商用無料、新作フリーフォントがリリース! レトロでロマン溢れるかわいいフォント「になロマン」
Post on:2024年3月18日
2024年用、日本語のフリーフォント699種類のまとめをアップデートした際に好評だった「ネコミミフォント」をはじめ、「おまつりふぉんと」など、楽しくてかわいいフリーフォントをたくさんリリースされている213ちゃんから、新作フリーフォントがリリースされました!
今回は、レトロでかわいい「になロマン」
これはぜひ使ってみたくなるフォントですね。
自分で描いた文字を美しいデザインに! レタリングの基本から応用までしっかりと分かる解説書 -レタリングデザインの極意
Post on:2024年3月15日
※本ページは、アフィリエイト広告を利用しています。
書体デザインに興味がある人は多いと思います。中でも文字を描くレタリングは、商品のロゴや本の表紙、街中のポスターや看板でもよく見かけます。
レタリングを始めるのに特別な道具は必要ありません。紙とペンがあれば、始められます。自分で描いた文字を美しいデザインにするレタリングの基本から応用までしっかりと分かる解説書を紹介します。
WebサイトのUIに役立つ、CSSの:has()疑似クラスの便利な使い方
Post on:2024年3月14日
CSSの:has()
疑似クラスは2023年暮れにFirefoxでもサポートされ、すべての主要ブラウザでサポートされました。今までのCSSでは、要素の存在のあり・なしによって特定の親や要素にスタイルを設定することは不可能でしたが、:has()
疑似クラスのおかげで、指定した要素がある場合にのみスタイルを適用できるようになりました。
WebサイトのUIでよく見かけるCSSの:has()
疑似クラスの便利な使い方を紹介します。今までは少し面倒なCSS、もしくはJavaScriptが必要でしたが、:has()
疑似クラスを用いると簡単に実装できます。
Some little ways I’m using CSS :has() in the real world
by Andy Bell
これでもうUIデザイン用のSVGアイコンに困らない! 商用無料のSVGアイコンを横断検索・ダウンロードでき、カスタマイズもできる便利サイト -Iconbuddy
Post on:2024年3月13日
商用で無料利用できる、MITライセンスなどのオープンソースで利用できるSVGアイコンは、たくさんのサイトからリリースされています。これらをまとめて検索してダウンロードでき、しかもカスタマイズもできてしまう便利サイトを紹介します。
FigmaとVS Codeのプラグインも揃っており、そこから直接アイコンを利用することもできるので、かなり便利です。
CSSだけでif~else文と同じことができる! しかもすべてのブラウザでサポートされています
Post on:2024年3月12日
CSSでif~else文が使えたら、と思ったことはありませんか?
もちろんif
とかelse
はCSSにはありませんが、CSSだけでif~else文と同じようにスタイルを設定できます。
商用無料、新作フリーフォントがリリース! 柔らかで穏やかな、紙面を彩る見出し用ゴシック体「紙モノゴシック」
Post on:2024年3月11日
「晩秋レトロミン」「筆竹仮名B」などのフリーフォントをリリースされている二人組ユニット「すずみばと書林」から、新作フリーフォントがリリースされました。
今回は、印刷での使用を目的にデザインされた「紙モノゴシック」
とは言え、もちろんスクリーン、Webデザインやスマホアプリやゲームに使用してもOKで、しっかりとその存在感を残すフォントです。
CSS Gridのしっかりとした知識とレイアウトやUIコンポーネントを実装するテクニックを学びたい人にお勧めの解説書 -作って学ぶ HTML+CSSグリッドレイアウト
Post on:2024年3月8日
※本ページは、アフィリエイト広告を利用しています。
CSS Gridをそろそろ真剣に覚えないと、思っている人にぴったりの解説書を紹介します。
Web制作系の解説書で評価が高いエビスコム様の最新刊で、本書もかなり充実した内容となっています。CSS Gridの基礎知識はもちろん、基本のグリッド、さまざまなレイアウトやUIコンポーネントの実装も豊富で、簡潔なコードでかなりしっかりと解説されています。