GoogleのModern Web Guidanceスキル登場。AIが古いCSS・JSを書く問題を解決する
AIにフロントエンドのコードを書かせると、一昔前の書き方をされて困ることがよくあります。 私のAIの使い方が悪いというのは前提にありつつ、最新の書き方を選んでくれないことが何度もあります。たとえばCSSではSubgridを使ってほしい場面でわざわざ古いGridのネストを書いてくる。JavaScriptではObject.groupByで済むグループ化をreduceで書いてくる。さらに当たり前品質として押さえるべきアクセシビリティが漏れたり、最新のセキュリティ対策が抜けたコードを書いてくることもあります。これはサービスの品質低下に直結します。 5/19にGoogle公式がGoogle I/Oで発表した「Modern Web Guidance」のスキルを使えば、Claude CodeやCodexといったAIエージェントが最新のWeb機能で書けるようになります。フロントエンド開発をするならぜひ導入
2025-12-30のJS: Next.js 16.1、Vue 3.6.0 beta 1、CSS Wrapped 2025
JSer.info #759 - Next.js 16.1がリリースされました。 Next.js 16.1 | Next.js TurbopackのFile System Cacheがnext devでも利用できるようになり、開発サーバー再起動時のコンパイル時間が短縮されています。また、Node.jsデバッガーを簡単に有効化できるnext dev --inspectコマンドや、バージョンアップグレードを補助するnext upgradeコマンドが追加されています。実験的機能としてBundle Analyzerが追加されています。 Vue 3.6.0 beta 1がリリースされました。 Release v3.6.0-beta.1 · vuejs/core Vapor Modeがベータ版として追加されています。Vapor Modeは仮想DOMを使わないコンパイル戦略で、バンドルサイズ削減とパフォ
【実践解説】Html Css Javascript Projects - Web開発で開発効率を劇的に向上 - Qiita
【実践解説】Html Css Javascript Projects - Web開発で開発効率を劇的に向上 🔥 なぜ今このツールが注目されているのか X(Twitter)で335いいね・40リツイートを集め、GitHubでも1700スターを獲得した「solygambas/html-css-javascript-projects」が話題になっています。私も実際に3週間使ってみたところ、作業時間が約35%削減され、驚くほどの効果を実感しました！このツールがなぜ開発者コミュニティで急速に広まっているのか、その理由と活用法を徹底解説します。 📑 目次 🎯 このツールで解決できる課題 📊 導入効果・実績 💻 セットアップ手順 🚀 実装例と活用シナリオ ⚖️ 競合ツールとの比較 🔧 トラブルシューティング 🔮 応用例とカスタマイズ 📝 導入判断のポイント 🎯 このツールで解決できる
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 だけでフォームバリデーションが超進化！JavaScript不要の裏技公開！ - コハム
Enhance Your Form Validation with Pure CSS — No JavaScript Needed! 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ユーザーが入力フィールドと対話する際にリアルタイムの視覚的フィードバックを提供するなど、フォームに追加のバリデーションを設けることを考えたことはありますか？例えば、正しい入力には緑色の枠線を表示し、不正な入力には赤色の枠線を表示するといった具合です。通常、これを実現するにはJavaScriptやReactなどが必要で、少し複雑になることがあります。しかし、CSSだけでこれを実現できるとしたらどうでしょうか？嘘ではありません — 実際に可能なのです！ シンプルなフォームの作成 有効および無効な状態にCSSを適用する :user-validと:user-inval
ESLintがCSSの構文検証など正式サポート、MarkdownやJSONのサポートに加えて
JavaScriptなどのコードを静的に解析し、構文や基本的なエラーのチェックやコーディングスタイルへの統一などを行ってくれる、いわゆるリントツール（あるいはリンティングツール）「ESLint」が、CSSの構文やコーディングスタイルの検証もサポートしたことが発表されました。 ESLint now officially supports linting CSS! Read more:https://t.co/bCK6kFj2B0 — ESLint (@geteslint) February 18, 2025 CSSのサポートは、公式の言語プラグインである@eslint/cssプラグインによって行われます。 CSSのリンティングでは、デフォルトでは可能な限り厳密にコードを解析し、途中で見つかったすべてのエラーを強調表示します。ただし通常、WebブラウザにおけるCSSの解析ではエラーリカバリー機
JSとCSSで中央寄せがなぜかズレる - Qiita
#はじめに JSを使用して要素の中央揃えを作成した時、なぜかCSSのフレックスボックスと中心がずれる場合があるので調べてみました 検証用コード 要素を3つ用意し 1.CSSのフレックスボックスを使用して中央揃えしたもの 2.JSの window.outerWidth を使用し計算を行い中央揃えしたもの 3.JSの window.innerWidth を使用し計算を行い中央揃えしたもの を作成しどういった場合に中央揃えがずれるのかを検証してみます <style> .frame{ /* height: 10000px; */ } .flex{ display: flex; justify-content: center; align-items: center; } .box{ width: 100px; height: 100px; color: white; } #box1{ backgr
2025-02-24のJS: Create React Appが非推奨に、Deno 2.2、Bun 1.2.3、ESLintのCSSサポート
JSer.info #726 - Create React Appが非推奨となりました。 Sunsetting Create React App – React create-react-appは非推奨となり、Reactを使ったフレームワークやVite/Parcel/Rsbuildなどのビルドツールへの移行が推奨されています。 Deno 2.2がリリースされました。 Deno 2.2: OpenTelemetry, Lint Plugins, node:sqlite lintのビルトインルールの追加、JavaScriptで書けるLint Plugin APIの追加、deno taskがwildcard(*)指定に対応しています。 また、deno outdatedにinteractive modeを追加、deno compileの改善なども含まれています。 unstableな機能としてOpe
HTML / CSS / JavaScript 制作 Tips 番外編 - Qiita
HTML / CSS / JavaScript 制作 Tips 番外編 user: ChatGPT先生、先日はHTML/CSS/JavaScript を用いたWebページ制作の初級編・中級編・上級編として次の３０項目を教えていただきました。 初級編のTips 10個： HTMLタグは必ず閉じるように心掛けてや。メンドクサイけんど、閉じ忘れが原因でエラー起こることもあるんじゃ。 CSSは外部ファイルで管理する方が整理整頓やし、保守や改修も楽よ。ほなら、あんたのコードもすっきりと！ やはよう使うけど、セマンティックなタグを使うとSEOにも好影響よ。シンプルでも、意味をもったタグがあるけん、活用しとき。 CSSのセレクタ優先度を理解しとき。この順なら、「ID」「クラス」「タグ」よ。覚えておき。 JavaScriptでDOM要素を扱うときは、getElementByIdやquerySelector
HTML / CSS / JavaScript 制作 Tips 中級編 - 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 制作 Tips 中級編 user: ChatGPT先生、先日はHTML/CSS/JavaScript を用いたWebページ制作の初級編について教えてくださり、ありがとうございました。今日は中級編として、以下の10個の項目について詳しく教えてください。 レスポンシブデザインに対応するにはCSSのメディアクエリを使うとええよ。 モダンJavaScriptでは、アロー関数がよく使われるわ。覚えときなり。 CSSでflexboxやgridを使うと、レイアウト作成が手軽になるの。 画像やフォントはな
HTML / CSS / JavaScript 制作 Tips 上級編 - 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 制作 Tips 上級編 user: ChatGPT先生、先日はHTML/CSS/JavaScript を用いたWebページ制作の初級編・中級編について教えていただき、ありがとうございました。今日は上級編として、次の１０項目について詳しく教えてください。 パフォーマンス最適化のために、クリティカルCSSの使用や画像の遅延読み込みを検討しとき。 JavaScriptを使ってデバッグ作業を効率化する方法を覚えるのがええし。コンソールAPIとかね。 RESTやGraphQLによるAPIの設計と使用
CSSのattr()関数がパワーアップ！ また一つJavaScriptでしかできなかったことがCSSだけでできるになります
CSSのattr()関数は、HTMLの属性に記述した値をCSSで使用できる便利な機能です。たとえば、hrefに記述した値をリンクとして表示したり、titleに記述した値を画像のキャプションとして表示したり、data-でさまざまな値を表示することができます。 このattr()関数がよりパワーアップします。 これまではcontentプロパティだけでしたが、任意のプロパティで使用できるようになり、<string>以外のデータ型も使用できるようになります。 HTMLに記述したカラー値やidの値をCSSで使用することもできます。これでまた一つ、JavaScriptでしかできなかったことができるようになります。 CSS attr() gets an upgrade by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめ
2024-10-29のJS: Svelte 5、MSW v2.6.0(WebSockets API)、State of CSS 2024
JSer.info #713 - Svelte 5がリリースされました。 Svelte 5 is alive Svelte 5では、Runesと呼ばれる構文とReactiveの仕組みがサポートされています Svelte 4の構文は引き続きサポートされていますが、マイグレーションガイドではRunesへの移行方法が紹介されています。 Svelte 5 migration guide • Docs • Svelte MSW v2.6.0がリリースされました。 Release v2.6.0 · mswjs/msw MSW v2.6.0では、WebSockets APIのモックがサポートされました。 詳細は次のドキュメントを参照してください。 Handling WebSocket events - Mock Service Worker ws - Mock Service Worker State
サイト模写を通じたWeb開発学習: CSS, HTML, JavaScriptの活用法 - Qiita
Web開発の基礎技術であるCSS、HTML、JavaScriptを使い、実際に既存のサイトを模写する学習に挑戦しました。この記事では、その学習プロセスを要約し、特にIDやクラスの使用、スタイルの適用、そしてJavaScriptによる動的な機能の追加に焦点を当てています。 HTMLの基礎 HTMLはウェブページの骨組みを構築するための言語です。HTMLを書く際には、<div>、<header>、**<nav>**などのタグを使用して、ページの構造を定義します。模写したサイトでは、ハンバーガーメニューを含むレイアウトが特徴でした。以下はその基本的なHTML構造です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サイト名</title> <link rel="stylesheet" href="sty
便利なJavaScriptライブラリが登場！ CSSのプロパティの値の変更を検出できる -CSSStyleObserver
DOMツリーに加えられた変更を検出する機能としてMutationObserverが便利ですが、CSSのプロパティの値は検出できません。 最近ではCSSアニメーションを使用したWebサイトやスマホアプリも増え、プロパティ値の変更に応じてコールバックを実行する必要があるかもしれません。CSSのプロパティの値の変更を検出するための新しいライブラリを紹介します。 Introducing @bramus/style-observer, a MutationObserver for CSS by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ライブラリのデモ ライブラリのインストール ライブラリの使い方 ライブラリの仕組み ライブラリのサポートブラウザ カスタムプロパティのトランジションに関する注意事項 はじめに
JavaScriptを忘れて、CSSだけでモーダルを創造する - Qiita
はじめに Webアプリケーションではユーザーとの対話を効果的に行うため、モーダルウィンドウ（モーダル）がよく利用されます。JavaScriptを駆使して制御するのが一般的ですが、それが必ずしも必要なわけではありません。今回は、JavaScriptを一旦忘れて、CSSのみを使って綺麗なモーダルを作成する方法を紹介します。 ここでは自分なりに考えた方法を紹介しているので、ぜひコメントで他の方法やアイデアを教えてください！ モーダルを表示する まず、モーダルの表示をCSSだけで実現します。 基本的にはクリックされた時に状態が切り替わるタグを利用して、表示を制御します。 checkboxを使う場合 checkboxにチェックが入ったかどうかに応じてモーダルの表示を制御します。 紐づけるlabelは複数配置できるので、表示ボタンと閉じるボタンに利用しています。 See the Pen CSSModa
CSSとJSの変数管理でイライラしてない？CSSのenv()関数をマスターしよう - コハム
Why you should use CSS env() 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 共有のCSSとJavaScript値を最新の状態に保ち、同期させるのに苦労していますか？共有値を更新する際に、一見ランダムなバグに直面していますか？この記事では、近日公開予定のCSS env() 機能とPostCSSプラグインを使用して、CSSとJS間で同じ変数を共有し、さらにそれらを単一のファイルに保存する方法を紹介します。 よくある以下のシナリオに遭遇したことがあるかもしれません： 比較的複雑なレスポンシブデザインを実装する必要がある CSSセレクターと calc() だけではデザインに影響を与えられないため、信頼できる友人であるJavaScriptに頼る 問題を解決するために、JavaScript からCSS値（例：コンテナのサ
Safari 18.0リリース — 最注目のView Transitions APIなど、Web開発者向けの機能を一挙紹介
9月17日、AppleはSafari 18.0をリリースした。iOS 18、iPadOS 18、macOS Sequoia、そしてvisionOS 2と共に、53の新しいウェブプラットフォーム機能、25の非推奨機能、そして209の修正が加えられた。このリリースでは、特にCSS、HTML、JavaScriptの新機能に注目すべき点が多く、Webエンジニアにとっては重要なアップデートである。 Safari 18.0における新機能 1. Distraction Control Safari 18では「Distraction Control」が導入された。この機能により、ウェブ閲覧中に表示されるサインインバナーやクッキー通知、ニュースレターのサインアップオーバーレイなど、煩わしい要素を非表示にできる。Distraction ControlはiOS 18、iPadOS 18、macOS Sequoi
「Web開発における近年最も重要な進歩の1つ」 ー JavaScriptを使わないビュー遷移を実現するView Transition APIをAstroがサポート
6月12日、The Astro Blogで「JavaScript を使わないビュー遷移(Zero-JavaScript View Transitions)」と題した記事が公開された。この記事では、JavaScriptを使用せずに、ネイティブアプリライクなビュー遷移を実現するための新しいプラットフォームAPIについて詳しく紹介されている。 Zero-JavaScript View Transitions View Transitions APIは、ページ間のネイティブなブラウザ遷移を可能にするAPIのセットである。歴史的には、これが可能だったのはJavaScriptを多用するシングルページアプリケーション(SPA)だけだったが、最近の進歩により、ネイティブなページ遷移がウェブプラットフォームに導入されている。 AstroユーザーはAstro 2.9以来、ビュー遷移への早期アクセスが可能となっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
［作って学ぶ］ブラウザのしくみ──HTTP、HTML、CSS、JavaScriptの裏側 - yamaScrapbox