はてなブックマーク

ネタバレのテキストをTelegram風のパーティクルアニメーションを備えたエフェクトで非表示にし、クリックするとそのテキストが表示されるJavaScriptで実装された軽量のWebコンポーネントを紹介します。 依存関係はなしで、スマホでもタブレットでもデスクトップでも機能します。 spoilerjs spoilerjs -GitHub spoilerjsの特徴 spoilerjsのデモ spoilerjsの使い方 spoilerjsの特徴 spoilerjsは、依存関係のないWebコンポーネントで、ネタバレ警告付きのテキストを一時的に非表示にすることができます。 ビジターがネタバレのテキストをクリックすると、Telegramアプリにインスパイアされた美しいパーティクルアニメーションとともにテキストが表示されます。パフォーマンスが高く、実装も簡単で、あらゆるモダンブラウザで動作します。 sp

スクロールチェーン（スクロールの連鎖）とは、ページ上にスクロールするコンテンツ（ダイアログやモーダルなど）があり、そのコンテンツをスクロールして終点に到達するとその下のページのコンテンツもスクロールしてしまう現象です。 Chromeの次のバージョンで、この問題が数行のCSSで解決できるようになるので、紹介します。 Use overscroll-behavior: contain to prevent a page from scrolling while a <dialog> is open by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールチェーン（連鎖）とは overscroll-behaviorの問題点 スクロールチェーン（連鎖）を回避する方法 はじめに 2026年1月にリリース予定

Pantoneから2026年のトレンドカラーが発表されました。 2026年のトレンドカラーはあらゆる色彩を輝かせる繊細なホワイトの「クラウド ダンサー（Cloud Dancer）」、新たな始まりを示唆した色合いです。 ホワイトという色は純粋、無垢、完全を象徴しており、あらゆるデザインやプロダクトに調和し、コントラストを生み出す色調で、単独でも他の色相との組み合わせでも、軽やかな印象を与えるカラーです。 Pantone Color of the Year 2026 PANTONE 11-4201-TCX Cloud Dancer「クラウド ダンサー」 2026年のトレンドカラー「クラウド ダンサー」を使用した配色 クラウド ダンサーのカラーデータ PANTONE 11-4201 TCX Cloud Dancer「クラウド ダンサー」 2026年のトレンドカラーとして、Pantoneはホワイト

12/3にアップデートされたChrome 143に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートの注目は、CSSの「@container anchored(fallback)」という新しいクエリ、background-position-x/yの相対構文、font-language-overrideプロパティなど、Web制作者は要チェックです！ New in Chrome 143 Chrome 143 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSのアンカーコンテナクエリでフォールバック位置を検出 background-position-x/yの相対構文 CSSのfont-language-overrideプロパティ TextForm

デスクトップ用のモニターをはじめ、ノートパソコンのスクリーン、タブレット、スマホ、テレビ、プロジェクターなど、さまざまなデバイスのあらゆるスクリーンのドット抜け、単色テスト、グラデーションテスト、グリッドパターン、モーションテストができる無料ツールを紹介します。 今使っているデバイスの定期チェック、新しいデバイスを購入したとき、中古のデバイスを購入したときに、このツールを使って検証することができます。 Free Screen Test Tool Free Screen Test Toolはデスクトップのモニターからノートパソコン・タブレット・スマホまで、全デバイスのスクリーンのドット抜け・表示ムラをテストできる無料ツールです。 登録など面倒なことは一切不要、簡単に利用できます。 Free Screen Test Tool Free Screen Test Toolでテストできる機能は4つ。

日本人のクリエイターが描いた、海外風のポップでおしゃれなイラスト素材がダウンロードできるサイトを紹介します。 イラスト素材は透過PNGとSVGが揃っており、個人でも商用プロジェクトでも無料で利用できます。 ポップでシンプ […]

