はてなブックマーク

当ブログのビジターも素材の管理に「Eagle」を使用している人がいると思います。私も6年前から画像やフォントの管理に使用しています。 そんなEagleに新機能として「AI Search」が実装されました！ これがまた非常に便利で、簡単に説明すると、1枚の画像を元に似た画像を探す「類似画像検索」、日本語プロンプトで画像を探す「自然言語検索」の2種類の素材検索ができます。AIはローカル実行されるので、ネット接続不要、アップロードも不要で、オフラインでも利用できます。 下記は、AIによる類似画像検索です。Eagleに保存した画像素材の中から類似した画像を一覧表示します。 素材管理アプリ「Eagle」とは Eagleの新機能「AI Search」とは 「AI Search」のインストール 「AI Search」類似画像検索のやり方 「AI Search」自然言語検索のやり方 素材管理アプリ「Eag

View Transitionsをより簡単に操作するためのコードや関数をまとめたView Transitions Toolkitを紹介します。 View Transitionsを使った最近のナビゲーション、スクロール位置に基づいて要素をアニメーションで変化させたり、アニメーションの制御をコントールするなど、よく使うコードがまとめられています。 View Transitions Toolkit View Transitions Toolkit -GitHub View Transitions Toolkitの特徴 View Transitions Toolkitのデモ View Transitions Toolkitの使い方 View Transitions Toolkitの特徴 ここ数年の間に、CSSのView Transitionsを使用したさまざまなコンテンツが増えてきました。機能もさ

4/7にアップデートされたChrome 147に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、要素のボーダーをあらゆる形状にできるborder-shapeプロパティ、ライトモードとダークモードの両方で読みやすいテキストカラーを設定できるcontrast-color()関数など、Web制作者は要チェックです！ 下記はborder-shapeで実装されており、各要素はそれぞれ独立した形になっています。昔は横V字型の画像を使用していたのが懐かしい、、、 New in Chrome 147 Chrome 147 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに タイムラインの名前付き範囲スクロール CSSのcontrast-color

【新規対象キャンペーン】Adobe Creative Cloud コンプリート|12か月版|オンラインコード版 いつものように「新規購入者限定版」で、本セールで購入するのが初めての人が対象（要は一回のみ）。すでにアカウントを持っている人でも、過去のセールで購入したことがある人でも大丈夫です。 去年のパターンだと、4月上旬の次は7月下旬でした。ただその次は値上げになったので、今年はどうなるかですね。 新規購入者限定版や既存アカウントの延長について詳しくは、前回のセール時の記事をご覧ください。 では、Adobe Fontsに大量追加された日本語フォントを紹介します。 Adobe Fonts Adobe Fontsは、Adobe CCのユーザーなら追加料金なしで利用できます。もちろん商用利用もOK、詳しくはライセンスページをご覧ください。 また、Adobe Fontsのフォントは、Adobe系以

テーブルのヘッダを上部に固定し、さらに列の1つを左端に固定する、これを実装するのは非常に大変です。 一見、position: sticky;を使って、top: 0;とleft: 0;で実装できそうですが、実際にはどちらか一方しか固定されません。JavaScriptを使用してもかなりの量になります。 ここで朗報です、9年間続いていたCSS仕様の問題が解決されます！ position: sticky;がアップデートされ、軸ごとにもっとも近いスクロール位置に追従できるようになったため、このヘッダと列を上部と左端にそれぞれ固定するのが簡単に実装できるようになります。 CSS position: sticky now sticks to the nearest scroller on a per axis basis! by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記

CSSのさまざまな古い書き方をモダンCSSやTailwinds CSSでどう書くのか教えてくれるサイトを紹介します。 要素を中央配置するCSSをはじめ、スクロールバーの出現によるレイアウトシフトを防ぐCSS、HEX値やrgb()値より鮮やかなoklch()による色設定、JavaScriptを使わずにアニメーションで高さを変更するCSSなど、よく使用するCSSのテクニックが満載です。 Modern CSS Code サイトのトップに「2015年のようなCSSを書くのはやめましょう」とあるように、modern.cssはCSSの古い書き方をクリーンでネイティブなモダンCSS、そしてTailwinds CSSでどのように記述するのかを解説しているサイトです。

