ドラッグでリサイズするUIを実装するときに設定したいCSS

2025/01/06 12 users 挙動 ドラッグ マウス テキスト 実装例

例えばサイドバーの幅をドラッグで調整できるUIを実装した時、以下のような症状に遭遇したことはありませんか？ ドラッグ中になんか引っかかる・スムースに反応しない マウスのボタンを離してもドラッグ中判定のままになってしまう ドラッグ中にテキストが選択されてしまう 僕はあります。 挙動が微妙な実装例 以下は上... 続きを読む

なぜ今さら、Web 標準 なのか【2025 年】 - Qiita

2025/01/04 6 users Qiita hono Remix フレームワーク HTML

2020 年代に入り、Remix や Hono といったモダンな Web フレームワークが「Web 標準」を掲げるようになりました。HTML、CSS、JavaScript といった基盤技術は 1990 年代から存在しているのにも関わらず、なぜ 30 年を経た今、 Web 標準が再び注目を集めているのでしょうか？ Web 標準について解説している記事はたくさん... 続きを読む

alt 属性完全解説 - Master of Alternative Text

2024/12/19 10 users Alt アクセシビリティ 属性 文書 HTML

キーワード：alt 属性, 代替テキスト, マシンリーダビリティ, Web アクセシビリティ, 支援技術, スクリーンリーダー この文書は、2024年12月17日に私 @debiru_R によって記述されました。私は2000年頃より HTML, CSS を研究し始めましたが、2013年頃から MDN Web Docs（旧 Mozilla Developer Network）の日本語訳コント... 続きを読む

2024年、Web制作者がチェックしておきたいCSSの新機能のまとめ

2024/12/19 118 users GitHub WEB制作者 一行 まとめ 新機能

今年もCSSの進化が早かった1年でした。一昔前にはJavaScriptや複雑なCSSを使用しないとできなかったことがたった一行、もしくは数行のCSSで簡単に実装できるようになりました。 2024年、Web制作者がチェックしておきたいCSSの新機能を紹介します。 CSS Wrapped 2024 CSS Wrapped 2024 -GitHub 下記は各ポイントを意訳し... 続きを読む

これがCSSだけで実装できるとはすごすぎる！ 窓から差し込む柔らかな日差しを実装 -sunlit

2024/12/18 15 users サッシ アニメーション シルエット スゴ技 観葉植物

CSSのスゴ技を見つけたので、紹介します。 画像は観葉植物のシルエットだけ、壁、サッシ、そして柔らかな日差しのアニメーションもCSSで実装されています。CSSで複数のぼかしを作り、CSSの回転・拡大縮小を利用してシルエッ...記事の続きを読む 続きを読む

CSSの「interactive-widget」キーワードを使用すると、スマホでキーボードを表示した時でも高さいっぱいに対応できる

2024/12/10 16 users 100vh 単位 バーチャルキーボード 期待通り これら

スマホで高さいっぱいにしたい時に、100vhが高さいっぱいにならず頭を悩ませていたときに、100svh, 100lvhの動的ビューポート単位が登場して、一時は解決したかに思いました。しかし、これらの単位だけではスマホでバーチャルキーボードなどを表示すると期待通りに機能しません。 このバーチャルキーボード表示時に頭を... 続きを読む

UI要素をグリッドではなく、サークル・放射状、曲線状にレイアウトできるCSSのフレームワーク -Orbit

2024/12/05 10 users 線形 Orbit グリッドベース レイアウト 従来

ラジアルUIとは、従来のグリッドベースまたは線形のレイアウトとは異なり、要素がサークル・放射状のパターンでレイアウトされたUIです。 このラジアルUI、あらゆる要素をサークル・放射状、または曲線状のパターンでレイアウトできるCSSのフレームワークを紹介します。 Orbit Orbit -GitHub Orbitの特徴 Orbitのデモ Or... 続きを読む

【2025年版】ReactとVue.jsどちらを選ぶべきか？【アドベントカレンダー2025】 - Qiita

2024/11/30 184 users Qiita React getter Vue.js HTML

