これはすごい! HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります
Post on:2023年6月8日
先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover
属性が使用できるようになりました。
今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover
属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。

Introducing the popover API
by Una Kravets
head内の各要素とその重みをリスト化し、プライオリティが高い順に並べ替えてくれるツール -capo.js
Post on:2023年6月7日
head
内に記述する要素の順番はページのパフォーマンスに影響を与える可能性があります。記述の順番が間違っている要素を特定し、プライオリティが高い順にしてくれるツールを紹介します。
指定したページのhead
内の各要素とその重みをリスト化し、プライオリティが高い順に並び替えたものもリスト化してくれます。

CSSの「display: block;」が「display: block flow;」になる、displayプロパティで2値構文がサポートされます
Post on:2023年6月6日
CSSのdisplay
プロパティはよく使用すると思います。値にflex
, grid
を設定したり、ブロックやインラインにしたい時にblock
, inline
を設定します。
そんなdisplay
プロパティで2つのキーワードを値として設定できる2値構文がサポートされます。すでにSafariとFirefoxにサポートされており、ChromeとEdgeは7月リリース予定の115でサポートされます。

QRコードをデザインする新しい方法で、かなり自由にデザインしてQRコードを作成できるオンラインツール -QR code designer
Post on:2023年6月5日
QRコードをかなり自由にデザインして作成できるオンラインツールを紹介します。他の今までのツールはエラー訂正レベルを使用していましたが、本ツールは違います。
先日リリースされたばかりの最新ツールです!
カラーを変更したり、文字や図形を加えたり、画像やパターンなどを加えてデザインすることもできます。日本語を使用してデザインすることもできるので、非常に便利です。

UIとUXデザインについて基礎からしっかり学べる解説書 -現場のプロがわかりやすく教えるUI/UXデザイナー養成講座
Post on:2023年6月2日
WebサイトとスマホアプリのUIデザイン、UXデザインのさまざまな手法やプロセスを網羅的に幅広く、分かりやすく解説した解説書を紹介します。
UI/UXデザインを一通り学んでおきたい人にお勧めで、実際の現場や最近の流れを受けて必要となる知識を身につけることができます。さらに、UI/UXデザイナーのキャリアにも触れられており、会社選びや働き方について参考になります。

HTMLメールの最近の実装方法を解説、tableは不要になりました
Post on:2023年6月1日
HTMLメールの実装で「table
か、、、」とため息をついていた人に朗報です。
table
を使用しなくてはいけなかった理由はWindows上のOutlookだったのですが、新しいOutlookではレンダリングエンジンがEdgeに切り替わります。これにより、table
による実装は不要になります。
HTMLメールの最近の実装方法を解説します。

Modern HTML email (tables no longer required)
by Ollie Williams
もうこれでSVGアイコンを探すときに困らない! 無料で利用できるアイコンライブラリを横断検索できる便利サイト -Icônes
Post on:2023年5月31日
当ブログでもたくさんのSVGアイコンのライブラリを紹介してきましたが、それらのほとんどがひとまとめに閲覧・検索できる便利なサイトを紹介します。
複数のアイコンライブラリから探せるだけでなく、異なるライブラリのアイコンをまとめてアイコンフォントにもできます。矢印アイコンはMaterial Iconsで、ホームアイコンはBootstrapで、ということもできます。

Chromeのデベロッパーツールで、CSSの詳細度が表示されて便利になります
Post on:2023年5月30日
ようやくか、という声も聞こえてきそうですが、ChromeのデベロッパーツールでCSSの詳細度が表示されるようになります。
CSSを普段使用している人はセレクタを見ただけで詳細度が分かると思いますが、こういうちょっとしたアップデートが重ねられていくのは便利になりますね。
