最近では、HTMLとCSSは非常に進化し、強力になってきました。これからの時代はJavaScriptは本来のJavaScriptでしかできないことに使い、HTMLとCSSで可能なものはCSSとHTMLで実装すべきです。 HTMLとCSSだけで実装できる、あるいはごくわずかなJavaScriptで実装できるUIコンポーネントのまとめを紹介します。 NoLoJS NoLoJS -GitHub NoLoJSは、JavaScriptの負荷を軽減するために、No-JavaScript、あるいはLo-JavaScript（最小限）で実装できるUIコンポーネントをまとめたものです。 ライセンスはGNU General Public License v3.0で、商用プロジェクトでも無料で利用できます。
CSSでグラデーションを実装するときに実装コードを毎回調べている、そんな人にお勧めのチートシートを紹介します。 CSSで実装できるグラデーション、線形、放射状、円錐状、それぞれの繰り返しバージョンに加え、複数のグラデーションの重ね合わせ、円錐状グラデーションのストップのみを使用した円グラフなどの実装コードをまとめたチートシートです。 CSS Gradients Cheat Sheet 各カードには、CSSグラデーションのレンダリング結果とそれを実装するCSSのコードが記載されています。「Copiar」ボタンでCSSがコピーできます。 実際の表示は、下記で確認できます。 See the Pen CSS グラデーションのチートシート by coliss (@coliss) on CodePen. どんなCSSグラデーションがあるか見てみましょう。 まずは「linear-gradient（線形）
先週アップデートされたChrome 150に追加された、CSSとUIに関する新しい機能を紹介します。 今回はかなりの数のアップデートがされており、さまざまなCSSのプロパティや関数に便利な機能が追加されています。Web制作者は要チェックです！ New in Chrome 150 Chrome 150 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに AccentColorとAccentColorText polygon()関数に角丸パラメータを追加 ズームのアニメーションが可能に CSSのURLリクエスト修飾子 CSSのtext-fitプロパティ CSSのbackground-clip: border-area; CSSのimage()関数 画像関連の値に対応したCSSの
CSSで2つの円を線でつなぐボーダーを実装できると思いますか？ 可能になりました！ Chrome 147+のアップデートでサポートされたborder-shapeプロパティを使用すると、ボーダーにあらゆる形状（多角形・円など）を設定できます。 まずは、実際の動作をご覧ください。ドラッグの操作にはJavaScriptが使用されていますが、自由に変形するボーダーはCSSで実装されています。 ※Chrome 147+, Edge 147+でご覧ください。 See the Pen CSSのborder-shapeで直線を曲げる 1 by coliss (@coliss) on CodePen. CSSのborder-shapeプロパティは、ボーダーに任意の形状（多角形・円など）を設定できます。clip-pathと同じ形状を作成できますが、clip-pathのマスクとは異なり、border-shape
この機能を待ち望んでいた人は、多いと思います！ 6月にアップデートされたChrome 149で、CSS GridやFlexboxのギャップをCSSで装飾できるようになりました。言い換えると、コンテナ間に区切り線をスタイルできます。 これまでは罫線を描いた背景画像を使用したり、ボーダー用のdivを加えたり、疑似要素を使用したりと工夫が必要でしたが、これからはcolumn-ruleプロパティで簡単に実装できます。 Gap decorations: Now available in Chromium 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに これまでの実装方法の問題点 column-ruleの便利な使い方 column-ruleのデモページ デベロッパー向けトライアル版以降の変更
CSSの検証やデバッグにデベロッパーツールを使用している人が多いと思います。しかし、デベロッパーツールではリロードするとその変更内容が消えてしまうという大きな弱点があります。 macOS用のインスペクター、CSSに特化されたエディタを紹介します。基本的な機能はデベロッパーツールと同等で、要素をクリックするとビジュアルエディタでスタイルを確認・編集できます。また、デベロッパーツールとは異なり変更したCSSのスタイルはリロード後も保持され、ソースコードに保存することもできます。 InSpec InSpecの特徴 InSpecのダウンロード InSpecの使い方 InSpecの特徴 InSpecは、WebページのCSSを確認・編集できるスタンドアロンのCSSエディタです。任意の要素をクリックし、ビジュアルエディアを使用してリアルタイムにスタイルを調整し、結果をコピペ可能なCSSとして出力できます
レスポンシブ対応の最近の実装方法は、メディアクエリとclamp()の使い分けが明確になってきました。メディアクエリは構造的なレイアウトを変更するとき、そしてclamp()はビューポートに対して比例的に変更するとき、といった感じです。 clamp()の需要が高まる現在、面倒なのが値の計算式です。フォントサイズをはじめ、マージン・パディング・ギャップなどにも対応したclamp()の計算式を瞬時に設定できる便利ツールを紹介します。 同様のツールは他にもありますが、そのほとんどはフォントサイズのみです。本ツールは多数のプロパティをサポートしているだけでなく、デバッグとしてビューポート1pxあたりどれだけ変化するのかなども分かります。 CSS Clamp Generator CSS Clamp Generatorの特徴 CSS Clamp Generatorの使い方 CSSのclamp()とは何か、
ぱっと見、なんじゃこりゃ！ と思ったのですが、よく見ると絵文字をclass名としてしっかりとしたBEMメソッドで実装された、本番環境レベルで使えるCSSのフレームワークを紹介します。 完全なデザイントークンシステム、プリビルドコンポーネント、レスポンシブユーティリティ、さらにビルドツールチェーンも付属しています。 BEMoji BEMoji -GitHub BEMojiは、絵文字をclass名として使用するBEM（Block–Element–Modifier）メソッドで実装された、本番環境レベルのCSSフレームワークです。デザイントークンシステム、プリビルドコンポーネント、レスポンシブユーティリティ、ビルドツールチェーンも付属しています。 BEMoji BEMojiの主な特徴は、下記の通り。 難読化機能 絵文字で記述されたclass名は競合他社にとって意味をなさないでしょう。複雑なビルド作
プレーンなHTMLを使用して、モダンでレスポンシブ対応のWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。 ポートフォリオやブログ、プロトタイプなどをさくっと作成したい時に便利で、リセットCSSに利用してもよさそうです。 dev.css dev.css -tangled dev.cssの特徴 dev.cssのデモ dev.cssの使い方 dev.cssの特徴 dev.cssはnew.cssにインスパイアされた、シンプルでclassレスの超軽量CSSフレームワークです。あらゆるプレーンなHTMLファイルをモダンでレスポンシブ対応のデザインにするために設計されました。 CSSファイルのミニファイされた容量は4.8Kbで、オプションのサイドバーやヘッダ固定やページトップに戻るなども用意されています。 dev.css 超軽量4.8KbのCSSフレームワーク。 用
先週アップデートされたChrome 149に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべき点は、たくさんあります！ まずはshape()がshape-outsideプロパティで動作するようになり、UIをシェイプできるようになりました。さらにCSS GridやFlexboxのギャップをスタイルできるようになり、コンテナ間に罫線などを簡単に実装できます。また、拡大縮小された画像をくっきり表示させたり、テーブルのデフォルトだったboder-color: gray;が削除されたなど、Web制作者は要チェックです！ New in Chrome 149 Chrome 149 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに UAスタイルシート
優れたインターフェイスは、小さな要素が積み重なって、素晴らしいユーザーエクスペリエンスが生み出されます。数行のCSSで、インターフェイスの使い心地を向上させるテクニックを紹介します。 生成AIのスキルとしてコーディングアシスタント（Claude Code、Codexなど）に使うこともできます。 Details that make interfaces feel better Details that make interfaces feel better -GitHub はじめに 1. テキストの折り返し（text-wrap: balance / pretty） 2. ネストされた角丸 3. コンテキストに応じたアイコンアニメーション 4. macOSでフォントをくっきり細く表示させる方法 5. 動的に表示される数字 6. 中断可能なアニメーション 7. 複数のアニメーションを同時に適用し
CSSでレスポンシブ対応のフォントサイズを実装する最近のテクニックとしてpow()関数を使用すると、ビューポートやコンテナサイズに応じて動的にフォントサイズが調整される流動的なタイポグラフィを実装できます。 メディアクエリやブレイクポイントの設定は不要で、あらゆるWebサイト、スマホアプリで利用できます。 Fluid Modular Type Scale -GitHub ではさっそく、そのCSSを紹介します。 CSSのpow()関数を使用すると、最小ビューポート幅と最大ビューポート幅の間でフォントサイズをスムーズに拡大縮小ができます。 /* Fluid Modular Type Scale */ :where(.fluid) { --fluid-min: calc( var(--font-size-min) * pow(var(--font-ratio-min), var(--font-l
HTMLによるマークアップはそのままで、classを加えるだけで、あらゆる要素に奥行き、モーション、インタラクションを与えて、WebサイトやスマホアプリのUIに新たな息吹をもたらすCSSのフレームワークを紹介します。 各要素はより明確に構造化され、カードやタブには深度コンテキストが加わり、ボタンにはクリックを促すアクションが加えられ、フォームには息吹が与えられます。 AliveUI AliveUI -GitHub AliveUIの特徴 AliveUIのデモ AliveUIの使い方 AliveUIの特徴 AliveUIは、モーションを最優先にしたCSSのフレームワークです。WebサイトやスマホアプリのUIインターフェイスは視覚的に構造化されていますが、時間的な動きには乏しいのが現状です。 AliveUIはclassを一つ加えるだけで、あらゆる要素にモーション、奥行き、インタラクションを与えて
コードを理解するデザインツール向けに、CSSの各プロパティや値をデザインしてアイコン化したCascade Iconsを紹介します。 display: flex;, display: grid;はもちろん、position: sticky;, padding, margin, text-align, opacity, box-shadow, border-radiusなど、なじみ深いプロパティや値が15x15ピクセルにデザインされています。 Cascade Icons Cascade Icons -GitHub Cascade IconsはCSSの各プロパティをあらわした、丹精込めてデザインされたアイコン素材です。コードを理解するデザインツール向けに制作されています。 MITライセンスで、商用プロジェクトでも無料で利用できます。
5/6にアップデートされたChrome 148に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、コンテナクエリをcontainer-typeを設定しなくてもコンテナ名のみで機能するようになったこと、video要素やaudio要素も遅延読み込みに対応したこと、ユーザー操作によるテキストのオーバーフローの切り取りなど、Web制作者は要チェックです！ また、新しくPrompt APIが搭載され、ChromeにGemini Nanoが組み込まれました。右上のボタンが邪魔という場合は、右クリックで非表示にできます。 New in Chrome 148 Chrome 148 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに 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で括ります。
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キットです。 ライセンスは独自で、商用プロジェクトでも無料で利用できます。複製、変更
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
