ミニマルなデザインで使いやすい! シンプルなHTMLでさまざまなUIコンポーネントを実装できる超軽量ライブラリ -Oat UI コリス 著者: コリス🥦 2026年3月23日 09:36 セマンティックなHTMLで、Webサイトやスマホアプリでよく使用されるさまざまなUIコンポーネントや要素を実装できる超軽量UIライブラリを紹介します。 デザインはシンプルでミニマル! 依存関係は一切なく、classレスと […]
Web制作者は要チェック! スマホでもテキストサイズの拡大縮小ができるようになるなど、Chrome 146で新しく追加された5個のCSSの機能 コリス 著者: コリス🥦 2026年3月12日 09:36 3/11にアップデートされたChrome 146に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、スクロールの位置に基づいてアニメーションを制御する機能、meta name=t […]
これでSVGアイコンを探すときに困らない! 無料で商用利用できるライブラリを横断検索できる便利サイト -All SVG Icons コリス 著者: コリス🥦 2026年3月11日 09:36 SVGアイコン、特に無料で利用できるオープンソースのSVGアイコンをまとめて検索・閲覧できる便利なサイトを紹介します。 さまざまなSVGアイコンのライブラリを横断検索することもでき、好みのデザインを見つけて、SVGアイコ […]
OKLCHカラーを使うと異なる色でトーンを合わせたり、単色のシェードも簡単! UIデザイン用のカラーパレットを生成するツール -ColorPalette Pro コリス 著者: コリス🥦 2026年3月3日 09:36 見た目はDTMツールですが、中身はOKLCHカラーでUIデザイン用のカラーパレットを生成できる無料ツールを紹介します。 ベースカラーを指定するだけで、6色で構成される美しいカラーパレットを瞬時に生成します。色相環を元にし […]
ブックマークしておくと便利! さまざまなデバイスのスクリーンサイズ・解像度・ピクセル密度などの仕様が一覧できる -What Is My Screen Size? コリス 著者: コリス🥦 2026年2月19日 09:36 iPhoneやiPadのスクリーンサイズと解像度とピクセル密度っていくつだっけ? GalaxyやPixelのスクリーンサイズと解像度とピクセル密度は? もちろんそれぞれの公式サイトで探せば見つかりますが、けっこう手間です […]
シンプルだから使いやすい! レスポンシブ対応のグリッドをオーバーレイ表示できるChromeの拡張機能 -Grid Overlay Pro コリス 著者: コリス🥦 2026年2月16日 09:36 ブラウザに表示したあらゆるWebページにレスポンシブに対応したFigmaみたいなグリッドをオーバーレイー表示できるChromeの機能拡張を紹介します。 グリッドのオーバーレイはブラウザ内で完全にローカルで実行されるため、 […]
Chromeの安定版でついにタブの分割がサポートされました! Chrome 145で新しく追加された6個のCSSとUIの機能 コリス 著者: コリス🥦 2026年2月12日 09:36 2/11にアップデートされたChrome 145に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、まずタブの分割が正式サポートされたこと。そしてテキストの配置方法を制御するte […]
Gitで日常的によく使用するコマンド、その一つひとつがどのような影響を与えるのかを理解することが大事 コリス 著者: コリス🥦 2026年2月5日 09:36 Gitってなんだか難しそう、と思っている人もいるかもしれません。 Gitはすべてのコマンドを暗記する必要はありません。必要になったら調べるのは、ごく普通のことです。重要なのは、そのコマンドがどのような影響を与えるかを理解 […]
2026年版、ファビコン画像の作成方法とHTMLの記述方法、さまざまなデバイスに対応させるには3つのアイコンが必要 コリス 著者: コリス🥦 2026年1月27日 09:36 最近のデバイスやブラウザに対応させる最小限のファビコンセットには、3つのアイコンで対応できます。ブラウザはもちろん、スマホやタブレットにも対応し、さらにSVGも含めて3つだけです。 ファビコンに必要な3つのアイコン、ファ […]
CursorやVS Codeで、インデントのガイドラインをアクティブなガイドラインだけ表示させる方法 コリス 著者: コリス🥦 2026年1月26日 09:36 CursorやVS Codeのエディタで、インデントのガイドラインをアクティブなガイドラインだけハイライト表示させる方法を紹介します。 通常(左)はその箇所を含むすべてのインデントのガイドラインが表示されますが、右のよう […]
UIデザインのクオリティが格段にアップする! 感覚的ではなく、論理的にデザインを改善するポイントを解説 コリス 著者: コリス🥦 2026年1月22日 09:36 WebサイトやスマホアプリのUIを魅力的に、そして一貫性のあるデザインに改善するときに役立つUIデザインの知識とテクニックを紹介します。 直感や感覚的な曖昧なものではなく、明確で論理的なガイドラインに基づいて改善すること […]
Chromeのタブがさらに便利に進化! 分割表示の次は、なんとタブを垂直に表示できる -Vertical Tabs コリス 著者: コリス🥦 2026年1月21日 09:36 Chromeは先日のアップデートで、1つのタブ内を分割して2つのWebページを表示できるようになりましたが、さらに便利に進化して、タブを垂直で管理できるようになります! 水平だとタブを10個くらい開くと、タイトルが小さく […]
ついにChromeでも1つのタブ内を分割して2つのWebページを表示できるように、Chrome 144で新しく追加された8個のCSSの機能 コリス 著者: コリス🥦 2026年1月15日 09:36 1/13にアップデートされたChrome 144に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべきは、ページ内検索の検索結果をスタイルする::search-text疑似要素、スクロ […]
年明けは気分一新! 2026年、CursorやVS Codeで最近人気のテーマや機能拡張 コリス 著者: コリス🥦 2026年1月7日 09:36 年明けは気分一新したいですね。日常的に使用しているものを新調すると、良い1年が過ごせると言われています。 とは言っても、新調するのにはお金がかかるので、エディタのテーマを新調して、気分を一新てみるのはどうでしょうか。Cu […]
Affinityの有料版を買ってた人に朗報! v3無料化記念、v1, v2ユーザーは有料フォントが無料でダウンロードできます コリス 著者: コリス🥦 2025年12月24日 09:26 2025年11月にAffinityが無料化という大きなニュースがありましたが、同時に既存のv1, v2ユーザーに有料フォントを無料でプレゼントするという予告も実はありました。 気がつかなかった人や忘れていた人もいるかと思 […]
モーダルが開いている間、その下のページが連鎖してスクロールしてしまうのを回避するCSSの新しいテクニック コリス 著者: コリス🥦 2025年12月9日 09:10 スクロールチェーン(スクロールの連鎖)とは、ページ上にスクロールするコンテンツ(ダイアログやモーダルなど)があり、そのコンテンツをスクロールして終点に到達するとその下のページのコンテンツもスクロールしてしまう現象です。 […]
Web制作者は要チェック! Chrome 143で新しく追加された4個のCSSの機能 コリス 著者: コリス🥦 2025年12月4日 09:36 12/3にアップデートされたChrome 143に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートの注目は、CSSの「@container anchored(fallback)」という新しいク […]
ブックマークしておくと便利! デスクトップのモニターからスマホまで、あらゆるスクリーンのドット抜け・表示ムラをテストできる無料ツール -Free Screen Test Tool コリス 著者: コリス🥦 2025年12月3日 09:36 デスクトップ用のモニターをはじめ、ノートパソコンのスクリーン、タブレット、スマホ、テレビ、プロジェクターなど、さまざまなデバイスのあらゆるスクリーンのドット抜け、単色テスト、グラデーションテスト、グリッドパターン、モーシ […]
Web制作者は腕試し! JavaScriptやReactなどのコードでキーボードのタイピング練習ができるAIアプリ -TypeQuicker コリス 著者: コリス🥦 2025年11月26日 09:36 キーボードで文書や単語のタイピング練習をはじめ、JavaScriptやReactなどのコードでもタイピング練習ができるオンラインツールを紹介します。 タイピング練習できるサイトはたくさんありますが、本ツールはAIによる詳 […]
これなら超簡単! CSSのclamp()によるレスポンシブ対応のフォントサイズを数クリックで定義できるツール -Size Matters コリス 著者: コリス🥦 2025年11月12日 09:36 フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義してその間の値を流動 […]