HackerNoonのレトロなデザインにインスパイアされた、24ピクセルのグリッドで設計されたピクセルアイコンを紹介します。

アイコンは1,440個以上あり、一貫性が確保されたかわいいデザインです。Webサイト、アプリ、プロダクトなど、さまざまなプロジェクトで無料で利用できます。

Pixel Icon Library
Pixel Icon Library -GitHub

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

Webサイトやスマホアプリの善し悪しや品質を感覚的に判断されてしまうことがあります。たとえば、デザイナーのセンスだったり、クライアントのフィーリングだったり、そういった経験はありませんか？

UIデザインの使いやすさや便利さ（機能性）とビジュアルのクオリティ（情緒性）を両立させたデザイン方法と方針策定のプロセスをロジカルに解説したデザイン書を紹介します。

CSS GridやFlexboxで配置するプロパティや値は？ 最初の3つだけを指定するセレクタは？ という「あれは何だっけ？」に役立つのが、チートシートです。

CSS GridやFlexboxの各プロパティ・値でどのように配置されるのか、セレクタやnth-child()やdisplayやposition、VS CodeやGitのコマンドがまとめられたチートシートを紹介します。
チートシートは高解像度版が用意されており、ダウンロードしておくと便利です。

CheatSheets -GitHub

フォントのサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィのテクニックです。CSSのclamp()関数を使用するとビューポートをベースにしてフォントサイズの最小値と最大値を定義してその間の値を流動的に設定することができます。

たとえば、小さいスクリーンでは最小値の16pxに、大きいスクリーンでは最大値の24pxに設定し、その間はスクリーンサイズに応じてフォントサイズが変化する、という感じに実装できます。また、メディアクエリが一切不要というのもいいですね。

CSSのclamp()関数を使用したレスポンシブ対応のフォントサイズを簡単に定義できるオンラインツールを紹介します。

Type Scale Generator

フリーフォントの「はんなり明朝」「こころ明朝体」をはじめ、最近では「海と山のろごごち」「うさぎと満月のサンセリフ」「そばとうどん」などをリリースされているTyping Artから、新作となるフリーフォントがリリースされました！

今回は、無料版と有料版の「風と大地の太ゴシック」です。無料版はひらがな・カタカナ・英数記号文字と漢字が30文字、有料版ではそれらに加えて漢字頻出度上位の2,000文字が揃っています。

風と大地の太ゴシック: 無料版
風と大地の太ゴシック: 有料版
写真: UnsplashのTamara Harhaiが撮影した写真

Chrome 134で追加された、CSSの新しい機能5つを紹介します。
今回のアップデートで目玉となるのは、dialog要素にclosedby属性が追加されダイアログの閉じる動作が制御可能になり、select要素のスタイルができるようになり、ハイライト継承がより直感的になるなど、Web制作者必見の便利な機能が追加されています！

New in Chrome 134
Chrome 134 beta

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

ここ数年、Photoshopの進化がすごいですね！
画像補正、選択範囲やマスク、テキストのエフェクト、人物の肌補正、風景や飲食物のレタッチ、そして生成AIによるテクニックなど、Photoshopでやりたいことが美しい作例と共にていねいに解説された解説書を紹介します。

「入門」とありますが、侮ってはいけません！
Photoshopの解説書を探すなら、まずはこの本を見てみることをお勧めします。初心者だけでなく、中級者でもけっこう役に立つ解説書です。

先週、CSSで関数を自分で定義できるカスタム関数が使えるようなる（紹介記事）ことをお伝えしましたが、続報として、なんとif()関数も使えるようになるそうです。すでにChrome Canaryではif()関数をCSSで使用できます。

CSSで使えるif()関数は、if()はもちろん、elseも使用でき、条件付きで値を選択できるようになります。

CSS @function + CSS if() = 🤯
by Bramus!