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+を参考にしつつ、独自性も加え
Claude Code で HTML と Tailwind CSS (CDN 版) でモックアップを作るのが便利という話をお手伝い先の CTO から教えて貰って、試したところとても良かったので雑に書いて行く。 そもそも HTML はなんとなくわかってるが、 CSS はまったく書けないのでモックアップは今までは Figma を使って作っていた。なぜ Figma なのかというと、単に Figma 有名だし、おそらく多くの人が使ってるっぽいから情報が多いのだろうというだけ。 Figma の解説書を読んだり、Figma 公式 YouTube を見たりして色々学んで、本当に最低限は作れるようになった。実際自社サービスを作る時に開発担当者には Figma でこんなデザインがよいですみたいなものを作り、共有して作業をお願いしていた。 Claude Code でのモックアップ作成Claude Code を
kiso.cssの最大の特徴は、日本語環境での使用を前提とした設計にあります。 多くのリセットCSSは欧文を前提としており、日本語のWebサイトで使用する際には追加の調整が必要になることが少なくありません。 kiso.cssでは、副作用が少ない範囲で日本語に特化したスタイル調整を加えています。もちろん、英語圏の方にも配慮しています。 kiso.cssでは、疑似要素や!importantが明示的に指定されたスタイルを除き、すべてのセレクタを:where()擬似クラスで囲むことで詳細度を0にしています。 kiso.cssはスタイルを容易に上書きできるため、カスタマイズ性の高いリセットCSSとなっています。 リセットCSSでありがちなキーボード操作時のフォーカスリングの消失を防止します。また、強制カラーモードをサポートしたアクセシブルな実装を行っています。 SafariとVoiceOverの組み
UIのインタラクションの実装で、height: 0 → autoなど、数値とキーワード値とをアニメーションさせたいと思ったことはないでしょうか。 一見可能そうに見えるものの、従来はCSSのみではアニメーションが不可能でした。代替手段として数値同士を変更してトランジションを実装したり、JavaScriptでの実装を行うほかありませんでした。 height: autoの代わりに、offsetHeightを取得してアコーディオンの開閉アニメーションを実装する例 Chrome 129、Edge 129（2024年9月）で登場した、CSSのinterpolate-sizeプロパティとcalc-size()関数により、固有キーワード値のアニメーションが可能になりました。本記事ではinterpolate-sizeとcalc-size()がどのようなものなのか、作例とともに紹介します。 ※本記事の作例は、
CSS の `progress` 関数は、2 つの長さの値の間の進捗を計算するための数学関数です。流体タイポグラフィやレスポンシブなレイアウト調整に利用できます。流体タイポグラフィは `clamp` 関数を使用して実装することもできますが、`progress` 関数を使用することでより意図を明確に記述できます。この記事では、CSS の `progress` 関数の構文と使用例について解説します。 CSS の progress 関数は、2 つの長さの値の間の進捗を計算するための数学関数です。フォントサイズをレスポンシブに調整する流体タイポグラフィ（Fluid typography）や、画面サイズに応じたレイアウトの調整、スクロール量に応じたプログレスバーの表示など、さまざまな場面で利用できます。progress 関数自体で新しい機能を提供できるわけではありませんが、既存の記述方法と比較してよ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
これは朗報！ width: 100%;より便利なstretchキーワードが使えるようになります、Chrome 138で新しく追加された6個のCSSの機能
先日リリースされたChrome 138で追加された、CSSの新しい機能6個を紹介します。今回のアップデートで目玉は、stretchキーワードをはじめ、新しい関数がいくつかサポートされました。Web制作者は要チェックです！ 特にstretchキーワードは、朗報です。 width: calc(100% - 48px);で全幅からマージン分を引いていたのをwidth: stretch;だけで利用可能な幅いっぱいを占めるようにできます。 New in Chrome 138 Chrome 138 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに width: 100%;のより良い代替手段width: stretch; CSSの符号関連関数: abs(), sign() OSレベルの
Lism CSSとは？CSS設計理論の概要
2025年 6月 11日、Lism CSS という CSSフレームワークを ver.0.1 として β リリースしました。 この Lism CSS の設計について、その概要を解説していきたいと思います。 TailwindCSSがデファクトスタンダードとなっていますが、ぜひ新しい選択肢として検討いただけたら幸いです。 はじめに WEBサイト制作において、CSS設計は永遠の課題ですよね。 「Lism CSS」は、この課題に対する新しい解決策として開発された、軽量でモダンな CSS フレームワークです。 独自のCSS設計理論をreset.cssレベルから構築しており、デザイントークン・レイアウトモジュール・CSSプロパティ単位のユーティリティクラスを組み合わせて、WEBサイト全体を支える骨組みとして機能します。 Every Layout、TailwindCSS、Bootstrap など既存の優れ
Chrome系ブラウザには増田を快適に閲覧するための コンパクトな増田 という古い拡張機能があったが、Chromeの更新に対応し切れておらず、既にChromeには新規インストールできなくなってしまっている。Edgeにはまだインストール可能だが、いずれ対応しなくなる可能性が高い。 そこで、「増田のトップページで、言及エントリ(返信・トラバ)を一覧から除外することで、新規エントリだけを一覧できる」という機能に絞ってコンパクトな増田を再現、ついでにいくつかのおまけ機能を付与したスタイルシート(CSS)を今年の4月に公開していたのだが、今回改めて英文スパム対策を追加したので公開する。 これを導入するには Stylus という拡張が必要で、少し気軽さには欠けるが、増田以外にも活用できるので、この機会にぜひ導入してみてほしい。拡張をインストールしたあとは、下記のコードをコピペして新規スタイルとして導入
![[増田しぐさ] 増田CSSを紹介する記事(英文スパム対策付き)](https://cdn-ak-scissors.b.st-hatena.com/image/square/b1638cdb5807a4788e4ba3c1109a984166e095fc/height=288;version=1;width=512/https%3A%2F%2Fanond.hatelabo.jp%2Fimages%2Fog-image-1500.gif)
ページにもともと読み込まれているCSS由来のスタイルを打ち消して、しがらみのない開発をするのにall:unset, all:revertを使えそう - hitode909の日記
長年開発を続けているページでは、Bootstrapなど、ページ自体のスタイルを丸ごと上書きしてしまうCSSライブラリが読み込まれていることがある。 一方、最近はReactコンポーネントを作って、スタイルはCSS Modulesで当てたい、という機会が増えている。 CSS Modulesを使うと、コンポーネントに適用スタイルを明示的に指定することができるが、そこにページ丸ごと上書きCSSライブラリが混ざってくると、思うようにスタイルが当たらない、ということになる。 たとえば、Bootstrapを読み込んだページのpタグには、margin bottom: 10pxのようなスタイルが問答無用で指定されてしまう。 こういうしがらみから逃れる手法は無いのかな、と思って、Bootstrapを読み込み済みの歴史のあるページでは、Shadow DOMなどを使ったらBootstrapの依存を消せますか？など
CSSのclip-pathを使うと要素を好きな形に切り抜けます。コンテンツを斜めに切り抜いたり、画像を丸く切り抜いたり、おそらくみなさんも見たことがある表現なのではないでしょうか？ clip-pathでは形を切り抜くための関数が利用できます。2025年4月ごろにリリースされたChrome 135、Edge 135、Safari 18.4にはshape()関数が追加されました。shape()関数を使うとより自由度の高い切り抜きが可能になります。 今回の記事ではclip-pathとshape()関数でどんな表現ができるかをご紹介します！ clip-pathとは まずはclip-pathについて簡単に確認しましょう。 冒頭でも紹介した通り、clip-pathでは要素を切り抜くためのクリッピング領域を作ります。circle()、rect()、path()、polygon()などの関数を使うことで、
簡単な手順でWebページの読み込み時間を高速化！ クリティカルCSSを抽出してくれるツール -Critical CSS Generator
クリティカルCSSとは、Webページで最初に表示される部分（ファーストビュー）をレンダリングするために必要な最小限のCSSです。このクリティカルCSSを既存のWebページから抽出し、HTMLにインラインのCSSとして記述することでファーストビューで使用するCSSのリクエストがなくなり、ブラウザはすべてのCSSを読み込むのを待たずにWebページをより速くレンダリングできます。 既存のWebページからクリティカルCSSを抽出して、インラインで記述する用のCSSを書き出してくれるオンラインツールを紹介します。 Critical CSS Generator クリティカルCSSを使用する主な利点 Critical CSS Generatorの使い方 クリティカルCSSの記述方法 クリティカルCSSを使用する主な利点 クリティカルCSSを使用する主な利点は、下記の3つです。 Webページの体感的な読み
CSSのreading-flowプロパティが便利！ CSS GridやFlexboxで見た目とDOMツリー内の順序を一致させることができます
CSS GridやFlexboxは便利でよく使用していると思います、ただし、見た目の順序とDOMツリー内の順序が一致しないことがあります。これはキーボードやアクセシビリティツールで操作するユーザーにとって非常に問題です。 この問題は、CSSのreading-flowとreading-orderプロパティを使用すると解決します。CSS GridやFlexbox、さらにはブロックコンテナの各アイテムの順序をCSSで設定する方法を紹介します。 Use CSS reading-flow for logical sequential focus navigation 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに -新しいプロパティを設計した経緯 reading-flowプロパティとは r
CSS GridやFlexboxは非常に便利ですが、アイテム間のスペース（ギャップ）をスタイルするときにはボーダーや疑似要素や背景画像を使ったハックでしか実装できませんでした。 アイテム間にボーダーを設置したり、交差するボーダー、交差しないボーダー、さらにはノートの罫線のように太いボーダーと細いボーダーの混在も実装できるCSSのcolumn-ruleプロパティを拡張するテクニックを紹介します。 A new way to style gaps in CSS 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに カラム間のスペースを設定するときの問題点 解決方法: CSSの新しいプロパティが便利すぎる カラム間のスペース（ギャップ）をスタイルするこれからの方法 終わりに はじめに ボーダー
Svelte × Tailwind CSSのコンポーネント集「Rabee UI」公式ドキュメントサイトを公開。開発者目線でより使いやすい体験を提供
Svelte × Tailwind CSSのコンポーネント集「Rabee UI」公式ドキュメントサイトを公開。開発者目線でより使いやすい体験を提供カスタマイズを前提とした「UIコンポーネントの種」をオリジナルのドキュメントサイトで提供。プロジェクトへの導入がよりスムーズになりました。 株式会社Rabee（本社：東京都渋谷区、代表取締役：上松勇喜）は、Svelte × Tailwind CSSベースのUIコンポーネント集「Rabee UI（読み：ラビーユーアイ）」において、これまでStorybook上で提供していたドキュメントを一新し、オリジナルの公式ドキュメントサイトを公開したことをお知らせします。 また、今回のアップデートにあわせて、新たに6つのUIコンポーネントも追加しました。 Rabee UI 公式ドキュメントサイト https://rabeeui.com/docs Rabee UI
Tailwind Is A Technical Debt: Why Component-Based CSS Leaves It Behind
Tailwind was a clever hack in 2017 when web development meant bloated HTML, CSS and JS. Global stylesheet and no structure, just a mess. Component based frameworks, like React, Vue and Angular moved development to higher level of abstraction. In this architecture Tailwind isn’t helpful, it’s a technical debt. Here’s why writing scoped, semantic CSS is betterLately my thoughts are around CSS and Ta
UIコンポーネントをAIで簡単に実装できる、Tailwind CSSのコードをプロンプトから生成できるツール -TailwindGenAI
Tailwind CSSを使用してUIコンポーネントを実装するのは、慣れていないと時間がかかります。Tailwind CSSのユーティリティファーストのフレームワークを使用してUIコンポーネントを生成するために設計された...記事の続きを読む
Intro CSS で Custom Ident 値を動的に生成する ident() が提案されている。 策定中の仕様をベースに解説する。 Anchor Name の動的生成 Popover の Anchoring は、anchor-name と position-anchor の組で対応付けられる。 <a id=anchor>this is anchor</a> <div popover>this is popover</div> <style> #anchor { anchor-name: --anchor; } [popover] { position-anchor: --anchor; } </style> 一方、以下のように複数の Anchor に対して、紐づけを変えながら単一の Popover DOM を再利用する場合も、全ての対象に anchor-name を振り、Popov
「教える側がこのデザイン？」WordやExcel講座のポスターがあまりにもWord過ぎて逆に気になってしまう→サイトの方もすごかった「CSS完全に理解した」
Moco @gokigensystem デザインというか、ふだんパワポスライド作りまくってる身としては緑枠のコロン（：）の位置が縦に揃っていないところが異常に気になる。あと緑背景に黒文字はやっぱり見づらいのを再認識。 でもこういう基本的なことを無意識でできる人ベテランでもあんまいないのよね。デザイン云々はそのあとの話。 x.com/mouse_soft_y/s… 2025-07-04 01:23:46 ၃ ၈ံ ف၈ံ ၄ @nan1kasirasita1 ターゲットが明確な良い広告じゃないか？ 少しでもデジタルが触れる人ならこの広告見て来ることはあり得ないし、「これを見て違和感を感じない人」だけが来てくれる。 何の受験かも書いてないので、自分とこのわけわからない資格取らせれば受験料も取れる。 ここまで書いて大学の掲示物だと気づいた x.com/mouse_soft_y/s… 2025-0
ウェブの見た目を整えるのにCSSはなくてはならないものですが、そのCSSの記述方法やツールは多種多様です。そしてそれらは進化したり、変化したりしています。本記事ではSassとCSSの関係性の変化を題材に、他のCSSツールにも応用できるような中長期的なCSSとの向き合い方、そしてネイティブの利点について解説します。 CSSを書く手法の変化について スタイリングを記述する手法やツールは変化しています。この記事ではスタイリングを記述する手法のことをCSSを書く手法と呼びます。中には直接CSSを書かないものもありますが、最終的にはCSSとして表現されるので含むことにします。 HTML1.0が登場した1993年にまだCSSはなく、タグや属性を用いてスタイリングしていました。その後、1996年にCSSが勧告され文書構造とスタイリングが分離し、スタイリングはCSSが担当するようになります。なお、この頃の
実はこっそり、こんなCSSを作って特定のブクマカのスターだけ目立たせてます a.hatena-star-star[href="https://b.hatena.ne.jp/firststar_hateno"], a.comment-hatena-star-username[href="/firststar_hateno"]{ border-bottom: 4px solid Silver; }
WebサイトやスマホアプリのUIでよく使用されるアコーディオンやモーダルといった基本的なコンポーネントをはじめ、AppleにインスパイアされたカードやフォトギャラリーやDynamic Islandなどの気持ちよく動作するアニメーションで美しくデザインされたUIコンポーネントを紹介します。 SmoothUI SmoothUI -GitHub SmoothUIとは SmoothUIの美しくデザインされたUIコンポーネント SmoothUIの使い方 SmoothUIとは SmoothUIは、React, Tailwind CSS, Motionを使用して構築された、滑らかなアニメーションを供えた美しくデザインされたUIコンポーネントのコレクションです。気持ちよく動作するアニメーションとモダンなデザインパターンによってユーザーエクスペリエンスを向上させる再利用可能なUIコンポーネントのセットをデベ
WindPress WindPressはWordPressにTailwind.cssを統合出来るプラグインです。ビルドのステップ不要で簡単に統合し、テーマやプラグイン、ブロックエディターなどで利用できるようにする、というものになります。 デザイナー及び開発者向けに作られており、直感的で分かりやすく使いやすい設計となっています。構成なしで即座に利用可能、人気の各ビジュアルビルダーと統合、軽量且つ高速、ファイルマネージャーライクに機能し、カスタムCSSやJavaScriptのファイル整理が可能な仮想ファイルシステムを備えています。 エディターのオートコンプリート機能にもTailwindのclassや変数が候補になり、classにホバーする事でプレビューする事も可能です。OSSとしてソースコードが公開されていますが、より機能の備えた（統合できるビルダーの種類を増やす等）有償版も用意されています。
Lism CSS
reset.css レベルからの設計 Lism CSSは、reset.cssからユーティリティクラスまで、サイト全体のCSS設計理論を構築しています。
If you asked me a few months ago, “What does it take for a website to stand out?” I may have said fancy animations, creative layouts, cool interactions, and maybe just the general aesthetics, without pointing out something in particular. If you ask me now, after working on color for the better part of the year, I can confidently say it’s all color. Among all the aspects that make a design, a good
CSS: 2025年に押さえておきたい最新CSS機能13選（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: 10 Modern CSS Features You Want to Use | Rails Designer 原文公開日: 2025/05/29 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています 日本語タイトルは内容に即したものにしました（原文で紹介されている機能は実際には13個です）。 項目ごとにMDNへのリンクも追加しています。 JavaScriptと同様に、CSSも（Rails）開発者の間であまり好かれていません。しかしJavaScriptにTurbo（古くはCoffeeScriptなど）があったように、CSSにもプリプロセッサやポストプロセッサ、抽象化の長い歴史があります（Tail
開発しやすいデザインを作る！FigmaのAuto LayoutとCSSの関係を解説 - DESIGN JOURNAL - 株式会社モンスターラボ
こんにちは。Design Journal編集部です。UIデザインツールのFigmaにはAuto LayoutとConstraints and resizingというとても便利な機能があります。 Auto LayoutはFrame内の要素を自動で整列させる機能です。最近自分がページやUIパーツのレイアウトを組むときは、大半のフレームにAuto Layoutを設定するくらいなくてはならない機能です。 Constraintsは要素が配置されているフレームのサイズが変更されたときに、要素のサイズをスケールさせるか固定するか、また位置を上下左右中央、どの座標を基準に固定するかなどを設定する機能です。 ResizingはAuto Layoutを設定したときのみ使えるプロパティで、Auto Layoutの親要素を子要素のサイズに合わせてスケールさせるか、逆に親要素のサイズに合わせて子要素のサイズをスケー
CSSの新しい国際化機能、対応ブラウザ状況は？
個人的にオススメの設定は text-spacing-trim: trim-start です。理由は2つで「慣習」「審美性」の観点からですが、いったん背景を説明します。 もともとこのスペースの話も、活版印刷の組版時代までさかのぼります。約物は通常半分の幅でした。その約物と他の文字を並べるとき、込物（スペース）も一緒に入れていました。込物も様々な幅がありますが、通常は半分の幅である二分アキを入れますが、行頭などに括弧が来る場合は込物なしでそのまま組むこともあったわけです。調整するためには半分の大きさにしておいたほうが使い勝手がよかったわけです。しかし、コンピューターが登場し、文字を符号として取り扱う上で込物を分ける概念が消失しました。込物（スペース）とセットで約物を使うようになりました。そういう背景があり、WordやinDesignなどの処理系の責務として、スペースをどうするか決めるようになり
State of CSS 2025
There is only one item on my CSS wishlist for 2025: a slower pace! After years of rapid innovation, now feels like the right time for browser vendors to take a beat to consolidate, fix browser inconsistencies, and let the rest of us catch up. After all, we might've heard about subgrid, :has(), scroll-driven animations, and all the other recent CSS improvements – but how many of us can say that we'
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本語Webサイトを意識したモダンリセットCSS「kiso.css」をリリースしました – TAKLOG
Claude Code でモックアップを HTML と Tailwind CSS (CDN 版) で作る
kiso.css - 日本のWebサイトのための「基礎」となるリセットCSS
CSSでheight: autoでもアニメーションが可能に! interpolate-sizeとは - ICS MEDIA
値の補間計算を簡潔に記述できる CSS の `progress` 関数
【CSS】まだ width: 100% つかってるやついる⁉︎ いねぇよな⁉︎ - Qiita
[増田しぐさ] 増田CSSを紹介する記事(英文スパム対策付き)
CSSのclip-pathとshape()関数で切り抜き表現の引き出しを増やそう！ - ICS MEDIA
CSS GridやFlexboxでアイテム間のスペース（ギャップ）をスタイル設定するCSSの新しいテクニック
CSS の ident() による動的な custom-ident の生成 | blog.jxck.io
Sassの歴史から考える、ネイティブなCSSの利点 - ICS MEDIA
実はこっそり、こんなCSSを作って特定のブクマカのスターだけ目立たせてま..
CSSで簡単カスタマイズ、洗練されたデザインと気持ちいいアニメーションで動作するUIコンポーネント -SmoothUI
WordPressにTailwind.cssを統合出来るプラグイン・「WindPress」 - かちびと.net
CSS Color Functions | CSS-Tricks