はてぶ・Qiita・Zennのトレンド記事を紹介
CSSはWebページのデザインやレイアウトを指定するための言語です。HTMLと組み合わせて使い、見た目を美しく整えます。
CSSの単位がたくさんあり何を使えばよいか迷った時に、フォント、スペース、ポジション、要素の幅・高さに最適な単位は 🔖 23
CSSには便利な単位がたくさんあります。よく使用する単位として絶対単位（pxなど）や相対単位（em, rem, %など）をはじめ、Gridの単位（fr）やビューポート単位（vw, vhなど）があります。いくつかの単位は使う場所が限られていますが、複数もしくはどこにでも使用できる単
Svelte × Tailwind CSSの「Rabee UI」コンポーネント8種類を新たに公開しました 🔖 30
株式会社Rabee（本社：東京都渋谷区、代表取締役：上松勇喜）は、Svelte × Tailwind CSSベースのUIコンポーネント集「Rabee UI」において、UIコンポーネント8種類を新たに公開しました。 今回リリースしたコンポーネントも含む全24種類のコンポーネントは、
【万博 最強攻略 完全無料】先着予約・来場予約が100万倍楽になる最強のCSS/JS【7/28最新版】｜つっちー 🔖 36
XとGithubで公開していましたがnoteで公開することにしました。 既にXの方でご覧いただいて導入済みの方も、7/27時点での機能強化版を上書きすることをおススメします。 noteになりますが安心してください、引き続き無料です。 使ってみて万博を楽しんでいただけたなら、チップ
CSSで実装したグリッチの揺れるエフェクトがかっこいい！ 映画で見かけるようなサイバーなUI -CyberPopover 2025 🔖 34
まさにクール！ 映画で見かけるようなサイバーなインターフェイスを実装したサイバーポップオーバー2025を紹介します。 下記はデモをgifアニメーション化したもので、実際にはボタンやパネルにグリッチの揺れるエフェクトがあります。また、アクション時の音もかなりサイバーです。 グリッチ
【海外記事紹介】「モダンCSSがあればSPAは不要」と主張するブログが話題に 🔖 203
7月25日、Jono Alderson氏が「It’s time for modern CSS to kill the SPA」と題したブログ記事を公開し、海外で話題を呼んでいる。 7月25日、Jono Alderson氏が「It’s time for modern CSS to
CSSアニメーションが再発火しない？void element.offsetHeightの正体と使いどころ 🔖 2
はじめにある日、JavaScriptでスタイルを動的に変更したのにアニメーションが再発火しない？なぜ？🤔そんな経験、ありませんか？この問題、実はブラウザの最適化が裏で効いていて、「同一フレーム内でのスタイル変更」がバッチ処理されてしまうのが原因です。そこで登場す...
【CSS】リンクの色をJavaScriptから取得できるようになる、予定 🔖 4
CSS疑似クラス:visitedのプロパティcolorは取得することができません。なぜなら、リンク先の色を取得すると、そのリンク先を訪れたことがあるかどうかを識別できてしまうからです。HTML
CSSでついにif elseの条件文が使える！ if()関数の便利な使い方を解説 🔖 51
5月にリリースされたChromeとEdgeで、CSSのif()関数がサポートされました。これによりCSSでもif elseの条件文が使えるようなり、プロパティに対して条件付きで値を設定できるようになりました。 新機能なので、実際にどのように使えばよいのか分からないことも多いと思い
WEBソリューション課の田畑です。 現在Figmaというデザインツールを使ってUIデザイン（ウェブサイトの見た目や使い勝手を設計すること）や画面デザインなどを行なっています。 Figmaでデザインを作成後に、それを元にHTMLとCSSでwebページを作成しています。 もっと効率的
Sassの歴史から考える、ネイティブなCSSの利点 - ICS MEDIA 🔖 36
ウェブの見た目を整えるのにCSSはなくてはならないものですが、そのCSSの記述方法やツールは多種多様です。そしてそれらは進化したり、変化したりしています。本記事ではSassとCSSの関係性の変化を題材に、他のCSSツールにも応用できるような中長期的なCSSとの向き合い方、そしてネ
UIコンポーネントをAIで簡単に実装できる、Tailwind CSSのコードをプロンプトから生成できるツール -TailwindGenAI 🔖 24
Tailwind CSSを使用してUIコンポーネントを実装するのは、慣れていないと時間がかかります。Tailwind CSSのユーティリティファーストのフレームワークを使用してUIコンポーネントを生成するために設計された...記事の続きを読む
HTML/CSS/JSでモダンなTODOアプリを開発！レスポンシブ対応・ダークモード・モジュール化まで徹底解説 🔖 2
こんにちは！今回は、Web開発の基本であるHTML/CSS/JavaScriptを使って、TODOアプリを開発し、さらにFirebaseで公開するまでの全工程を徹底解説します。この記事でわかることこの記事を読めば、ただTODOアプリを作るだけでなく、以下のような実践的...
値の補間計算を簡潔に記述できる CSS の `progress` 関数 🔖 61
CSS の `progress` 関数は、2 つの長さの値の間の進捗を計算するための数学関数です。流体タイポグラフィやレスポンシブなレイアウト調整に利用できます。流体タイポグラフィは `clamp` 関数を使用して実装することもできますが、`progress` 関数を使用すること
Tailwindcss v4バージョンアップへの道のりをCursorと共に駆け抜けた話 🔖 2
はじめにはじめまして！イノベーション開発チームのchisato🎮です！弊社が運営するITトレンドのスタイルの実装にTailwindcssを採用しています。今年のはじめにはv4という大きな変更が入ったバージョンがリリースされ、MCPサーバーやら開発組織としてのガイドラインの統一
Figma Dev Modeの線は「外側」扱いでCSS表示される 🔖 1
要点Figmaにおける線の位置のデフォルトは内側Dev ModeのCSS出力は、線の設定に関わらず要素の外側外側以外を設定している場合、線の太さだけサイズが大きくなるこれにより起こり得るデザインと実装のズレについて、チーム内で認識を合わせておくことが重要
これは朗報！ width: 100%;より便利なstretchキーワードが使えるようになります、Chrome 138で新しく追加された6個のCSSの機能 🔖 59
先日リリースされたChrome 138で追加された、CSSの新しい機能6個を紹介します。今回のアップデートで目玉は、stretchキーワードをはじめ、新しい関数がいくつかサポートされました。Web制作者は要チェックです！ 特にstretchキーワードは、朗報です。 width:
【CSS】まだ width: 100% つかってるやついる⁉︎ いねぇよな⁉︎ 🔖 58
はじめに漫画『東京卍リベンジャーズ』の名セリフをオマージュしたタイトルですが、この記事はいたって真面目です。実は Chrome 138 から、CSSで要素のサイズを指定する際に使える新しいキーワード stretch が追加されました。この記事では、その stretc...
こんにちは！サイボウズでデザインテクノロジストをしている saku (@sakupi01) です。2025/06/05~06 にオランダのアムステルダムで開催された CSSDay 2025 に参加してきました🎨✨https://cssday.nl/CSSDay は 201
こんにちは！サイボウズでデザインテクノロジストをしている saku (@sakupi01) です。2025/06/05~06 にオランダのアムステルダムで開催された CSSDay 2025 に参加してきました🎨✨https://cssday.nl/CSSDay は 201
簡単な手順でWebページの読み込み時間を高速化！ クリティカルCSSを抽出してくれるツール -Critical CSS Generator 🔖 34
クリティカルCSSとは、Webページで最初に表示される部分（ファーストビュー）をレンダリングするために必要な最小限のCSSです。このクリティカルCSSを既存のWebページから抽出し、HTMLにインラインのCSSとして記述することでファーストビューで使用するCSSのリクエストがなく
kiso.css - 日本のWebサイトのための「基礎」となるリセットCSS 🔖 141
多くのリセットCSSは海外製のため、日本語の折り返しやタイポグラフィに対応していません。kiso.cssは日本語に最適化されています。 もちろん、英語圏の方にも配慮しています。
日本語Webサイトを意識したモダンリセットCSS「kiso.css」をリリースしました – TAKLOG 🔖 386
kiso.css - 日本のWebサイトのための「基礎」となるリセットCSS kiso.css は、日本のWebサイトのための「基礎」となるリセットCSSです。日本語に最適化しつつ、アクセシビリティやカスタマイズのし易さを重視しています。 tak-dcxi.github.io k
CSS の ident() による動的な custom-ident の生成 | blog.jxck.io 🔖 16
Intro CSS で Custom Ident 値を動的に生成する ident() が提案されている。 策定中の仕様をベースに解説する。 Anchor Name の動的生成 Popover の Anchoring は、anchor-name と position-anchor
令和に爆誕したモダンなCSSフレームワーク、Lism CSS の概要 🔖 39
2025年 6月 11日、Lism CSS という CSSフレームワークを ver.0.1 として β リリースしました。 この Lism CSS の概要について、解説していきたいと思います。 はじめに WEB サイト制作において、効率的でメンテナブルな CSS設計は永遠の課題で
令和に爆誕したモダンなCSSフレームワーク、Lism CSS の概要 🔖 39
2025年 6月 11日、Lism CSS という CSSフレームワークを ver.0.1 として β リリースしました。https://www.lism-css.com/この Lism CSS の概要について、解説していきたいと思います。 はじめにWEB サイト制作に
2025/06/10（火） 「鹿野さんに聞く！CSSの最新トレンド Ver.2025」での発表資料です。 https://findy.connpass.com/event/354917/
Web制作者はチェックしておきたい！ モダンCSSやデベロッパーツールなど、これからの実装に役立つ新機能のまとめ 🔖 35
2025年もCSSをはじめ、Web制作関連の進化は止まらないですね！ Google I/O 2025で、これからのWebを実装するための新機能が発表されました。先日の記事でも紹介したCSSのみでカルーセルを実装する疑似要素のサポート、宣言型ポップオーバー、デベロッパーツールにAI
details要素を閉じる際にもCSSアニメーションを有効にする方法 🔖 2
概要HTMLのdetails要素はネイティブに開閉可能な要素だが、開閉時にアニメーションをつける方法としては、JavaScriptを利用するケースがまだまだ一般的である。しかし、昨今ではCSSだけでも実装が可能になってきている。例えば、以下のようなCSSで開閉のアニメーション
details要素を閉じる際にもCSSアニメーションを有効にする方法 🔖 2
概要HTMLのdetails要素はネイティブに開閉可能な要素だが、開閉時にアニメーションをつける方法としては、JavaScriptを利用するケースがまだまだ一般的である。しかし、昨今ではCSSだけでも実装が可能になってきている。例えば、以下のようなCSSで開閉のアニメーション
スマートラウンドのデザインシステムのこれまでとこれから ~第2回 基本パーツの整備によって統一されたデザインとCSSを書かなくて良い世界へ~ 🔖 1
はじめにはじめまして、株式スマートラウンドでチーフテックリードをしているtsukakei1012です！この記事は連載シリーズ「スマートラウンドのデザインシステムのこれまでとこれから」の2回目の記事となります。第1回はエンジニアとデザイナーでデザインルールを整備する仕組みを整
スマートラウンドのデザインシステムのこれまでとこれから ~第2回 基本パーツの整備によって統一されたデザインとCSSを書かなくて良い世界へ~ 🔖 1
はじめにはじめまして、株式スマートラウンドでチーフテックリードをしているtsukakei1012です！この記事は連載シリーズ「スマートラウンドのデザインシステムのこれまでとこれから」の2回目の記事となります。第1回はエンジニアとデザイナーでデザインルールを整備する仕組みを整
これは朗報！ ついにCSSでif else文が使えるようになります、Chrome 137で新しく追加された7個のCSSの機能 🔖 191
Chrome 137で追加された、CSSの新しい機能7個を紹介します。 今回のアップデートで目玉は、if else文の条件付きでCSSの値を設定できるif()関数がついに使用できるようになりました。また、CSS GridやFleboxで見た目の順序とtabキーの順序が異なるのを制
CSSのみでdetails要素のアニメーションを実装する方法 – TAKLOG 🔖 34
約1年前、JavaScriptを使用したdetails要素のアニメーションの実装方法についての記事を投稿しました。しかし、その後の CSS の進化により <details> 要素の開閉アニメーションが CSS のみで実装可能になりました。 正確には、開く際のアニメーションは以前か
「100％純粋なHTMLとCSS」で作成された「マインクラフト」のページが公開されています。 CSS Minecraft https://benjaminaster.com/css-minecraft/ 上記のページにアクセスすると以下の画面が現れます。 用意されているブロックは
Svelte × Tailwind CSSのUIコンポーネント集「Rabee UI」をリリースしました 🔖 39
受託開発事業・自社サービス事業を展開する株式会社Rabee（本社：東京都渋谷区、代表取締役社長：上松 勇喜、以下「Rabee」）は、SvelteとTailwind CSSを利用したUIコンポーネント集「Rabee UI（読み：ラビーユーアイ）」のコードをリリースしました。 今回リ
どんなインプットも読みやすいHTML+CSSのレポートにするプロンプト文 🔖 4
1. 実行例生成されるレポートの品質とビジュアルこのプロンプトによって生成されるレポートは、従来のテキストベースのものとは一線を画すプロフェッショナルな仕上がりを実現します。こちらをご覧ください。…
はじめにみなさんは、視覚的な要素の順序とDOMの順序が一致するように、GridやFlexで、アイテムの順序を制御するプロパティは使わないようにしていたとおもいます。しかし、Chrome 137以…
【書籍紹介】『Web制作者のためのCSS設計の教科書』第3章・第4章を読んだ感想 🔖 1
同じようにサイト制作を学習されている方や、本書の購入を検討されている方の参考になれば幸いです。紹介者の現状サイトコーディングを学習中複数のデザイン案をもとに Web サイトを制作した経験ありHTML／CSS／JavaScrip…
Google、WebUIの自動生成ツール「Stitch」をベータ公開。自然言語で指示するとHTML/CSSを生成 🔖 401
Googleは日本時間5月21日未明に開幕した年次イベント「Google I/O 2025」で、自然言語で指示を入力すると自動的にWeb UIを生成するツール「Stitch」のベータ公開を発表しました。 StitchはもともとGalileo AI社が提供する同名の「Galileo
CSSで画面が崩れたときに最初に見るべきチェックリスト 🔖 3
こんにちは！今回は、CSSをいじっていて突然画面が崩れてしまったときの対処法について書いていきます。私も日々CSS書いていて「あれ？さっきまで正常だったのに...」ということがよくあります。そんなと…
コンポーネント設計について初心者が考える 〜CSS設計の教科書〜 🔖 1
この記事を読んでわかることコンポーネント設計の概要設計手法について（BEM、FLOCSS）コンポーネント作る際の極意注意こちらの記事は「CSS設計の教科書」の内容を引用している箇所がありま…
このアイデアはすごい！ テーブルでセルの行を強調表示、さらにそれ以外の部分はぼかして目立たせるCSSのテクニック 🔖 110
テーブルでセルをハイライトして目立たせるというのはよくあるテクニックですが、さらにそれ以外のセルはぼかしてより目立たせるCSSのテクニックを紹介します。 実装のポイントは、:focus-within疑似クラスと:not()否定疑似クラスです。 まずは、実際のデモをご覧ください。
ありがとうstyled-components : CSS Modules移行テクニック 🔖 1
はじめに2025年3月にstyled-componentsがメンテナンスモードになりました。https://opencollective.com/styled-components/updates/thank-you新しい技術がどんどん増えていく一方、こういった今まで利用し
【初心者🔰】表(table)の作り方と装飾(CSS)を超丁寧に図解 🔖 1
この投稿を見て分かることtableのHTMLの構造表に余白を付ける表に線を付ける表の幅を変えるいろいろな表のデザインの仕方背景tableを使って表を作る課題で激詰みしたので、まとめてみ…
🔰初心者必読の本読んでみた〜Web制作者のためのCSS設計の教科書〜 🔖 1
この投稿でわかること「Web制作者のためのCSS設計の教科書」１章・２章の概要エンジニア初心者が感じていることどんな本？画像参照）AmazonABOUTタイトル 「Web制作者のための…
カルーセルはもうCSSだけで実装できる！ 疑似要素::scroll-button()と::scroll-marker()の使い方を解説 🔖 163
Chrome 135でサポートされた::scroll-button()疑似要素は、疑似要素としてインタラクティブなスクロールボタンを作成できます。さらに::scroll-marker()疑似要素は、スクロールコンテナ内の関連するすべてのアイテムに対してフォーカス可能なマーカーのセ