【初心者必見】CSSとは？基本から書き方までわかりやすく解説　part1 🔖 1

はじめに前回の投稿でHTMLで見出しや文章、画像などを表示できるようになる学習をしてきましたが、文字の色を変えたい文字を大きくしたい余白をつけて見やすくしたいと思ったことはありませんか？HTMLだけではWebページの見た目を自由に変更することはできません。...

CSS Grid Lanes で Masonry レイアウトを実装する 🔖 37

2026 年 7 月現在、CSS Grid Lanes を実装しているのは Safari 26.4 以降のみです。仕様は策定中であり、今後構文や動作が変更される可能性があります。 Pinterest の画像ギャラリーのように、高さの異なるアイテムを複数の列へ隙間なく配置するレイア

CSS text-autospaceを導入しました 🔖 69

最近、新たなCSSプロパティ text-autospace が主要なWebブラウザーでサポートされました。どうしても和文と欧文の交ぜ書きが多くなる技術ブログにおいて、待望のプロパティです。そのあらましと、このブログにおける採用について紹介します。 やったこと 背景 将来 デジタル

Claude Code で HTML を出力する際に CSS フレームワークを指定すると便利 🔖 50

HTML 出力は見やすくて自由度が高い Claude Code に成果物を出力させる際、プレーンテキストや Markdown ではなく HTML で出力させると、そのままブラウザ (Chrome など) で開くことができ、Markdown の本部プレビューと比べて人間にとって非常

GraphicsStateCollection を使ったシェーダーウォームアップについて 🔖 1

はじめに こんにちは、SGEコア技術本部(コアテク)のプロジェクトサポートチームに所属している天野です。 プロジェクトサポートチームでは社内のプロジェクトに対してパフォーマンスチューニング、不具合調査、設計サポートなどを行なっています。 この記事ではパフォーマンスチューニングの一

今回はCSSのアップデートが盛りだくさん！ Chrome 150で新しく追加された18個のCSSの機能 🔖 24

先週アップデートされたChrome 150に追加された、CSSとUIに関する新しい機能を紹介します。 今回はかなりの数のアップデートがされており、さまざまなCSSのプロパティや関数に便利な機能が追加されています。Web制作者は要チェックです！ New in Chrome 150

CSS トランジションをcubic-bezier関数でレベルアップしよう（翻訳） 🔖 1

CSSはどんどん進化している！ border-shapeプロパティを使うとボーダーをあらゆる形状に実装できます 🔖 67

CSSで2つの円を線でつなぐボーダーを実装できると思いますか？ 可能になりました！ Chrome 147+のアップデートでサポートされたborder-shapeプロパティを使用すると、ボーダーにあらゆる形状（多角形・円など）を設定できます。 まずは、実際の動作をご覧ください。ドラ

CSS `ident()` におけるダミーデータを利用した値の早期評価 | saku's blog | @sakupi01.com 🔖 12

Published on June 27, 2026 Updated on June 27, 2026 Table of Contents Table of Contents はじめに おさらい ident() 早期評価の提案 dashed-ident ident() を利用した

標準CSSは美しくなった、もはやTailwindは不要 🔖 294

最近、標準のCSSがかなり進化していることに気づきました。 他のエンジニアと会話しても知らない人が多そうなのでシェアしておきます。 数年ほど前からCSSは標準でネスト構文をかけるようになりました。これはとてつもない進化です。 多くのプロジェクトでは、sassやscssなどを導入し

標準CSSは美しくなった、もはやTailwindは不要 🔖 294

最近、標準のCSSがかなり進化していることに気づきました。他のエンジニアと会話しても知らない人が多そうなのでシェアしておきます。数年ほど前からCSSは標準でネスト構文をかけるようになりました。これはとてつもない進化です。多くのプロジェクトでは、sassやscssなどを導入し

さらば命名規約!! だが CSS設計よ、お前は死なず俺の中で生き続ける。 🔖 110

さらば命名規約!! だが CSS設計よ、お前は死なず俺の中で生き続ける。 🔖 110

私は数年前、CSS設計（SMACSS や REMM など）について何本か記事を書きました。当時いちばん悩んでいたのは「命名」です。命名の衝突を防ぐルール作り、ネームスペースの確保、実装より命名に時間がかかる感覚 — CSS設計の苦労の多くは、ここに集約されていました。...

【Frontend CSS – パート10】ブラウザから見たSubgrid：ネストしたレイアウトはどう同期されるのか？ 🔖 1

ご注意この記事は AI のサポートを受けていますが第9回を読み終えたのに、ネストしたレイアウトでまだ頭を抱えていませんか？ Subgrid へようこそ — CSS Grid Level 2 の「スパイス」で、同じ行にあるカード同士が「高さ勝負」をやめて、きれい...

