CSSに問題がないか、保守性・複雑性・パフォーマンスの面から解析し、改善点を教えてくれるツール -CSS Code Quality Analyzer コリス 著者:コリス🥦 2025年9月18日 09:36 Webサイトに使用されているCSSをはじめ、自分で書いたCSSに問題がないか解析し、改善点を教えてくれる無料ツールを紹介します。 CSSは、保守性、複雑性、パフォーマンスの面から解析され、問題がある箇所はどのように改善す […]
UIデザインに使用するカラーのコントラストをチェックできる、使いやすくて、アクセシビリティを重視したツール -Contrastly コリス 著者:コリス🥦 2025年9月17日 08:06 UIデザインでカラーを決めるときに、カラーのコントラストを確認することは必須です。コントラストをチェックできるツールはたくさんありますが、Tailwinds CSSのカラー、16進数コンバーター、コントラストの確認がひと […]
より洗練されたCSSアニメーションが可能に! 複数のビュー遷移を同時に実行できるスコープ付きビュー遷移の基本的な使い方 コリス 著者:コリス🥦 2025年9月16日 09:36 複数のビュー遷移を実行できるようにするスコープ付きビュー遷移の基本的な使い方を紹介します。 スコープ付きビュー遷移を使用すると、複数のビュー遷移を同時に実行できるようになり、レイヤー化の問題なども回避できます。 Scop […]
CSSのcalc()がさらに便利になるなど、17周年を迎えたChrome 140ではCSSの新機能がかなり追加されています コリス 著者:コリス🥦 2025年9月8日 09:36 9/2にChromeは17周年を迎えました、時が経つのは早いですね。先日アップデートされたChrome 140に追加された、CSSの新しい機能を紹介します。 今回のアップデートではCSSの新機能がかなりの数で追加されてお […]
HTMLを愛する人のためのUIライブラリ、シンプルなHTMLでさまざまなレイアウトやUIコンポーネントを実装 -Kelp コリス 著者:コリス🥦 2025年9月4日 09:36 シンプルなHTMLとモダンCSSを使用して、レイアウトやUIコンポーネントを実装するHTMLを愛する人のためのUIライブラリを紹介します。 手軽に実装できるように、classレスのHTMLにユーティリティとコンポーネント […]
モダンCSSで実装された、UIデザイン用の美しいグラデーションとジオメトリックの背景パターン -Pattern Craft コリス 著者:コリス🥦 2025年9月3日 09:36 Webサイトやスマホアプリに最適、モダンCSSとTailwind CSSで作成されたプロ仕様の背景パターンとグラデーションを紹介します。 100種類以上の背景パターンとグラデーションはシームレスに設計されているので、あら […]
これは疑似要素の便利な使い方! レイアウトは変えずにクリックできるエリアを広げるCSSのテクニック コリス 著者:コリス🥦 2025年8月28日 09:36 ボタンやアイコンなどでクリック・タップ可能なエリアを広げたいと思ったことがあると思います。a要素をブロックにしてpaddingを加えたり、JavaScriptを使用したりといった方法がありますが、今回はレイアウトはそのま […]
UI要素のサイズ、マージン、角丸、フォントサイズに至るまで、すべてが黄金比に基づいて設計されたUIフレームワーク -LiftKit コリス 著者:コリス🥦 2025年8月21日 09:36 黄金比をWebサイトやスマホアプリのUIデザインに取り入れようと思ったことがある人は少なくないと思います。古い記事ですが、黄金比をサイトのデザインに取り入れる簡単な3つの方法というのもあります。 さまざまなUI要素のサイ […]
CSSの進化が止まらない! 自分でオリジナルの関数を定義できるようになります、Chrome 139で新しく追加された6個のCSSの機能 コリス 著者:コリス🥦 2025年8月7日 09:36 昨日アップデートされたChrome 139に追加された、CSSの新しい機能を紹介します。 今回のアップデートの目玉は、CSSでオリジナルの関数を定義できるカスタム関数、角を自由にスタイルできるcorner-shapeプロ […]
CSSの単位がたくさんあり何を使えばよいか迷った時に、フォント、スペース、ポジション、要素の幅・高さに最適な単位は コリス 著者:コリス🥦 2025年7月31日 09:36 CSSには便利な単位がたくさんあります。よく使用する単位として絶対単位(pxなど)や相対単位(em, rem, %など)をはじめ、Gridの単位(fr)やビューポート単位(vw, vhなど)があります。いくつかの単位は使 […]
コピペで簡単に利用できる! Tailwind CSSで実装された、アクセシブルでモダンなUIコンポーネント -Basecoat コリス 著者:コリス🥦 2025年7月30日 09:36 Tailwind CSSは便利ですが、ユーティリティクラスだけでUIを実装するのはすこし面倒です。Tailwind CSSを使ったライブラリもありますが、それらの多くは判読不能なクラスの塊をHTMLにコピペしなければなり […]
Tailwind CSSの最新チートシート、v4.1対応、すべてのクラスとプロパティ・値を参照および検索もできる優れもの コリス 著者:コリス🥦 2025年7月29日 09:36 最近はこれまで以上にユーティリティクラスを使用したTailwind CSSの需要が高まっている気がします。さまざまなフレームワークやライブラリ、AIツールにも使用されており、ますます人気が高まっています。 2025年現在...記事の続きを読む
CSSで実装したグリッチの揺れるエフェクトがかっこいい! 映画で見かけるようなサイバーなUI -CyberPopover 2025 コリス 著者:コリス🥦 2025年7月28日 09:36 まさにクール! 映画で見かけるようなサイバーなインターフェイスを実装したサイバーポップオーバー2025を紹介します。 下記はデモをgifアニメーション化したもので、実際にはボタンやパネルにグリッチの揺れるエフェクトがあり...記事の続きを読む
CSSでついにif elseの条件文が使える! if()関数の便利な使い方を解説 コリス 著者:コリス🥦 2025年7月17日 09:36 5月にリリースされたChromeとEdgeで、CSSのif()関数がサポートされました。これによりCSSでもif elseの条件文が使えるようなり、プロパティに対して条件付きで値を設定できるようになりました。 新機能なの...記事の続きを読む
UIコンポーネントをAIで簡単に実装できる、Tailwind CSSのコードをプロンプトから生成できるツール -TailwindGenAI コリス 著者:コリス🥦 2025年7月9日 09:36 Tailwind CSSを使用してUIコンポーネントを実装するのは、慣れていないと時間がかかります。Tailwind CSSのユーティリティファーストのフレームワークを使用してUIコンポーネントを生成するために設計された...記事の続きを読む
これは朗報! width: 100%;より便利なstretchキーワードが使えるようになります、Chrome 138で新しく追加された6個のCSSの機能 コリス 著者:コリス🥦 2025年7月1日 09:36 先日リリースされたChrome 138で追加された、CSSの新しい機能6個を紹介します。今回のアップデートで目玉は、stretchキーワードをはじめ、新しい関数がいくつかサポートされました。Web制作者は要チェックです!...記事の続きを読む
CSS GridやFlexboxでアイテム間のスペース(ギャップ)をスタイル設定するCSSの新しいテクニック コリス 著者:コリス🥦 2025年6月19日 09:36 CSS GridやFlexboxは非常に便利ですが、アイテム間のスペース(ギャップ)をスタイルするときにはボーダーや疑似要素や背景画像を使ったハックでしか実装できませんでした。 アイテム間にボーダーを設置したり、交差する...記事の続きを読む
簡単な手順でWebページの読み込み時間を高速化! クリティカルCSSを抽出してくれるツール -Critical CSS Generator コリス 著者:コリス🥦 2025年6月17日 09:36 クリティカルCSSとは、Webページで最初に表示される部分(ファーストビュー)をレンダリングするために必要な最小限のCSSです。このクリティカルCSSを既存のWebページから抽出し、HTMLにインラインのCSSとして記述...記事の続きを読む
CSSで簡単カスタマイズ、洗練されたデザインと気持ちいいアニメーションで動作するUIコンポーネント -SmoothUI コリス 著者:コリス🥦 2025年6月16日 09:36 WebサイトやスマホアプリのUIでよく使用されるアコーディオンやモーダルといった基本的なコンポーネントをはじめ、AppleにインスパイアされたカードやフォトギャラリーやDynamic Islandなどの気持ちよく動作する...記事の続きを読む
CSSのreading-flowプロパティが便利! CSS GridやFlexboxで見た目とDOMツリー内の順序を一致させることができます コリス 著者:コリス🥦 2025年6月12日 09:36 CSS GridやFlexboxは便利でよく使用していると思います、ただし、見た目の順序とDOMツリー内の順序が一致しないことがあります。これはキーボードやアクセシビリティツールで操作するユーザーにとって非常に問題です。...記事の続きを読む