TL;DR Vue.jsはHTMLをJavaScriptの中に書かなくて済むので、可読性が高いです Vue.jsは双方向バインディングをサポートしており、Reactみたいなsetter/getterみたいな無駄な作業は必要ありません Vue.jsはHTMLとCSSとJavaScriptを分けて記述することができるため、どこを修正すればいいか直感的です ReactはJSX内で{}と(... 続きを読む

Tailwind CSS v4 で導入される CSS First Configurations

2024/11/30 72 users テーマ 設定 ファイル内 変更点

Tailwind CSS v4 で導入される CSS First Configurations 2024.11.30 Tailwind CSS v4 における最も大きな変更点の 1 つは、CSS First Configurations です。今まで `tailwind.config.js` で設定していたテーマなどの設定を CSS ファイル内で行うことができるようになります。 続きを読む

イマのCSSでできる
インタラクション最前線 + CSS最新情報

2024/11/23 183 users イマ

クリエイティブ系のウェブサイト制作で役立つCSS技法 / CSS for develop creative website 続きを読む

CSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です

2024/11/21 249 users width Calc マージン かなり 左右

幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px); 便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCSSも変更する必要もあります。 そこでstretchキーワードを使用すると、便利です。要素はオーバーフローせずに使用可能な... 続きを読む

Web制作者は要チェック！ Chrome 131で新しく追加された8つのCSSの機能

2024/11/14 14 users アコーディオン 要チェック WEB制作者 機能 アップデート

Chrome 131で追加された、CSSの新しい機能8つを紹介します。 今回のアップデートでは、CSSのハイライト継承が変更されたり、details要素で実装するアコーディオンのCSSが追加されたり、ページ余白ボックスを使用した印刷レイアウトが簡単になるなど、Web制作者は要チェックです！ New in Chrome 131 Chrome 131 beta 下... 続きを読む

CSSのデバッグにAIがどのように役立つか、Chrome 131のデベロッパーツールでAIアシスタントが使えるようになります

2024/11/12 18 users デベロッパーツール デバッグ AIアシスタント 検証

CSSの検証やデバッグに、デベロッパーツールを使用している人も多いと思います。そんなデベロッパーツールですが、Chrome 131からAIアシスタントが使えるようになり、AIがCSSの検証やデバッグにどのように役立つかを紹介します。 5 Cool Things To Do with DevTools AI Assistance AI assistance panel AI assistance fo... 続きを読む

2024年、CSSの最新トレンドにおける現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証環境など

2024/11/07 15 users フレームワーク プロパティ エバーグリーン 疑似クラス 現状

CSSの進化は速く、IEのサポートが終了してさらに速くなりました。現在はエバーグリーンのブラウザ（最新版に自動アップデートするブラウザ）となり、モダンCSSの新機能が今までよりもすぐに使用できるようになっています。 2024年、CSSの現状調査をおこなった結果をまとめた「State of CSS 2024」を紹介します。今年は例... 続きを読む

CSSで文節の折り返しを！ br・wbrとauto-phraseの活用術 - ICS MEDIA

2024/11/06 132 users 文節 ICS MEDIA 活用術

ウェブでのテキストの折り返しは、HTMLコーダーにとって意外と難しい分野です。多様な画面サイズが存在する現代では、適切なテキストの折り返しについて悩むことが少なくありません。 この記事で紹介する折り返しとは、以下のようなテキストの区切りの良い場所で改行するかどうかです。 ▼固定幅で折り返し どこで生れた... 続きを読む

CSSだけでスタイルクエリのサポートを確認する方法、Safari 18のバグを回避する方法も

2024/11/06 10 users コンテナ パク スタイルクエリ ラベル テクニック

スタイルクエリとは、親要素のスタイルに応じて子要素のスタイルを適用するCSSの機能です。たとえば、カードのコンテナがあり、カードによってラベルやボタンのスタイルを変更したい場合などに便利です。 このスタイルクエリがブラウザにサポートされているかをCSSだけで確認するテクニックを紹介します。 Feature detec... 続きを読む

ついにCSSだけでwidth: auto;やheight: auto;へのアニメーションができるようになります

2024/10/31 49 users auto height width アニメーション テキスト

CSSだけでwidth: auto;やheight: auto;にアニメーションできたらいいな、と思ったことはありませんか？ たとえば、下記のようにテキストの量によってサイズが異なるボタンです。 これまではCSSでアニメーションするときは、固定値（width: 100px;しかアニメーションが機能しませんでしたが、Chrome 129でサポートされたi... 続きを読む

