たぬ(B) @tanubenben B | JGC/SFC | Marriott Lifetime Pt | DVC/MVC | R1300GSA | Brompton | Baystars
裁判所が満を持して投入する民事裁判書面オンラインシステムのUIがこれだっ！→「CSS完全に理解してて草」「スマホ表示は対象外だから…」「どこに頼んだらこうなるんだ」
たぬ(B) @tanubenben B | JGC/SFC | Marriott Lifetime Pt | DVC/MVC | R1300GSA | Brompton | Baystars
npm 'accidentally' removes Stylus package, breaks builds and pipelines
HomeNewsSecuritynpm 'accidentally' removes Stylus package, breaks builds and pipelines npm has taken down all versions of the real Stylus library and replaced them with a "security holding" page, breaking pipelines and builds worldwide that rely on the package. A security placeholder webpage is typically displayed when malicious packages and libraries are removed by the admins of npmjs.com, the wo
Claude Code でモックアップを HTML と Tailwind CSS (CDN 版) で作る
Claude Code で HTML と Tailwind CSS (CDN 版) でモックアップを作るのが便利という話をお手伝い先の CTO から教えて貰って、試したところとても良かったので雑に書いて行く。 そもそも HTML はなんとなくわかってるが、 CSS はまったく書けないのでモックアップは今までは Figma を使って作っていた。なぜ Figma なのかというと、単に Figma 有名だし、おそらく多くの人が使ってるっぽいから情報が多いのだろうというだけ。 Figma の解説書を読んだり、Figma 公式 YouTube を見たりして色々学んで、本当に最低限は作れるようになった。実際自社サービスを作る時に開発担当者には Figma でこんなデザインがよいですみたいなものを作り、共有して作業をお願いしていた。 Claude Code でのモックアップ作成Claude Code を
ページにもともと読み込まれているCSS由来のスタイルを打ち消して、しがらみのない開発をするのにall:unset, all:revertを使えそう - hitode909の日記
長年開発を続けているページでは、Bootstrapなど、ページ自体のスタイルを丸ごと上書きしてしまうCSSライブラリが読み込まれていることがある。 一方、最近はReactコンポーネントを作って、スタイルはCSS Modulesで当てたい、という機会が増えている。 CSS Modulesを使うと、コンポーネントに適用スタイルを明示的に指定することができるが、そこにページ丸ごと上書きCSSライブラリが混ざってくると、思うようにスタイルが当たらない、ということになる。 たとえば、Bootstrapを読み込んだページのpタグには、margin bottom: 10pxのようなスタイルが問答無用で指定されてしまう。 こういうしがらみから逃れる手法は無いのかな、と思って、Bootstrapを読み込み済みの歴史のあるページでは、Shadow DOMなどを使ったらBootstrapの依存を消せますか？など
日本語Webサイトを意識したモダンリセットCSS「kiso.css」をリリースしました – TAKLOG
kiso.css - 日本のWebサイトのための「基礎」となるリセットCSS kiso.css は、日本のWebサイトのための「基礎」となるリセットCSSです。日本語に最適化しつつ、アクセシビリティやカスタマイズのし易さを重視しています。 tak-dcxi.github.io kiso.cssは、単なるスタイルのリセットを超えて「より良いデフォルト」を提供することを目指したリセットCSSです。その名が示すように、Webサイト構築の「基礎」として機能します。 有用なUAスタイルシートは活かしつつ、独自のスタイルも追加しているため、厳密には「リセットCSS」の定義から外れるかもしれません。しかし、類似のCSSが一般的に「リセットCSS」として紹介されている現状を踏まえ、検索性を考慮して本記事でもそのように呼称します。 kiso.cssはdestyle.cssやUA+を参考にしつつ、独自性も加え
CSSのカスケードレイヤーが便利！ 複数のCSSファイルを効率よく管理できるデフォルトのCSS構造 -CSS boilerplate
小規模のプロジェクトをはじめ、大規模のプロジェクトもサポートしたCSSのベースとなるテンプレートを紹介します。 大きな特徴は、@layerでCSSの構造を明確にし、リセットCSSやサードパーティのCSS、オリジナルのCSSなどのカスケードをより効率よく管理できることです。詳細度や!importantに頭を悩ますこともなくなります。 /* 事前にレイヤーの順序を決定する */ @layer core, third-party, components, utility; @layer core.reset, core.tokens, core.base; @layer third-party.imports, third-party.overrides; @layer components.base, components.variations; /* リセットCSSやノーマライズ */ @i
Visual Studio Code、Web標準の「Baseline」チェックに対応。コード内のHTMLやCSSにカーソルを合わせれば説明表示
Visual Studio Code、Web標準の「Baseline」チェックに対応。コード内のHTMLやCSSにカーソルを合わせれば説明表示 Visual Studio Code 1.100もしくはそれ以後のバージョンでは、標準でコード内のHTMLやCSSがWeb標準のBaselineに対応しているかどうかをチェックする機能が搭載されていることが、web.devブログで紹介されています。 これにより、HTMLやCSSが主要なWebブラウザで問題なく表示されるかどうかが、Visual Studio Codeで簡単にチェックできるようになりました。 Baselineは安心して使えるWeb標準 Baselineとは最新のWeb標準のサブセットです。Baselineに含まれているHTMLやCSSの機能であれば主要なWebブラウザで実装済みであるため、Webアプリケーション開発者が安心して使える機
HTMLとCSSだけでMinecraftを再現
「100％純粋なHTMLとCSS」で作成された「マインクラフト」のページが公開されています。 CSS Minecraft https://benjaminaster.com/css-minecraft/ 上記のページにアクセスすると以下の画面が現れます。 用意されているブロックは全部で7種類。左下から選んでフィールドをクリックすると設置できます。 右下のボタンをクリックするとフィールドの位置を変えられます。「Vertical」で垂直方向への視点移動、「Horizontal」で水平方向への視点移動、「Rotation」でフィールドの回転、「View」で視点の上下移動ができます。 左下のツルハシをクリックしてからブロックをクリックすると、ブロックを削除できます。 ブロックを設置できるのは9×9×9マスの間のみ。 最初からあるブロックを横に伸ばすことはできませんが、削ったり、新しいブロックに置き
このアイデアはすごい！ テーブルでセルの行を強調表示、さらにそれ以外の部分はぼかして目立たせるCSSのテクニック
テーブルでセルをハイライトして目立たせるというのはよくあるテクニックですが、さらにそれ以外のセルはぼかしてより目立たせるCSSのテクニックを紹介します。 実装のポイントは、:focus-within疑似クラスと:not()否定疑似クラスです。 まずは、実際のデモをご覧ください。 上部でダーク・ライトモードにしたり、アクセントカラーを変更できます。 See the Pen Focus table rows with :not(:focus-within) by coliss (@coliss) on CodePen. HTMLは、普通のテーブルです。 <table role="grid"> <thead> <tr> <th></th> <th>Name</th> <th>Email</th> <th>Subscription</th> </tr> </thead> <tbody> <tr>
最近のUIデザインにぴったり！ HEXコードより色彩が豊かなOKLCH値のカラーパレットをまとめたCSS -uchū
最近はHEXコードから脱却して、色彩が豊かなOKLCH値のカラーを使用しているWebサイトやスマホアプリが増えてきました。さまざまなプロジェクトで使用できるOKLCHのカラーパレットをまとめたCSSを紹介します。 「uchū」は日本語の「宇宙」で、作者が日本のスタイルや美学などが大好きで、すべてのプロジェクトに使用するという意味を込めてこの名前にしたとのことです。 uchū uchū -GitHub uchūはWebサイトやスマホアプリのUIデザインで、OKLCHカラースペースを利用するために作成されたカラーパレットです。 ライセンスはUNLICENSEで、カラーにライセンスなんていらないでしょ笑、とのことです。
CSS Variablesはここまで進化した | gihyo.jp
本連載は分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 Misskeyでは2025年も大きな機能改修・リファクタリングに取り組んでいます。 その中にCSS Variablesに関する作業もあったので、今回はその紹介も兼ねてMisskeyで使っている便利なテクニックなどを取り上げます。 CSS Variablesとは CSS Variables（CSS変数）は、カスタムプロパティとも呼ばれ、CSSで変数を使用できる機能です。 CSS変数を使うと、ウェブサイト内で共通して使われるテーマカラーなどの値を使いまわしたり、動的にプロパティの値を変更することが可能です。さらに、CSSで用意されている色関数と組み合わせると、同じく動的に相対的な色の定義が行え、表現の幅を大きく広げることが可能です。 MisskeyのWebクライアントに
【Playwright】toHaveCSS を使って CSS を自動テスト - Qiita
はじめに この記事では、Playwright の toHaveCSS というメソッドを使って CSS の自動テストを実装する方法やユースケースを記載します。 開発環境 開発環境は以下の通りです。 Windows 11 VSCode React 18.3.1 Mantine 7.16.2 TypeScript 5.5.2 Playwright 1.50.1 事前準備 事前準備として、Playwright の利用設定を行います。 手順は公式ドキュメントや以下の記事に記載があります。 1. color 以下のコードでは、ボタンをクリックすると、背景色が変化します。 import { FC, useState } from "react"; export const BackgroundColorChangingButton: FC = () => { const [bgColor, setBgC
VS CodeでHTML、React、CSSのコードのアクセシビリティチェックをしてくれる拡張・「A11y Lint」 - かちびと.net
A11y Lint A11y LintはVS CodeでHTML、React、CSSのコードのアクセシビリティチェックをしてくれるVS Code拡張です。いわゆるアクセシビリティのlinterになります。 インストールすると、アクセシビリティに問題のあるコードに波下線を引き、マウスホバーで何が問題なのかを表示してくれる、というもの。 コードを書けばすぐにチェックされるようになっているのでその場ですぐ直せます。Axeと比べてメリット沢山だよ！との事でした。アクセシビリティチェックのタスクで苦労している開発者の方は試されてみては如何でしょうか。 A11y Lint The post VS CodeでHTML、React、CSSのコードのアクセシビリティチェックをしてくれる拡張・「A11y Lint」 first appeared on かちびと.net.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5/CSS3のニュースやTIPSなどのまとめ (2025年7月22日)
UIコンポーネントをAIで簡単に実装できる、Tailwind CSSのコードをプロンプトから生成できるツール -TailwindGenAI
【CSS】まだ width: 100% つかってるやついる⁉︎ いねぇよな⁉︎ - Qiita
Using CSS breakpoints for fluid, future-proof layouts - LogRocket Blog
When to use Flexbox and when to use CSS Grid - LogRocket Blog
これはかなり便利！ 無料で利用できるTailwind CSSのUIライブラリをコンポーネント別に探せる -Curated UI List
React CSSファイルをあてる - Qiita