CSSで装飾したテキストやボタンのデバッグは、各プロパティやその値もそれほど複雑なCSSではないので簡単です。 下記のようにレイヤーが重なったグラデーションのデバッグはどうでしょうか。CSSもかなり複雑で、コードを見ただけでデバッグするのはかなり難しいと思います。そんな複雑なCSSでも簡単にデバッグ・編集できる無料ツールを紹介します。 bg.layers bg.layers -GitHub bg.layersは、CSSで実装された背景レイヤーをデバッグ・編集するためのオンラインツールです。backgroundをはじめ、background-image, background-color, background-positionなど、background-*プロパティの挙動を確認し、各レイヤーを確認したり、レイヤーの順番を変更・非表示にしたり、編集したCSSをコピーすることもできます。

※本ページは、アフィリエイト広告を利用しています。 UIデザインにおいて、もはやFigmaは必要不可欠なツールになっています。 Figmaをこれから初めて使用する人、なんとなく使ってるけどきちんと使い方を学びたい人向けに、WebサイトやスマホアプリのUIをデザインする際にFigmaを効率的に使用する方法がよく分かる解説書を紹介します。 また最近では、Figmaも進化が早く、AI系の機能もかなり充実しており、新機能をまだ試していないという人にもお勧めです！ なんとなく既視感を覚えた人は大正解！ 本書は2023年に出版された『はじめてでも迷わない Figmaのきほん』（紹介記事）の待望の改訂版。改訂にあたってはFigma SitesやFigma Makeをはじめ、8割近く新しく執筆されており、改訂版の枠を超える勢いです。

Webサイトをライトテーマとダークテーマ対応にするには、CSSのlight-dark()関数を使用すると今までより簡単に実装できます。 これまではlight-dark()関数はカラー値（<color>）のみしかサポートしていませんでしたが、画像ファイル（<image>）もサポートされ、ロゴ画像や背景画像などをライトテーマとダークテーマで切り替えることができるようになります。 More Easy Light-Dark Mode Switching by Bramus! はじめに light-dark()関数に欠けていたピース ブラウザのサポート light-dark()関数のフォールバック <color>値や<image>値以外は？ 今後の展望: @function + color-scheme() が救世主になる はじめに 2023年に私は当時画期的だったlight-dark()関数を使っ

「はんなり明朝」「こころ明朝体」「こども丸ゴシック」などのフリーフォント、最近では「ビルと谷間と高架下」「そばとうどん」などをリリースしているTyping Artさんから、新作の日本語フォント「鳩とブリキのワンダランド」がリリースされました！ 無料版と有料版があり、無料版はひらがな・カタカナ・英数記号文字に漢字の「鳩」、有料版はさらに漢字（2,000文字）が収録されています。 ではさっそく、フォントのダウンロード方法。 無料版は下記ページから、「無料ダウンロード」をクリックすると、すぐにダウンロードできます。 ライセンスはオリジナルで、個人でも商用でも無料で利用できます。詳しくはダウンロードファイルの「readme.pdf」をご覧ください。

AIを使用して前景色と背景色のコントラスト、WCAG 2.1および2.2のAA/AAA基準を満たすアクセシブルな色の組み合わせをテストし、さらにその組み合わせに合った色で基準に満たした色も提案してくれる無料ツールを紹介します。 チェックしてくれるツールはこれまでにもありましたが、デザインを損なうことなく代替となる色をAIで提案してくれるツールは、これが初だと思います。 WCAG Color Contrast Checker WCAG Color Contrast CheckerはUIデザインで使用する色の組み合わせが、WCAG 2.1および2.2のAA/AAAに準拠しているかをすぐに確認できる無料ツールです。 AA/AAAに準拠していない場合は、AIによって準拠している色の中で組み合わせに合った色を提案してくれます。 WCAG Color Contrast Checker WCAG Col

セマンティックなHTMLで、Webサイトやスマホアプリでよく使用されるさまざまなUIコンポーネントや要素を実装できる超軽量UIライブラリを紹介します。 デザインはシンプルでミニマル！ 依存関係は一切なく、classレスとまではいきませんが、classの使用は最小限で、カスタマイズも非常に簡単です。 Oat UI Oat UI -GitHub Oat UIは、セマンティックなHTMLでWebサイトでよく使用されるUIコンポーネントを実装する超軽量（8Kb）ライブラリです。依存関係は一切なく、フレームワークやビルドといった複雑さは一切不要です。 ライセンスはMITライセンスで、商用プロジェクトでも無料で利用できます。 Oat UI Oat UIの主な特徴は、下記の通り。 超軽量のライブラリ CSS 6Kb、JS 2.2Kbで、まるでオートミールのように軽い 依存関係ゼロ JavaScriptや