これは便利なVS Codeの機能拡張！ CSSのclamp()関数を使ったレスポンシブ対応のフォントサイズが簡単にできる -Clamp It!

2024/10/24 70 users CLAMP フォントサイズ 関数 実装 レスポンシブ対応

CSSの実装に便利なVS Code用の機能拡張がリリースされました！ レスポンシブ対応のフォントサイズをCSSで定義するときに、面倒なclamp()関数の定義を簡単にできるClamp It!を紹介します。 Clamp It! -GitHub Clamp It! -Visual Studio Marketplace レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義 Clamp It!... 続きを読む

［作って学ぶ］ブラウザのしくみ──HTTP、HTML、CSS、JavaScriptの裏側

2024/10/21 331 users リソース 本書 目次 通信プロトコル クライアント

はじめに 本書を読むにあたって 目次 第1章：ブラウザを知る──Webサイトを表示するアプリケーション ブラウザの役割❶──Webクライアントとしてのブラウザ クライアント／サーバモデル Webクライアント Webサーバ インターネットとWeb 通信プロトコル HTTP URLによるリソースの指定 DNS ブラウザの役割❷──レンダリングエン... 続きを読む

最近リリースされたCSSの新機能と新しい関数のまとめ

2024/10/16 18 users 新しい関数 ワーキングドラフト まとめ 新機能 プロパティ

CSSは気がつくと、どんどん進化しています！ 先月リリースされたCSS Values and Units Module Level 5のワーキングドラフトでは新しい値と単位、プロパティ、関数が追加されました。それらの新機能と新しい関数を紹介します。 計算値にキーワード（auto, max-conetntなど）を使用できるcalc-size()関数、ランダムな値を... 続きを読む

これでCSSのみで実装できる！ スクロール方向に合わせてヘッダを非表示・表示する方法を解説

2024/10/10 126 users ヘッダ hide スクロール方向 解説 JavaScript

Webページを表示し、スクロールダウンするとヘッダが非表示になり、ページのどこからでもスクロールアップするとヘッダが再び表示される、というのを見たことがあると思います。 これまでは実装するにはJavaScriptが必要でしたが、CSSのみで実装できる方法を紹介します。 Solved by CSS Scroll-Driven Animations: hide ... 続きを読む

便利なJavaScriptライブラリが登場！ CSSのプロパティの値の変更を検出できる -CSSStyleObserver

2024/10/08 10 users MutationObserver DOMツリー プロパティ

DOMツリーに加えられた変更を検出する機能としてMutationObserverが便利ですが、CSSのプロパティの値は検出できません。 最近ではCSSアニメーションを使用したWebサイトやスマホアプリも増え、プロパティ値の変更に応じてコールバックを実行する必要があるかもしれません。CSSのプロパティの値の変更を検出するための新... 続きを読む

CSSでラジオボタンとラベルの間にスペースを加えると、関連付けがうまくいかないときの対応方法

2024/10/03 6 users 謎スペース 無反応 通常 ラベル 問題

ラジオボタンとラベルの間にクリックしても反応しない謎スペースができてしまったことはありませんか？ 通常であれば、フォームコントロールとラベルの関連付けが機能し、クリックするとラジオボタンが選択されますが、謎スペースは無反応です。なぜ謎スペースができてしまったのか、そしてこの問題を解決する方法を紹介... 続きを読む

CSSでdisplay:none;からアニメーションができる！ @starting-styleがすべてのブラウザにサポートされました

2024/10/01 16 users None display Firefox アニメーション 要素

CSSの@starting-styleが先日リリースされたFirefoxでもサポートされ、これでデスクトップ・スマホのすべてのブラウザでサポートされました。 @starting-styleはアニメーション化させる要素に対して開始時のスタイルを設定でき、display: none;からアニメーション化する要素に対して必須となります。 Now in Baseline: an... 続きを読む

HTMLのselect要素がCSSでカスタマイズ可能になる

2024/09/30 12 users select要素 HTML カスタマイズ セレクトボックス

select 要素がカスタマイズできるようになる これまで HTML の<select>要素はカスタマイズが難しい部分でした。各ブラウザのデフォルトスタイルに依存しデザインや機能を統一するのが困難でした。かといってオリジナルのセレクトボックスを作成するとなると CSS と JavaScript でイチから作成する必要がありました。 し... 続きを読む