【CSS】FlexとGridのGapにBorderをつけることができるようになった！！ 🔖 1

はじめにGridやFlexboxでレイアウトを組むとき、「列や行の間に区切り線を入れたい」と思ったことはありませんか？これまでは疑似要素や余分なDOM要素を駆使して実現するしかなく、レスポンシブ対応が複雑になったり、アクセシビリティツリーに不要なノードが増えたりと悩み...

CSSの新機能が便利！ FlexboxやGridに罫線を実装したり、UIのシェイプなど、Chrome 149で新しく追加されたCSSの機能 🔖 29

先週アップデートされたChrome 149に追加された、CSSとUIに関する新しい機能を紹介します。 今回のアップデートで注目すべき点は、たくさんあります！ まずはshape()がshape-outsideプロパティで動作するようになり、UIをシェイプできるようになりました。さら

数行のCSSで、UIデザインの使い心地を向上させるテクニックのまとめ 🔖 33

優れたインターフェイスは、小さな要素が積み重なって、素晴らしいユーザーエクスペリエンスが生み出されます。数行のCSSで、インターフェイスの使い心地を向上させるテクニックを紹介します。 生成AIのスキルとしてコーディングアシスタント（Claude Code、Codexなど）に使うこ

【Frontend CSS – パート3】なぜ font-family は継承されるのに background は継承されないのか？ 🔖 1

注意この記事はAIのアシスタントによって翻訳・編集されています。目次1. 問題：なぜボタンの文字色がマルーンになるのか？2. 本質：CSSにおける継承の仕組み3. 継承を制御する5つのグローバルキーワード4. all: 全プロパティを一括リセット（...

【Frontend CSS – パート2】カスケードと詳細度の真実 ─ CSS優先順位はどう計算されるのか？ 🔖 1

注意本記事はAIの支援を受けて執筆しています。目次1. 問題：なぜスタイルが「効かない」のか？2. 原因：ブラウザがスタイルを決める6つの基準3. Origin（スタイルの出所）― 最も重要な優先順位4. Cascade Layers（@layer...

GoogleのModern Web Guidanceに学ぶ、モダンCSSのDos / Don'ts大全 🔖 192

Googleがリリースした「Modern Web Guidance」スキルを使うと、AIエージェントが最新のWeb機能でコードを書けるようになります。 スキルが参照するガイドラインはMarkdownで書かれており、Googleが推奨するWeb開発のDos / Don'ts、つまり

GoogleのModern Web Guidanceに学ぶ、モダンCSSのDos / Don'ts大全 🔖 192

Googleがリリースした「Modern Web Guidance」スキルを使うと、AIエージェントが最新のWeb機能でコードを書けるようになります。https://zenn.dev/ubie_dev/articles/modern-web-guidanceスキルが参照するガ

GoogleのModern Web Guidanceに学ぶ、モダンCSSのDos / Don'ts大全 🔖 192

結論、Modern Web Guidanceのドキュメントから、Googleが推奨するCSSのやるべきこと・やってはいけないことをまとめました。Googleがリリースした「Modern Web Guidance」スキルを使うと、AIエージェントが最新のWeb機能でコードを書け

GoogleのModern Web Guidanceに学ぶ、モダンCSSのDos / Don'ts大全 🔖 192

結論、Modern Web Guidanceのドキュメントから、Googleが推奨するCSSのやるべきこと・やってはいけないことをまとめました。Googleがリリースした「Modern Web Guidance」スキルを使うと、AIエージェントが最新のWeb機能でコードを書け

GoogleのModern Web Guidanceスキル登場。AIが古いCSS・JSを書く問題を解決する 🔖 262

GoogleのModern Web Guidanceスキル登場。AIが古いCSS・JSを書く問題を解決する AIにフロントエンドのコードを書かせると、一昔前の書き方をされて困ることがよくあります。 私のAIの使い方が悪いというのは前提にありつつも、たとえばCSSではSubgrid

GoogleのModern Web Guidanceスキル登場。AIが古いCSS・JSを書く問題を解決する 🔖 262

AIにフロントエンドのコードを書かせると、一昔前の書き方をされて困ることがよくあります。私のAIの使い方が悪いというのは前提にありつつ、最新の書き方を選んでくれないことが何度もあります。たとえばCSSではSubgridを使ってほしい場面でわざわざ古いGridのネストを書いてくる

GoogleのModern Web Guidanceスキル登場。AIが古いCSS・JSを書く問題を解決する 🔖 262