※本ページは、アフィリエイト広告を利用しています。 デザインで役立つのは、良質なデザインの引き出し持っておくこと。バナーのデザインはもちろん、Web制作に携わるすべての人にお勧めのデザイン書を紹介します。 本書は本日、3/19が発売日！ バナーは小さなスペースに、すばやく伝わる情報設計、分かりやすいレイアウト、要素のリズム、視線誘導、注目されやすいフォント、イメージを伝える配色、効果的な装飾など、デザインのさまざまな知識やテクニックが詰まっています。本書ではそれらが良質で豊富な事例とともに詳しく解説されています。 表紙に既視感を覚えた方は、大正解！ 本書は大ベストセラー『思わずクリックしたくなる バナーデザインのきほん』（紹介記事）の続編。当ブログのビジターも多くの人が持っていると思います。 前書ではバナーに使われているデザインを基本から詳しく解説されていましたが、本書ではさまざまな業種別

※本ページは、アフィリエイト広告を利用しています。 1Passwordが、ついに3/27から値上げされるとのことです。この値上げ前の最後となるセールがソースネクストで開催しています！ 1Passwordの公式サイトで購入すると約17,000円（値上げ前の価格、値上げ後は約23,000円）のところ、なんと7,800円！！ セール期間は、3月31日（火）まで。 Amazonのブラックフライデーでも8.900円だったので、これはかなりお買い得かと思います。私が知る限り、これが最安値です。 1Password 3年版 オンライン版 -ソースネクスト 1Passwordの値上げは、2026年3月27日から料金が改訂されるとメールで通達がありました。対象となるのは、個人とファミリープランです（法人は据置）。 個人プランの現在の料金：35.88ドル/年 個人プランの新しい料金：47.88ドル/年 年12

画像をホバーすると拡大するCSSのテクニックは昔からありますが、画像の拡大分をoverflow:hidden;で非表示にするのではなく、clip-pathでクリッピングするとってもシンプルなCSSを紹介します。 実際の動作は、デモページをご覧ください。 See the Pen 画像をホバーすると拡大、マスク 2 by coliss (@coliss) on CodePen. また、OSレベルでアニメーション効果をオフにしている場合は動作しないようにすることもできます。 See the Pen 画像をホバーすると拡大、マスク by coliss (@coliss) on CodePen. OSレベルでのアニメーション効果をオン・オフにするには、 Windowsでは「設定→アクセシビリティ→視覚効果→アニメーション効果」 macOSでは「設定→一般→アクセシビリティ→表示→動きの抑制」 And

テキストを棒グラフや折れ線グラフ、円グラフに変換して表示するフォントがGoogle Fontsで利用できるようになったので紹介します。 たとえば、{b:15,45,80,30,60}というテキストは5つのバーがある棒グラフに、{l:2,5,3,8,1,6,4}は折れ線グラフに、{p:62}は62％の円グラフを表示するオープンソースのフォントです。 Datatype Datatype -GitHub Datatypeの特徴 Datatypeのダウンロード Datatypeの使い方 Datatypeの特徴 Datatypeは、シンプルなテキストを視覚的なグラフに変換するOpenTypeの可変フォントです。グラフを表示するためにOpenTypeの合字置換機能を利用しており、画像やレンダリングライブラリやJavaScriptなどは一切不要です。 サポートブラウザは可変フォントをサポートしているCh

※本ページは、アフィリエイト広告を利用しています。 Reactを使ってみたいけど、どこから始めればよいのか。そんな人にお勧めの挫折せずにReactを学ぶことができる解説書を紹介します。 書名にもあるように『挫折しない』ことに主眼を置いたもので、学ぶためのモチベーションに配慮し、「Reactで作る楽しさ」を感じながらプログラミング全般に通じる基礎知識もしっかり学ぶことができます。 著者の清水氏はUdemyでくるしば名義でReact講座（すべてベストセラー）を提供しており、大畑氏はWorldSkills技能五輪国際大会）に日本代表として出場しフリーランスのフルスタックエンジニアとして活躍しています。 本書はそんなお二人による初の書籍化で、Reactを学習するときの最初の一冊として初心者でも分かりやすいように詳しくていねいに解説されています。また、Reactの入門書としては珍しくフルカラーで、4