CSSでは、さまざまなカラーモデルで色を設定できます。16進数によるHEX値、rgb()によるRGB値、hsl()によるHSL値、lab()によるLAB値、oklch()Oklch値、oklab()によるOklab値など、現在ではすべてのブラウザにサポートされています。 中でも最近では、トーンを合わせたカラーを簡単に作ることができるOKLCHカラーの人気が高まっています。このOKLCHカラーについて紹介します。 oklch.fyi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 OKLCHカラーとは カラーモデルとは 色域とは OKLCHの構造 OKLCHだと明るさの一貫性が簡単 OKLCHだとシェードも簡単 OKLCHだとグラデーションも美しい カラースペースのサポート 最大彩度 ブラウザのサポートとフォールバック OKLCH

キーボードで文書や単語のタイピング練習をはじめ、JavaScriptやReactなどのコードでもタイピング練習ができるオンラインツールを紹介します。 タイピング練習できるサイトはたくさんありますが、本ツールはAIによる詳細な解析が大きな特徴で、単語による入力速度、誤入力のパターン、各指ごとのパフォーマンスなどをAIで視覚的に分析してくれます。 TypeQuicker 無料プランで利用できるのは、下記の通り。 厳選されたコンテンツで無制限にタイピング練習 無制限のタイピング練習 高度なタイピング分析 毎日のタイピングテスト リアルタイムのビジュアルキーボードオーバーレイ リアルタイムタッチタイピングビジュアルハンドガイド タイプレース 40以上のテーマ 10個のカスタムテキスト 進捗状況を追跡する AIによる解析は無料プランでもでき、基本的には無料プランで十分練習できると思います。有料プラン

※本ページは、アフィリエイト広告を利用しています。 Amazonで年に一度のビッグセール「ブラックフライデー 2025」が、12/1までの期間限定で開催しています。ブラックフライデーは通常のセールよりもかなり安くなっており、非常にお買い得です。 見逃しがちなお買い得品、今回のセールで購入したものを紹介します。ガジェット系ももちろんお買い得ですが、生活用品系などもかなりお買い得です！ Amazon ブラックフライデー Amazonでお買い物をする前に、ポイントアップキャンペーンに申し込んでおきましょう。12/1までのお買い物は最大15%のポイントが還元されます。 Amazon ポイントアップキャンペーン 申込ページ セール紹介の前にまずは、Kindle Unlimited 3ヵ月がなんと99円！ 通常2,940円が、99円は文句無しの最安値。2ヵ月1,980円が99円はたまにありますが、3ヵ

Affinityの無料化から2週間が経ち、これからAffinityをやってみるぞという人も多いと思います。 Affinityでお絵描きするときに使いたい、インクの描き味を再現したブラシ素材を紹介します。もしかしたら、期間限定かもしれないので、ダウンロードはお早めに！ ブラシの作者様の紹介 ブラシのダウンロード方法 Affinityにブラシをインストールする方法 ブラシの作者様の紹介 ブラシの作者様によると、Affinityの無料化に合わせて自分自身も何かを無料で提供したいと考え、今回のブラシを無料で公開することにしたとのことです。 With the release of Affinity 3.0, I also wanted to give something of my own, completely free. This ink set is yours! To thank every

※本ページは、アフィリエイト広告を利用しています。 最近はノーコードでWebサイトを制作できるツールが増えてきました。とは言え、HTMLやCSSの知識がないと使えなかったり、カスタマイズもできません。 Webサイトを制作 […]

最近、ディザリングを施した画像をよく見かけ、人気が高まっているように感じます。 画像にディザリングを施すにはいくつかの方法がありますが、ディザリングとはいったい何なのか、ディザリングのやり方を紹介します。 @DanHollickのポストより 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、作者様にライセンスを得て翻訳しています。 「ディザリング（Dithering）」とはを説明する前に、そもそもデジタル画像にディザリングがなぜ必要だったのかをすこし説明しておこうと思います。 現在ではディザリングは美的効果として定着していますが、かつては人間の目を欺いて実際よりも多くの色を見せる目的でディザリングは必要でした。 左: バンディング、右: ディザリング コンピュータの初期はメモリが不足していたため、画像に多くの色情報を保存することができませんでした。この問題を解決するために、ル

フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのビューポートサイズが増えた現在に欠かせないテクニックです。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できる、先日ローンチされたばかりのオンラインツールを紹介します。 Size Matters Size Mattersの特徴 Step 1: 文字スケールの設定 Step 2: 文字スケールの確認 Step 3: エクスポート Size Mattersの特徴 流体タイポグラフィ（Fluid Typography）は、フォントサイズをレスポンシブ対応にする最新テクニックです。さまざまなビューポートサイズに応じて固定値を定義する代わりに、

1つのタブ内に2つのWebページを分割表示したい、と思ったことはありませんか？ 現在はEdgeやZenなどの一部のブラウザのみが分割表示できますが、ついにChromeでも分割表示をネイティブにできるようになります。 1つのタブでマルチタスクを行えるようになり、2つのサイトを並べて表示するために新しくウインドウを開く必要はなりなります。ChatGPTを開きながら作業するときとかに便利ですね。 Chromeで分割表示を有効にする方法 Edgeで分割表示を有効にする方法 Chromeで分割表示を使ってみた Chromeで分割表示を有効にする方法 まだ正式にサポートされていない機能ですが、フラグから機能を有効にすると利用できます。 Chromeのアドレスバーに「chrome://flags/#side-by-side」を入力して、「Split View」を「Enabled（有効）」にするだけです。

まさに次世代の写真素材サイトがローンチしました！ 商用でも完全に無料、クレジット表記も不要、生成AIによる日本人のための写真素材で、写真のモデルは日本人、風景も日本風、被写体・構図・光・質感のすべてが「今のデザイン感覚」に合うものが厳選されており、あらゆるクリエイティブ制作で安心して利用できます。 Adobe Stockや海外の写真素材だと、被写体が外国人ばかりですが、Studio.Stockでは日本人をモデルにしたものばかりってのはいいですね。 Studio.Stock Studio.Stockとは Studio.Stockの利用方法 Studio.Stockの特徴 Studio.Stockを使ってみた Studio.Stockとは Studio.Stockとは、ノーコードWeb制作ツール「Studio」から2025年11月5日にローンチされた生成AIによる高品質な写真素材を提供するクリ

UIデザインに特化され、アクセシブルでライトモードでもダークモードでも各レベルのすべてのカラーが同じ彩度とコントラストを保ち、数学的な処理で一貫性のあるカラーパレットを生成する初のカラーツールを紹介します。 カラーパレットを生成するツールはたくさんありますが、UIデザインに特化されたものとなるとかなり限られます。さらにTailwinds CSS用のコードをエクスポートしたり、Figmaプラグインも用意された優れものです。 Harmonizer 優れたカラーパレットを生成するツールは数多く存在しますが、これらの多くはUIデザインを考慮して作成されていないことがよくあります。 レベルの不一致: 同じレベルの色でも明度や彩度が異なります。 コントラストの推測: テキストの色はUI要素の背景に基づいて手動で調整する必要があります。 テーマのミラーリング: ライトモードとダークモードにはカスタムマッ

CSSに便利な機能が追加されます！ スクロールした方向を記憶するクエリで、たとえば下にスクロールしたときにはヘッダも普通に上部に隠れ、その後ページのどこからでも上にスクロールするとヘッダを上からアニメーションで再度表示するといったことがほんの数行のCSSで簡単に実装できるようになります。 Solved by CSS Scroll State Queries by Bramus! スクロールの状態をクエリするCSSのscroll-stateに新しいタイプscrolledが使えるようになります。 スクロールが可能であることを表すscrollableとは異なり、scrolledは、最後にスクロールした方向を記憶します。これを利用することで、「非表示バー」を作成できます。つまり、下にスクロールすると（または下にスクロールした後）、非表示バーは非表示になります。その後、上にスクロールすると、非表示バ