AIにフロントエンドのコードを書かせると、一昔前の書き方をされて困ることがよくあります。私のAIの使い方が悪いというのは前提にありつつ、最新の書き方を選んでくれないことが何度もあります。たとえばCSSではSubgridを使ってほしい場面でわざわざ古いGridのネストを書いてくる

GoogleのModern Web Guidanceスキル登場。AIが古いCSS・JSを書く問題を解決する 🔖 262

AIにフロントエンドのコードを書かせると、一昔前の書き方をされて困ることがよくあります。私のAIの使い方が悪いというのは前提にありつつ、最新の書き方を選んでくれないことが何度もあります。たとえばCSSではSubgridを使ってほしい場面でわざわざ古いGridのネストを書いてくる

鹿野さんに聞く！CSSの最新トレンド Ver.2026 🔖 120

2026/05/14開催の「鹿野さんに聞く！CSSの最新トレンド Ver.2026」 の登壇資料です https://findy.connpass.com/event/390152/ 各デモのURLはこちら https://tonkotsuboy.github.io/findy-

Tailwind CSS v4 で知っておきたい隠れた便利技16種を公開します（翻訳） 🔖 1

兄弟要素のインデックスを返す CSS 関数 sibling-index() 🔖 4

`sibling-index()` は要素の兄弟要素の中でのインデックスを返します。`sibling-index()` 関数により取得したインデックスを使用することにより、スタッガー（時間差）アニメーションや、色相を段階的に変えるといった、兄弟要素の位置に基づいたスタイリングが可

自分なりのCSSアニメーションとの向き合い方 🔖 1

Zenn初投稿になります。死ぬほど文章書くの下手なので、日本語おかしいところめちゃくちゃあると思いますが、暖かい目で見ていただけるとありがたいです…昨今だと「いや、AI使えよ」って話かもしれませんが、今回の内容は自分の心境なども話したいこともあり、自分の言葉で話したいので自分

CSSだいたい理解した 🔖 106

CSSを書き換えて、画面のどこかにあるボタンを押すだけのゲームです。 ただし、ボタンはズレていたり、隠れていたり、押せなかったり、なぜか埋まっていたりします。 margin、position、display、overflow などを駆使して、壊れたレイアウトをさらに壊しながら正解

最近のCSS、全然追えてなかった。ここ1〜2年で使えるようになった機能10選 🔖 66

この記事では、2024〜2025年にかけて主要ブラウザで使えるようになったCSS（一部HTML）の機能を10個紹介します。「昔はセレクターとか頑張って追いかけてたけど、最近は全然追えてない」という方を対象としています。 それぞれの機能について、目的・できること・昔のやり方・注意点

CSSカスタムハイライトAPI - DOM操作なしでテキストをハイライト - ICS MEDIA 🔖 24

ウェブサイトやウェブアプリで特定の文字や文章をハイライトしたいとき、今までは<span>タグなどで囲んでCSSのスタイルを当てるのが一般的でした。 この方法では、文章の構造には関係のないタグが必要になり、HTMLの階層構造が深くなりがちです。また、動的にハイライトする場合はJav

CSSで実装されたLiquid Glassの美しいUI要素やコンポーネントをコピペで使えるUIキット -Liquid Glass UI Kit 🔖 23

iOSにLiquid Glassが採用されてから早半年が過ぎました。 慣れない当初は使いにくさを感じていましたが、Liquid Glassを採用しているアプリが増え、最近では逆にLiquid Glassを採用していないアプリのUIを見るとちょっと古くさい感じがしたりします。 We

【CSS】明暗見やすい色を返してくれる`contrast-color()`が使えるようになった 🔖 2

contrast-color()はCSSの要素のひとつで、コントラスト的に見やすい色を返してくれます。2025/09/15リリースのSafari 26.0・2025/12/09リリースのFirefox 146・2026/04/07リリースのChrome 147でそれぞれ実...

モダンCSSでWebの課題をスマートに解決！一歩進んだアクセシビリティ対応テクニック3選 🔖 3

前回の記事では:focus-visibleによるフォーカスインジケーターのカスタマイズ、カラーコントラスト、visually-hiddenパターンについて紹介しました。今回はその続編として、CSSを用いたアクセシビリティ対応のポイントをさらに3つ紹介します。https://z

長年の悩みがこれで解決！ CSSのposition: stickyの仕様が変わり、上部固定と左端固定が同時に実装できるようなります 🔖 89

テーブルのヘッダを上部に固定し、さらに列の1つを左端に固定する、これを実装するのは非常に大変です。 一見、position: sticky;を使って、top: 0;とleft: 0;で実装できそうですが、実際にはどちらか一方しか固定されません。JavaScriptを使用してもかな

こんなAI時代に、新しいCSS設計フレームワークを作る理由 🔖 4