3/11にアップデートされたChrome 146に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、スクロールの位置に基づいてアニメーションを制御する機能、meta name=text-scale、trigger-scope、text-indentなど、Web制作者は要チェックです！ New in Chrome 146 Chrome 146 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに スマホでもテキストの拡大縮小ができるようように CSSによるスクロールをトリガーにしたアニメーション trigger-scopeプロパティ タイムラインの名前付き範囲「scroll」 text-indentプロパティのhangingとeach-

SVGアイコン、特に無料で利用できるオープンソースのSVGアイコンをまとめて検索・閲覧できる便利なサイトを紹介します。 さまざまなSVGアイコンのライブラリを横断検索することもでき、好みのデザインを見つけて、SVGアイコンをダウンロードすることもできます。 All SVG Icons All SVG Iconsは、デザイナーやデベロッパー向けに高品質で無料のSVGアイコンを収録したライブラリをまとめて検索・閲覧、そしてダウンロードできるサイトです。収録されているライブラリはなんと220種類以上！ SVGアイコンも25万個以上揃っており、全部使い切るのは無理ってくらいあります。 特に便利なのが、SVGアイコンをライブラリを横断して検索できること。たとえば、「Search」で検索すると、各ライブラリの検索アイコンが表示され、もちろんダウンロードすることもできます。

ユーザーが下方向にスクロールするとヘッダを自動的に非表示にし、ページの途中で上方向にスクロールするとヘッダを表示する、超軽量のスクリプトを紹介します。 実装は非常に簡単で、カスタマイズも簡単、既存のWebページに導入することも簡単です。依存関係はなく、単独で動作します。 Peek Peek -GitHub Peekの特徴 Peekのデモ Peekの使い方 Peekの特徴 Peekはスクロールの意図に基づくヘッダ動作を実現する超軽量のJavaScriptライブラリです。下方向にスクロールするとヘッダを自動的に非表示にし、上方向にスクロールするとアニメーションでヘッダを上から表示します。 Peekはすべてのモダンブラウザ（Chorme, Edge, Safari, Firefox, Opera）をサポートしています。ライセンスはMITライセンスで、個人でも商用プロジェクトでも無料で利用できます

CSSで要素を中央に絶対配置、特にモーダル、メッセージ、スタック、ポップオーバーなどを中央配置するときに適したCSSの新しい記述方法を紹介します。 古い記述方法では、負のパーセンテージを使用していたり、直感的ではないCS […]

見た目はDTMツールですが、中身はOKLCHカラーでUIデザイン用のカラーパレットを生成できる無料ツールを紹介します。 ベースカラーを指定するだけで、6色で構成される美しいカラーパレットを瞬時に生成します。色相環を元にし […]

※本ページは、アフィリエイト広告を利用しています。 Webのアクセシビリティについて一度しっかり学びたかった、アクセシブルな実装ってどうやるの、最新の動向（WCAG 3.0やAIによる影響など）を知りたい、そんな人たちにお勧めしたい解説書を紹介します。 本書は先週発売されたばかりの最新刊、書店にも並んでいると思うでの、ぜひ手に取って確認してみてください。 著者は加藤 善規氏、見たことがある名前だ！ と思った人は正解です。HTMLとCSSのリファレンス本の定番『Web制作必携 HTML&CSS全事典』（紹介記事）の著者で、本書ではHTMLとCSSのしっかりした知識を基盤にしたアクセシビリティについて詳しくていねいに解説されいます。 「いちばんやさしい」とあり、確かにやさしく教えてくれる感じですが、はっきり言って本書の中身は非常に濃いです。この「いちばんやさしい」シリーズは私の知る限り初心者を

Chromeのブラウザはアップデートをチェックしていましたが、デベロッパーツールはなんとなくしか見ていませんでした。 デベロッパーツールで、CSSのcalc()やclamp()などの複雑な計算式やvwやcqwなどの相対単 […]

iOSにLiquid Glassが採用されてから早半年が過ぎました。 当初はiPhoneやiPadのUIに使いにくさを感じていましたが、Liquid Glassを採用しているアプリも増えた最近では逆に採用されていないアプリのUIを見るとちょっと古くさい感じがしたりします。 UIで使われるカードやボタンをLiquid Glassをはじめ、GlassmorphismやNuemorphismにするCSSをコピペで簡単に実装できるコードを生成するツールを紹介します。