Web制作やデザインでよく使用するツール、たまにしか使わないけど必要なツールをまとめて使用できる、日本人制作者によるツールを紹介します。 本ツールは先月リリースされたばかり！ パスワード生成、黄金比・白銀比計算、スクショ分割、電子印鑑生成、個人情報のダミーデータなど、それぞれ既存ツールがありますが、機能がすこし強化されて日本人向けに便利になっている点も見逃せません。 マッハーツール マッハーツールを作成されたのは、「Webデザインの新しい教科書」「HTML＆CSSコーディングとサイト制作の教科書」などの書籍を執筆されている赤間 公太郎氏。 日々よく使用するツールや、たまにしか使わないけど必要なツールを一箇所にまとめて使えるようにしたのがこのマッハーツールです。さらに既存ツールであと少しだけこんな機能も加わればいいのにと、便利になる機能も追加されています。 マッハーツールについて マッハーツ

10/29にアップデートされたChrome 142に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、コンテナクエリとif()関数の範囲構文、ビジターが興味を示したときに反応するinterestfor属性、:target-before疑似クラスと:target-after疑似クラスなど、Web制作者は要チェックです！ New in Chrome 142 Chrome 142 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに :target-before疑似クラスと:target-after疑似クラス ::view-transition要素の絶対位置指定 activeViewTransitionプロパティ コンテナクエリとif()関

2025年10月1日に、W3Cの新しいロゴがリリースされました。 W3Cは1997年から基本的に同じロゴを使用しており、2022年に公益非営利団体として独立した際にロゴがすこし変更されましたが、この変化はあまり気がつかれませんでした。 今回のロゴの変更は多くの人に認知されるようモダンなデザインに変更され、かつブランド認知度を損なわないことを目指したものです。 W3Cは、前向きな変化の兆しを感じさせる新たなロゴを採用いたします 新しいロゴのデザインではW3Cを象徴するブルーは健在で、時代を超えた信頼性、つながり、コミュニティを表現するとともにグローバルな視点を持つ組織であることを示しています。また、「W3C」の文字や数字を使用するのではなく、螺旋構造を連想させるシンボルが採用されています。シンボルを囲む「World Wide Web Consortium」はW3Cのコミュニティが表されていま

JavaScriptは使用せずに、シンプルなCSSだけでスクリーンの幅と高さ、さらには任意の要素の幅と高さの値を取得する方法を紹介します。 取得する値は単位のない値なので、CSSのあらゆる数式で再利用できます。 まずはスクリーンの幅と高さの値を取得するデモページをご覧ください。 See the Pen Screen width/height (CSS-only) by coliss (@coliss) on CodePen. このCSSで取得できる値は厳密に言うと、ビューポートのサイズです。そのためスマホのように幅と高さいっぱいで表示するような環境であれば、スクリーンのサイズと同義になります。デスクトップの場合はブラウザをフルスクリーンで表示した際にそうなります。 下記のシンプルなCSSでスクリーンの幅と高さの値を取得できます。

WebサイトやスマホアプリのUIデザインをはじめ、ブランドアイデンティティの構築などで視覚的に美しく、アクセシビリティの高い配色を簡単に作成できるツールを紹介します。 アクセシビリティのテストをしたり、実際のUIコンポーネントでプレビューしたり、AIを使ってパレットに名前を付けたりすることも可能です。 ColorMate あらゆる色相を自在にコントロールし、HEXコードやCSS変数をエクスポートしたり、生成したカラーパレットをオンラインで共有することもできます。また、生成したカラーパレットを元にAIで名前を付けることもできます。 完璧なカラーパレットを作成する方法 魅力的でコンバージョン率の高いカラースキームを作成するには、いくつかのポイントがあります。 目標を明確にする Webサイト、アプリ、ブランドのアイデンティティ、マーケティング資料など、デザインの目的を明確にしましょう。それぞれの

