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.
CSSの:visitedの仕様が変わる！ 訪問済みリンクの履歴が分割される機能がChrome 136に実装されます
今月リリース予定のChrome 136で、訪問済みリンクの履歴検出攻撃を無効化する機能が実装される予定です。 簡単に説明すると、:visitedによるリンク履歴が分割される機能が実装され、サイトA上でクリックしたサイトBへのリンクは、サイトA上では訪問済みになりますが、サイトC上のサイトBへのリンクは訪問済みにはなりません。履歴にはサイトBへのリンクはサイトA上でという情報も加わるようになります。 Making :visited more private by Kyra Seevers 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに :visitedのリンク履歴を分割とは 同じサイト内の他のページへのリンクはどうなるか この機能の実装状況 はじめに リンクをクリックするとどうなる
CSSで幾何学模様や繊細なグラデーションなど、さまざまな要素の背景にパターンを実装できる -MotifyX
美しい幾何学模様のパターン、ドットやグリッドベースのパターン、繊細なカラーの変化が楽しめるダークグラデーション、マトリックスのような近未来のパターンなど、CSSで実装された背景パターンを紹介します。 商用プロジェクトでも完全に無料で利用できます。カラーの変更などのカスタマイズも簡単で、ダークモードでもライトモードでも機能します。 MotifyX MotifyX -GitHub MotifyXとは MotifyXの使い方 CSSで実装された背景パターン MotifyXとは MotifyXはUIデザイナーやデベロッパー向けに、Webサイトやスマホアプリにぴったりな洗練された背景パターンのコレクションです。MITライセンスで、商用プロジェクトでも無料で利用できます。 MotifyX 主な特徴は、下記の通り。 洗練された50種類以上の手作りの背景パターン。 パターンのカテゴリ Geometric
【実践解説】Html Css Javascript Projects - Web開発で開発効率を劇的に向上 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 【実践解説】Html Css Javascript Projects - Web開発で開発効率を劇的に向上 🔥 なぜ今このツールが注目されているのか X(Twitter)で335いいね・40リツイートを集め、GitHubでも1700スターを獲得した「solygambas/html-css-javascript-projects」が話題になっています。私も実際に3週間使ってみたところ、作業時間が約35%削減され、驚くほどの効果を実感しました！このツールがなぜ開発者コミュニティで急速に広まっているのか、その理由と活用法を徹底解説します。
Next.js個人備忘録③：Next.jsでの開発に向けて、Tailwind CSSの基本を簡単にまとめてみた - Qiita
従来のようにCSSファイルでスタイルを定義するのではなく、HTMLに直接スタイルを付けられるため、デザイン作業のスピードアップが期待できます。 書こうと思ったきっかけ ITスクールの制作課題で「短期間で見栄えのするUIを作りたい」と思ったことがきっかけです。 CSSの記述量を減らしながらデザインの自由度を保てるTailwind CSSを知り、その仕組みを自分用にまとめておくことにしました。 Tailwind CSSとは？ Tailwind CSSは、ユーティリティファーストなCSSフレームワークで、HTMLに直接クラス名を記述することでスタイルを適用していくのが特徴です。 一般的なCSSのようにクラスを定義してから使うのではなく、既に用意された小さなスタイル単位（ユーティリティクラス）を組み合わせてUIを構築します。 参考文献 特徴 ユーティリティファースト：細かいスタイルごとにクラスが存
フォントをもっと自由に！ CSSのfont-variant活用術 - ICS MEDIA
font-variantプロパティを使用すると、フォントの特定のスタイルや装飾を制御できます。これは、OpenTypeフォントのさまざまな機能を有効化するためのプロパティであり、細かい文字の見た目を調整するために役立ちます。この記事では、font-variantの各種プロパティについて、とくに日本語フォントに役立つものに焦点を当てて紹介します。 font-variantプロパティを適用するには、使用するフォントが対応するOpenType機能をサポートしている必要があります。サポートされていない場合、指定したプロパティが適用されないことがあります。 font-variant-east-asian font-variant-east-asianプロパティはその名の通り、日本語や中国語など、東アジアの文字の字形を指定できます。指定できる値はいくつかありますが、その中から2つを紹介します。 fon
Web制作者は要チェック！ 今回は盛りだくさん、Chrome 135で新しく追加された14個のCSSの機能
Chrome 135で追加された、CSSの新しい機能14個を紹介します。 今回のアップデートで目玉はスクロールオフセットのサポート、レスポンシブな自由形式のシェイプを作成できるshape()関数、インタラクティブなスクロールボタンを作成できる::scroll-button()疑似要素など、Web制作者は要チェックです！ ちなみに、先日紹介したCSSのカスタム変数はChrome 139（7月頃）に実装される予定です。 New in Chrome 135 Chrome 135 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに アンカーポジショニングの記憶されたスクロール オフセット shape()関数 ::scroll-button()疑似要素 ::scroll-marker
HTMLとCSSで勉強すべきことがしっかりまとめられている、アクセシビリティやパフォーマンスを考慮した実装を学べる良書 -モダンHTML＆CSS 現場の新標準ガイド
※本ページは、アフィリエイト広告を利用しています。 最新のHTMLとCSSをしっかり学びたい人にお勧めの解説書を紹介します。 HTMLとCSSの最新の仕様に基づき、必要な知識を身につけ、アクセシビリティやパフォーマンスに考慮した実践的なテクニックをしっかり学べます。Web制作者が持っておいて間違いのない一冊です。 HTMLとCSSは機能が増えて自由度が高くなった分、複雑化しています。またアクセシビリティについての需要もかなり高まっています。 著者はHTMLやCSSをはじめ、JavaScriptの解説書などWeb制作系の解説書で、はずれ無しのエビスコム様。ていねいで詳しい解説は分かりやすく、実践的なサンプルもたくさんあるので、かなり役立つと思います。 本書は最新のHTMLとCSSの仕様に基づいて、アクセシビリティやパフォーマンスにも注目したセマンティックな実装をていねいに詳しく解説した解説書
本日（4/2）限り、HTML Living StandardとモダンCSSに完全対応した最新のリファレンス本が80％オフのワンコイン！
※本ページは、アフィリエイト広告を利用しています。 当ブログで紹介した際に大好評だったので、セールをずっとチェックしていたのですが、HTML Living StandardとモダンCSSに完全対応した最新のリファレンス本「HTML＆CSS全事典改訂4版」が本日（4/2）限り、なんと80％オフです！ 本書はHTMLとCSSのリファレンス本としてだけでなく、補足情報やテクニックの解説もかなり充実しており、Web制作者なら必ず持っておきたい一冊です。手元にあるリファレンス本が古いなと思った人には、特にお勧めします。 Kindle 日替わりセールなので、本日の4/2限り。 しかも、書籍価格2,420円が、80％オフの499円！ まさかのワンコインは絶対買いです！ 2024年12月24日に発売されたばかりで、このタイミングでワンコインになるのはかなりレアです。
ReactとCSSで一定時間表示される通知をやるときの色々な方法 - Qiita
フロントエンド、というよりUI一般では、ユーザーの操作に対してまったく無反応なのは良くありません。ユーザーが意味のある操作をしたならば、何らかのフィードバックを返すべきです。 例えば、何かをユーザーのクリップボードにコピーするボタンというのはありがちですが、クリップボードに何かを書き込んでもそれだけだと目に見える変化がないので、追加で「コピーしました」のような通知を出すというのはよくあるパターンです。 ここでは、そのような通知が、ちょっとフェードインしながら表示され、一定時間後にフェードアウトしながら消えていくという要件を想定することにしましょう。 transitionを使う基本的な実装 まずはReactの部分をざっくりお見せします。 import { useState } from "react"; import "./styles.css"; export default functi
事前に用意されたコンポーネントとユーティリティクラスでワークフローを強化する軽量でモダンなCSSフレームワーク・「StyleXui」 - かちびと.net
StyleXui StyleXuiは事前に用意されたコンポーネントとユーティリティクラスでワークフローを強化する軽量でモダンなCSSフレームワークです。 アコーディオンや通知、バッジ、フォーム、テーブルにナビゲーションなど基本的なUIコンポーネントに加えて、フォントサイズやカラー、背景、各サイズ設定、paddingやmarginなどなど、よくあるユーティリティクラスも用意された軽量なCSSフレームワークとなっています。 さらに、画像遅延表示やローディングなどのための小さなJavaScriptも備えてあり、一般的なWebサイトの構築の際にあると捗る要素が一式揃えられている印象です。 Ads CDNも用意されていますし、そもそも依存関係も無いので気軽に試せますね。 <link rel="stylesheet" href="https://cdn.stylexui.com/@v1.0.0-sta
cssと少しのJavaScriptで、ヘッダー追従要素あっても、それが被らないでスムーズスクロールを実装する - Qiita
まずはじめに ヘッダー部分に追従要素がある時、ページ内スクロールをすると、その追従要素が重なってくることがあると思います。 それをcssと少しのJavaScriptで解決しようという話です。 どう解決するか cssだけでスムーズスクロールとスクロールした時の余白を設定できるようになりました。 scroll-behavior https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior scroll-padding-top https://developer.mozilla.org/ja/docs/Web/CSS/scroll-padding-top これらを使って解決しようと思います。 <div id="content" class="content"> <nav id="nav" class="nav"> <a href="#
最近のCSSを改めてちゃんと学んでみた
弊社ではデザイナーがCSSを書いてくれるので、私はフロントエンドエンジニアながら最近はTypeScriptばかり書いていました。 しかし、フロントエンドエンジニアならCSSもしっかり学んでおかないといけないと思い、アウトプットついでにこの記事を書いています。 1. モダンCSSの現状と進化 2019-2024年に標準化された主要な機能 2019年以降、CSSには多くの革新的な機能が標準化され、JavaScriptに頼らずに実現できることが増えました。 レイアウト関連： コンテナクエリ - 親要素のサイズに基づくレスポンシブデザイン CSS Grid（サブグリッド） - ネストされたグリッドが親グリッドのトラックを継承 CSS ネスト - セレクタを入れ子構造で記述（Sassのような書き方） セレクタと制御： 親要素セレクタ (:has) - 子要素に基づいて親要素を選択 カスケードレイヤー
実は難しい！ CSSのborder-radiusで実装した角丸を矩形からスムーズにアニメーションさせるテクニック
CSSのborder-radiusで角丸を適用したボックスを拡大・縮小のアニメーションにするとき、最初は鋭角で、拡大したときには角丸になるようにしたいと思ったことはありませんか？ 下記のデモはうまく機能していますが、角丸が汚かったり、最初が鋭角の矩形にならなかったり、角丸をスムーズにアニメーションさせる際に遭遇する問題点とその解決方法を紹介します。 Smoothly animating a border-radius by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ビュー遷移による問題点 部分的な解決方法 変化する背景への対応 変化するボーダーへの対応 終わりに はじめに ビュー遷移（View Transitions）は、スナップショットをアニメーション化するため、任意の要素を別の要素に変形させる
2025-03-25のJS: Node.js v20.19.0、Valibot v1、CSS Relative Colors
JSer.info #729 - Node.js v20.19.0(LTS)がリリースされました。 Node.js — Node v20.19.0 (LTS) このリリースでは、Node.js 20.xにrequire(esm)機能がバックポートされ、ES ModulesをCommonJSから直接インポートできるようになりました。 また、あいまいなJavaScriptファイルをCommonJSとES Modulesのどちらとして扱うかを自動的に判定する--experimental-detect-moduleフラグがデフォルトで有効化されるようになりました。 バリデーションライブラリのValibot v1.0がリリースされました。 Valibot v1 - The 1 kB schema library | Valibot Valibotは、ZodやArkTypeなどと同じようにスキーマを定
ありがとう、さようならstyled-components
3月22日、styled-componentsチームは同プロジェクトの開発を事実上停止すると発表した。styled-componentsはReact環境におけるCSS-in-JSの代表格として広く普及し、Tagged Template Literalを用いた自然なAPIデザインにより、コンポーネント志向のスタイリング手法を大きく進化させた功績がある。特に、コンポーネント単位でCSSを管理できる利点とSSR（Server-Side Rendering）対応の柔軟性が注目され、多くのユーザーコミュニティを形成してきた。 しかし、ReactコアチームがContext API（移行パスがなくRSCでは利用できない）などを事実上非推奨としたことや、エコシステム全体の潮流がTailwindなどのユーティリティファーストなアプローチへ移行している現状が大きな転換点となった。加えて、styled-comp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「CSS効いてない。なんで！？」って2時間ぐらい悩んでたら、先輩に「Chromeのシークレットモードで見てみ？」って言われて秒で解決した。これエンジニア界の常識なのか？
ReactにおけるCSSの設計手法 - Qiita
