最小限のHTMLとモダンCSSで実装！ コンテンツをボーダーで囲って、ボーダーの上部にタイトルを配置するテクニック
テキストや画像をボーダーで囲って、ボーダーの上部にタイトルを配置したいと思ったことはありませんか？ 以前はこれをCSSで実装しようとしてもかなりトリッキーな実装でした。またfieldsetとlegendでも実装できますが、そもそもフォームではない上に、CSSによる装飾も貧弱です。 fieldsetのコンポーネントを最小限のHTMLとモダンCSSで実現したテクニックを紹介します。レスポンシブに完全対応で、方向directionにも対応しています。 まずは、デモページでその動作をご確認ください。 上から、通常、中央配置、rtlの右書きの3つです。 See the Pen CSSを使用して<fieldset>（およびlegend）を実装 by coliss (@coliss) on CodePen. HTMLは非常にシンプルです。 見出しのh3とテキストのpをdivで括ります。
CSSで実装されたLiquid Glassの美しいUI要素やコンポーネントをコピペで使えるUIキット -Liquid Glass UI Kit
iOSにLiquid Glassが採用されてから早半年が過ぎました。 慣れない当初は使いにくさを感じていましたが、Liquid Glassを採用しているアプリが増え、最近では逆にLiquid Glassを採用していないアプリのUIを見るとちょっと古くさい感じがしたりします。 WebサイトやスマホアプリのUIで使われるカード、ボタン、ナビゲーション、タブ、アコーディオン、モーダル、フォーム、テーブルなどのUI要素やコンポーネントをLiquid Glassの美しいデザインにしたUI Kitを紹介します。 Liquid Glass UI Kit Liquid Glass UI Kitは、CSS Guidelines(管理しやすく、拡張性のあるCSSを書くためのガイドライン)に準拠し、BEMメソッドで実装されたUIキットです。 ライセンスは独自で、商用プロジェクトでも無料で利用できます。複製、変更
AIO: 無料とは思えないほど充実した機能！ あなたのWebサイトがAI検索や生成AIに対応しているかをチェックできる -Is Your Site Agent-Ready?
去年くらいからAIOというワードを目にするようになったと思います。AIOとはAI最適化（AI Optimization）のことで、簡単に説明すると、AI検索や生成AIに信頼されるコンテンツを設計することを意味します。 信頼されるコンテンツとして設計されているか、回答エンジン最適化（AEO）、生成エンジン最適化（GEO）、大規模言語モデル最適化（LLMO）など、WebサイトがAIエージェントに対応しているかどうかを多角的にチェックできる無料のオンラインツールを紹介します。 各項目についての解説や、NGになった項目の改善策なども提示され、無料とは思えないほど充実した機能を備えています。 Is Your Site Agent-Ready? Is Your Site Agent-Ready?は、WebサイトのURLを入力すると、そのWebサイトをスキャンして、AIエージェントへの対応状況を確認でき
UIに幾何学的な美しさ！ 積み木のようにボクセルを構築し、SVGで描画するミニマルなJavaScriptエンジン -heerich.js
ボクセル（volumeとpixelを組み合わせた用語）を積み木のように組み合わせて3Dの空間配置を2Dの平面に構築し、SVGに変換して描画する超軽量のJavaScriptエンジンを紹介します。 ボクセルの組み合わせの自由度はかなり高く、さまざまな形状を作り出せます。さらにスケーリングは無限、個々の面にスタイルを設定したり、アニメーションで動かすこともサポートしています。 heerich.js heerich.js -GitHub heerich.jsは、3Dのボクセル（体積volumeとピクセルpixelを組み合わせた用語）を構築し、それをSVGに変換するミニマルなJavaScriptエンジンです。ボクセルでさまざまな形状を描画することができ、建築的な優雅さを実現できます。他のライブラリやJavaScriptの依存関係はありません。 heerichの名は、幾何学的な段ボール彫刻で知られるド
これからのデザインの新しい定番書！ デザインのしっかりした知識とテクニックをかなり深く学べる -デザインの最強原則
これからのデザインの新しい定番書！ デザインのしっかりした知識とテクニックをかなり深く学べる -デザインの最強原則 ※本ページは、アフィリエイト広告を利用しています。 気に入ったデザインを参考にしたけど、うまくいかなかった。なぜこのデザインなのか聞かれても、説明できなかった。そんな経験をしたことはありませんか？ WebやUIデザイン、グラフィックデザイン、紙のデザインで特に重要なのが、レイアウト・タイポグラフィ・配色といったデザインの基礎理論です。デザインするときに役立つ知識とテクニックを最強原則として体系化したデザイン書を紹介します。 整列・近接・反復・対比、さらにはジャンプ率、余白とバランスの整え方といったレイアウトの手法をはじめ、和文書体・欧文書体、和欧混植、数字記号文字など文字要素の扱い方、色の組み合わせ方、色相・明度・彩度による調整、トーン、グラデーションなどの配色テクニックまで
Web制作者はチェックしておこう！ View Transitions（ビュー遷移）でよく使うコードのまとめ-View Transitions Toolkit
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を使用したさまざまなコンテンツが増えてきました。機能もさ
これは便利！ ボーダーをあらゆる形状にできるborder-shapeプロパティをサポート、Chrome 147で新しく追加された4個のCSSの機能
4/7にアップデートされたChrome 147に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、要素のボーダーをあらゆる形状にできるborder-shapeプロパティ、ライトモードとダークモードの両方で読みやすいテキストカラーを設定できるcontrast-color()関数など、Web制作者は要チェックです！ 下記はborder-shapeで実装されており、各要素はそれぞれ独立した形になっています。昔は横V字型の画像を使用していたのが懐かしい、、、 New in Chrome 147 Chrome 147 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに タイムラインの名前付き範囲スクロール CSSのcontrast-color
2026年4月、Adobeユーザーに朗報！ Adobe Fontsに日本語フォントが大量追加、CCユーザーは無料で使えます
【新規対象キャンペーン】Adobe Creative Cloud コンプリート|12か月版|オンラインコード版 いつものように「新規購入者限定版」で、本セールで購入するのが初めての人が対象（要は一回のみ）。すでにアカウントを持っている人でも、過去のセールで購入したことがある人でも大丈夫です。 去年のパターンだと、4月上旬の次は7月下旬でした。ただその次は値上げになったので、今年はどうなるかですね。 新規購入者限定版や既存アカウントの延長について詳しくは、前回のセール時の記事をご覧ください。 では、Adobe Fontsに大量追加された日本語フォントを紹介します。 Adobe Fonts Adobe Fontsは、Adobe CCのユーザーなら追加料金なしで利用できます。もちろん商用利用もOK、詳しくはライセンスページをご覧ください。 また、Adobe Fontsのフォントは、Adobe系以
長年の悩みがこれで解決！ CSSのposition: stickyの仕様が変わり、上部固定と左端固定が同時に実装できるようなります
テーブルのヘッダを上部に固定し、さらに列の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でどのように記述するのかが分かる -modern.css
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を読みやすくし、デバッグ・編集できる無料ツール -bg.layers
CSSで装飾したテキストやボタンのデバッグは、各プロパティやその値もそれほど複雑なCSSではないので簡単です。 下記のようにレイヤーが重なったグラデーションのデバッグはどうでしょうか。CSSもかなり複雑で、コードを見ただけでデバッグするのはかなり難しいと思います。そんな複雑なCSSでも簡単にデバッグ・編集できる無料ツールを紹介します。 bg.layers bg.layers -GitHub bg.layersは、CSSで実装された背景レイヤーをデバッグ・編集するためのオンラインツールです。backgroundをはじめ、background-image, background-color, background-positionなど、background-*プロパティの挙動を確認し、各レイヤーを確認したり、レイヤーの順番を変更・非表示にしたり、編集したCSSをコピーすることもできます。
入門書だけど、かなり実践的で詳しい！ 進化したFigmaの使い方がよく分かる解説書 -Figmaのきほん 改訂版
※本ページは、アフィリエイト広告を利用しています。 UIデザインにおいて、もはやFigmaは必要不可欠なツールになっています。 Figmaをこれから初めて使用する人、なんとなく使ってるけどきちんと使い方を学びたい人向けに、WebサイトやスマホアプリのUIをデザインする際にFigmaを効率的に使用する方法がよく分かる解説書を紹介します。 また最近では、Figmaも進化が早く、AI系の機能もかなり充実しており、新機能をまだ試していないという人にもお勧めです！ なんとなく既視感を覚えた人は大正解！ 本書は2023年に出版された『はじめてでも迷わない Figmaのきほん』（紹介記事）の待望の改訂版。改訂にあたってはFigma SitesやFigma Makeをはじめ、8割近く新しく執筆されており、改訂版の枠を超える勢いです。
CSSのlight-dark()関数が画像もサポート！ これでライトテーマとダークテーマの対応がさらに簡単になります
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()関数を使っ
UIに使用する色のコントラストをAIで検証、基準を満たしていないときはデザインに合った代替色を提案してくれる無料ツール
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でさまざまなUIコンポーネントを実装できる超軽量ライブラリ -Oat UI
セマンティックな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が発売日！ バナーは小さなスペースに、すばやく伝わる情報設計、分かりやすいレイアウト、要素のリズム、視線誘導、注目されやすいフォント、イメージを伝える配色、効果的な装飾など、デザインのさまざまな知識やテクニックが詰まっています。本書ではそれらが良質で豊富な事例とともに詳しく解説されています。 表紙に既視感を覚えた方は、大正解！ 本書は大ベストセラー『思わずクリックしたくなる バナーデザインのきほん』（紹介記事）の続編。当ブログのビジターも多くの人が持っていると思います。 前書ではバナーに使われているデザインを基本から詳しく解説されていましたが、本書ではさまざまな業種別
これは覚えておきたい！ シンプルなCSSで、画像をホバーすると拡大し、マスクまでしてくれる
画像をホバーすると拡大する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で使える！ テキストを棒グラフや折れ線グラフ、円グラフに変換して表示できるフォント -Datatype
テキストを棒グラフや折れ線グラフ、円グラフに変換して表示するフォントが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を使ってみたいけど、どこから始めればよいのか。そんな人にお勧めの挫折せずにReactを学ぶことができる解説書を紹介します。 書名にもあるように『挫折しない』ことに主眼を置いたもので、学ぶためのモチベーションに配慮し、「Reactで作る楽しさ」を感じながらプログラミング全般に通じる基礎知識もしっかり学ぶことができます。 著者の清水氏はUdemyでくるしば名義でReact講座（すべてベストセラー）を提供しており、大畑氏はWorldSkills技能五輪国際大会）に日本代表として出場しフリーランスのフルスタックエンジニアとして活躍しています。 本書はそんなお二人による初の書籍化で、Reactを学習するときの最初の一冊として初心者でも分かりやすいように詳しくていねいに解説されています。また、Reactの入門書としては珍しくフルカラーで、4
Web制作者は要チェック！ スマホでもテキストサイズの拡大縮小ができるようになるなど、Chrome 146で新しく追加された5個のCSSの機能
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-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