最近は なんでもかんでも、ぜーーーーんぶ、 Tailwind CSS。なぜならAIが吐き出すのがTailwindだから。AIにCSSなんて書かせたら余計カオスになるから。そんな、Tailwind CSSが圧倒的一強となった世の中で、自分は今「Lism CSS」 という CSS

そのCSSの書き方は古すぎる！ モダンCSSとTailwinds CSSでどのように記述するのかが分かる -modern.css 🔖 78

CSSのさまざまな古い書き方をモダンCSSやTailwinds CSSでどう書くのか教えてくれるサイトを紹介します。 要素を中央配置するCSSをはじめ、スクロールバーの出現によるレイアウトシフトを防ぐCSS、HEX値やrgb()値より鮮やかなoklch()による色設定、JavaS

【35歳未経験でも理解できた】破綻しないCSS設計の基本 🔖 3

こんにちは！気づけば35歳、未経験からWeb開発の世界に飛び込んだ者です。ヘッダーの余白を少し直しただけなのに、なぜか遠く離れたフッターが崩壊する。直せば直すほど他の場所が壊れていく。「これ、CSSじゃなくてジェンガかな？」と何度も心が折れかけました。しかし、ある本を...

CSS Responsive Rules 🔖 87

css-responsive.md CSS Responsive Rules 目的 レスポンシブ実装の判断基準を明確にし、不要なブレイクポイントとコード量を最小化する。 CSS はブラウザへの「提案」であり、厳密な命令ではない。ブラウザに委ねられる仕事は委ねる。 基本方針: エス

CSSのattr()関数が進化！ HTML属性値を参照する新しい使い方 - ICS MEDIA 🔖 38

HTMLの属性値をCSSから参照できるattr()関数は、これまで::beforeや::afterといった疑似要素のcontentプロパティで使える機能として知られていました。 attr()関数の拡張構文は、CSSの値や単位の扱いを定義する仕様書「CSS Values and U

モダンCSSが変えるフロントエンド設計「アフォーダンスレイヤー」のすすめ 🔖 87

1. はじめに：コンポーネント指向の限界 UIを構築する際、ファイルアップロード用の<input type="file" />を、ページ内の他のボタンと同じ見た目（シャドウ、ホバーエフェクト、余白など）にしたいケースはよくありますよね。しかし、ファイル入力をネイティブのUIと競合

Kongyo CSS - 画像→Pure CSS 変換 🔖 27

使い方 画像を選択し「変換する」をクリック 最大幅: 画像を指定幅にリサイズ（小さいほど軽量） 色差許容値: 0 = ピクセル完全再現、値を上げるとグラデーションが滑らかになりサイズ削減 出力は単一の <div> タグ — CSSグラデーションのみで画像を表現 制約 url()、

適用されていないCSSを検出するChrome拡張を作った 🔖 26

経緯CSSを書いていて「あれ、なんで効かないんだっけ」ってなることないでしょうか。私はしょっちゅうあります。span { width: 200px;}DevToolsを開いてもプロパティはちゃんと適用されてる。打ち消し線もない。でも見た目は変わらない。しばらくして

業務アプリのフロントエンド負債と向き合い、Tailwind CSS から Panda CSS への移行を決めた話 🔖 85

はじめに はじめまして。2025 年 10 月より、レバテック開発部にジョインした早川です。 私たちのチームでは、社内業務を効率化するための Web アプリケーションを Next.js（App Router）+ TypeScript で開発しています。フロントエンドのスタイリング

業務アプリのフロントエンド負債と向き合い、Tailwind CSS から Panda CSS への移行を決めた話 🔖 85

はじめにはじめまして。2025 年 10 月より、レバテック開発部にジョインした早川です。私たちのチームでは、社内業務を効率化するための Web アプリケーションを Next.js（App Router）+ TypeScript で開発しています。フロントエンドのスタイリング

これは覚えておきたい！ シンプルなCSSで、画像をホバーすると拡大し、マスクまでしてくれる 🔖 25

画像をホバーすると拡大するCSSのテクニックは昔からありますが、画像の拡大分をoverflow:hidden;で非表示にするのではなく、clip-pathでクリッピングするとってもシンプルなCSSを紹介します。 実際の動作は、デモページをご覧ください。 See the Pen 画

CSSだけでできるアクセシビリティ改善3選【やりがちなミスも解説】 🔖 1

前回の記事ではクリッカブルエリアの調整とprefers-reduced-motionを利用したアニメーションの制御について紹介しました。今回はその続編として、CSSを用いたアクセシビリティ対応のポイントをさらに3つ紹介します。https://zenn.dev/gemcook/