攸の仮寓さんから新作の手書きフリーフォント「立冬のころに」を紹介します。 ひらがな・カタカナをはじめ、漢字はJIS第二水準まで完備されており、「薔薇」「篳篥」「珈琲」などの漢字も使用できます。 まずはさっそく、フォントのダウンロード方法から。 下記ページにアクセスし、「無料ダウンロード」をクリックすると、ダウンロードできます（要ログイン、登録無料）。 ライセンスは独自で、「個人利用、商用利用ともに可。変形・加工もOKです」とのことです。詳しくは下記ページをご覧ください。 フォント「立冬のころに」 フォントはすべて手書き文字で、ひらがな・カタカナをはじめ、英数記号文字、JIS第二水準までの文字が収録されています。 「薔薇（ばら）」「篳篥（ひちりき）」「珈琲（コーヒー）」などの漢字も使用できます。

フォームの実装ってなかなか面倒ですよね。 数回クリックするだけで、すぐに使えるさまざまなフォームを実装できる無料のAIツールを紹介します。 お問い合わせやログインのフォームをはじめ、サインアップ、アンケード、イベント登録、商品注文、カスタマーサポートなど、さまざまなタイプのフォームが用意されており、日本語のプロンプトでオリジナルのフォームを実装することもできます。 Formcn 主な特徴は、下記の通り。 本番環境ですぐに使えるコード AIで生成するコードに矛盾はなく、常に一貫性があり、実績のあるコードでメンテナンスも容易です。 シングルステップ・マルチステップフォーム ニーズに合わせて、シングルステップとマルチステップフォームを簡単に選択できます。 クライアント側とサーバー側の検証 Zodとnext-safe-actionを使用したクライアント側とサーバー側で検証済みです。 使いやすい s

※本ページは、アフィリエイト広告を利用しています。 ここ一、二年でAdobeのPhotoshopはこれまで以上に大きく進化しました。その大きな要因は生成AIの機能が搭載されたことで、たとえば背景補完や要素の差し替えといった手間がかかる作業もこれまでとは比べものにならないくらい短時間でできるようになりました。 そして、Photoshopによるレタッチも大きく変わりました。レタッチに必須の知識と現役で使える以前からある機能、それらに生成AIの機能などの技術を組み合わせて使いこなすレタッチの最新テクニックを解説したデザイン書を紹介します。 本書は本日発売されたばかり！ Photoshopのレタッチといえば、著者の楠田 諭史氏を思い浮かべる人も多いと思います。『Photoshopレタッチ・加工 アイデア図鑑』『デザインテクニック大全』『Photoshopレタッチレシピ集』など多数のデザイン書を手

指定したカラーをベースにシェードのバリエーションを生成し、色彩トーンを使ったUIデザインにぴったりな配色を生成するオンラインツールを紹介します。 このツールのUIも非常に洗練されており、操作性も非常に快適です。 Kigen Color Generator Kigen Color Generatorは、人気が高いデザインシステムから取得したプリミティブカラーパレットを用いてUIデザイン用のカラーを生成するジェネレーターです。 指定したカラーをベースにシェード、シェードとは暗清色で黒を加えた色（ちなみにティントは明清色で白を加えた色）、、最近のUIデザインでよく使用されている色彩トーンを使った配色をすぐに生成できます。

先日、CSSワーキンググループでCSSの新しい関数としてcolor-scheme()が追加され承認されました。ブラウザに実装されるのはまだ先ですが、この関数を使用すると、要素で使用されているカラースキームを取得でき、さらには@containerクエリとif()関数の両方で使用できます。 color-scheme()関数が使えるようになると、どのように便利なるかを紹介します。 A custom --light-dark() function in CSS that works with any type of value (not just colors!) in just 3 LOC by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのコード CSSのcolor-scheme()関数 はじめに