これはすごい! HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります

先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。

今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。

HTMLのpopover属性でポップオーバーが簡単に実装できるようになります

Introducing the popover API
by Una Kravets

続きを読む

head内の各要素とその重みをリスト化し、プライオリティが高い順に並べ替えてくれるツール -capo.js

head内に記述する要素の順番はページのパフォーマンスに影響を与える可能性があります。記述の順番が間違っている要素を特定し、プライオリティが高い順にしてくれるツールを紹介します。

指定したページのhead内の各要素とその重みをリスト化し、プライオリティが高い順に並び替えたものもリスト化してくれます。

head内で記述の順番間違っている要素を特定し、プライオリティが高い順に並べ替えてくれるツール -capo.js

rviscomi/capo.js
rviscomi/capo.js -GitHub

続きを読む

CSSの「display: block;」が「display: block flow;」になる、displayプロパティで2値構文がサポートされます

CSSのdisplayプロパティはよく使用すると思います。値にflex, gridを設定したり、ブロックやインラインにしたい時にblock, inlineを設定します。

そんなdisplayプロパティで2つのキーワードを値として設定できる2値構文がサポートされます。すでにSafariとFirefoxにサポートされており、ChromeとEdgeは7月リリース予定の115でサポートされます。

CSSのdisplayプロパティで2値構文がサポートされます

続きを読む

QRコードをデザインする新しい方法で、かなり自由にデザインしてQRコードを作成できるオンラインツール -QR code designer

QRコードをかなり自由にデザインして作成できるオンラインツールを紹介します。他の今までのツールはエラー訂正レベルを使用していましたが、本ツールは違います。

先日リリースされたばかりの最新ツールです!
カラーを変更したり、文字や図形を加えたり、画像やパターンなどを加えてデザインすることもできます。日本語を使用してデザインすることもできるので、非常に便利です。

QRコードをかなり自由にデザインして作成できるオンラインツール -QR code designer

QR code designer
QR code designer -GitHub

続きを読む

UIとUXデザインについて基礎からしっかり学べる解説書 -現場のプロがわかりやすく教えるUI/UXデザイナー養成講座

WebサイトとスマホアプリのUIデザイン、UXデザインのさまざまな手法やプロセスを網羅的に幅広く、分かりやすく解説した解説書を紹介します。

UI/UXデザインを一通り学んでおきたい人にお勧めで、実際の現場や最近の流れを受けて必要となる知識を身につけることができます。さらに、UI/UXデザイナーのキャリアにも触れられており、会社選びや働き方について参考になります。

現場のプロがわかりやすく教えるUI/UXデザイナー養成講座

続きを読む

HTMLメールの最近の実装方法を解説、tableは不要になりました

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

HTMLメールの最近の実装方法を解説します。

HTMLメールの最近の実装方法を解説、tableは不要になりました

Modern HTML email (tables no longer required)
by Ollie Williams

続きを読む

もうこれでSVGアイコンを探すときに困らない! 無料で利用できるアイコンライブラリを横断検索できる便利サイト -Icônes

当ブログでもたくさんのSVGアイコンのライブラリを紹介してきましたが、それらのほとんどがひとまとめに閲覧・検索できる便利なサイトを紹介します。

複数のアイコンライブラリから探せるだけでなく、異なるライブラリのアイコンをまとめてアイコンフォントにもできます。矢印アイコンはMaterial Iconsで、ホームアイコンはBootstrapで、ということもできます。

もうこれでSVGアイコンを探すときに困らない! 無料で利用できるアイコンライブラリを横断検索できる便利サイト -Icônes

Icônes
Icônes -GitHub

続きを読む

Chromeのデベロッパーツールで、CSSの詳細度が表示されて便利になります

ようやくか、という声も聞こえてきそうですが、ChromeのデベロッパーツールでCSSの詳細度が表示されるようになります。

CSSを普段使用している人はセレクタを見ただけで詳細度が分かると思いますが、こういうちょっとしたアップデートが重ねられていくのは便利になりますね。

Chromeのデベロッパーツールで、CSSの詳細度が表示されて便利になります

続きを読む

top of page

©2023 coliss