MDN MCPサーバー（実験的）入門｜Claude・Codex・VS CodeにMDNの最新CSS情報を接続してみた
AIがCSS仕様を間違える理由は「知識が古いから」。MDNが2026年6月に公開した実験的なMCPサーバーを使うと、Claude CodeやVS CodeのAIエージェントがMDNの最新ドキュメントとブラウザー互換性データをリアルタイムに参照できるようになります。設定手順から初心者がつまずくポイントまで、実際に使う視点でまとめました。
タグ
#HTML・CSS
「HTML・CSS」タグが付いた記事の一覧です。
Interop 2026で何が変わる？Popover・View Transitions・Anchor Positioningを初心者向けに解説
Interop 2026で注目されるCSS・JS新機能（Popover API・View Transitions・Anchor Positioning）を初心者向けにわかりやすく解説。従来のJavaScriptやCSSとの違い、実際の使いどころ、ブラウザ対応状況まで整理しました。
GPT-6 Astraとは？｜Web制作・ブラウジング・コーディングでの使いどころ
OpenAIが2026年9月3日に発表したGPT-6 Astra。ブラウジング・コーディング・Web制作など複数の用途に対応した最上位モデルの特徴と、実務での使いどころをわかりやすく解説します。
Chromeが2週間リリースへ移行｜社内Web担当者が今すぐ始める表示崩れ・機能テストの新しい進め方
2026年9月8日からChromeの安定版リリースが4週間から2週間サイクルに変わりました。サイトの表示崩れや機能の不具合を早期にキャッチするため、社内Web担当者が今日から実践できるテスト運用の手順をわかりやすく解説します。
プログラミング向けBenQ RD280UGをレビュー｜3:2画面はWeb制作に便利？
BenQ RD280UGを、一般的な27インチ4Kモニターと比較。28.2型・3:2・120Hz・USB-C 90W給電が、Web制作やWordPress運用でどう役立つのかを初心者向けに解説します。
CodexとFigmaの連携入門｜コードからWebデザインを生成・修正する方法
CodexとFigma MCP Serverを使い、Figmaのデザインをコードに反映したり、コードから編集可能なFigmaデザインを作ったりする流れを初心者向けに解説します。従来の制作方法との違い、具体的な操作手順、料金の確認ポイント、つまずきやすい点までまとめました。
WebMCPはまだ実験段階？AIエージェント対応サイトをLighthouseで確認する設計チェックリスト
AIエージェントがフォームやサイト機能を操作しやすくするための考え方を、WebMCPとLighthouseの確認手順、初心者がつまずきやすいポイントとともに整理します。
Claude Sonnet 5.5入門｜Web制作と日常業務での使い分け
Claude Sonnet 5.5をWeb制作や社内業務で使う方法を、初心者向けに解説します。HTML・CSSの修正、JavaScriptのエラー確認、文章作成、モデル選び、料金、具体的な操作手順まで紹介します。
Chrome 154でCSSとiframeが進化｜scroll-marker-group・text-decoration-inset・frame-sizingを解説
Chrome 154で追加されたscroll-marker-group、text-decoration-inset、レスポンシブiframeを実装目線で整理します。従来との違いや使い方、料金、導入時の注意点を確認できます。
Google Fontsの使い方｜linkタグ・@import・複数フォント・ウェイト指定
Google Fontsの読み込み方法（linkタグ推奨・@import）、複数フォントの一括読み込み、ウェイト指定までコード付きで解説します。
モダンCSS関数サンプル集｜aspect-ratio / calc / clamp / min / max
aspect-ratio・calc()・clamp()・min()/max() の4つのモダンCSS関数をプレビュー＋コード付きで解説。@mediaなしのレスポンシブ対応など実務で使えるテクニックをまとめています。
背景に動画を設置する方法｜videoタグ＋position/flex 2パターン解説
HTMLのvideoタグを使って背景動画を設置する方法を2パターン解説。position: absolute方式とflex方式のプレビュー＋コード付きで、autoplay・muted・playsinlineなどの注意点もまとめています。
CSS Gridパターン・レイアウト集｜よく使う10パターンをコード付きで解説
CSS Gridのよく使うパターンをプレビュー＋HTML/CSSタブ付きコードでまとめたリファレンス記事。等幅カラム・auto-fill・セル結合・名前付きエリア・dense・レスポンシブ対応まで全10パターンを解説します。
Flexboxパターン・レイアウト集｜よく使う配置からサイト構成まで
Flexboxのよく使うパターンとサイトレイアウトを、プレビュー＋HTML/CSSタブ付きコードでまとめたリファレンス記事です。横並び・中央揃え・両端揃え・折り返し・サイドバー・レスポンシブ対応まで網羅しています。
AIでスクロール読了率を表示するプログレスバーを作る【CSS＋JS生成】
AIでスクロール読了率プログレスバーを生成する方法。scrollYとscrollHeightを使ってwidthを動的に変化させるCSS+JSをプロンプト例・コード付きで解説します。
AIでテキストが1文字ずつ打ち込まれるタイピングアニメーションを作る【CSS＋JS生成】
AIでタイピングアニメーションを生成する方法。1文字ずつ表示するJS・カーソル点滅CSS・複数フレーズのループまでプロンプト例・コード付きで解説します。
AIで星評価（レーティング）UIを作る【CSS＋JS生成】
AIで星評価UIを生成する方法。ホバーで点灯・クリックで確定するインタラクションをCSS+JSで実装。プロンプト例・コード付きで初心者向けに解説します。
AIでボタンのホバーエフェクトを作る【CSS生成・5パターン】
AIでボタンのホバーエフェクトを5パターン生成する方法。スライド・アウトライン・矢印・リップル・フロートの各CSSをプロンプト例・コード付きで解説します。
AIでローディングスピナーをデザインする【CSS生成】
AIでローディングスピナーのCSSアニメーションを生成する方法。@keyframesとborderを使ったスピナーをプロンプト例・コード付きで初心者向けに解説します。
CSS floatパターン集｜レイアウトの仕組みと現代との比較
float: left/right の基本からclearfix・2/3カラムレイアウトまで、float時代のCSS技術をコード付きで解説。Flexbox・Gridとの比較も収録。
AIで画像クリックで拡大表示するライトボックスを作る【CSS＋JS生成】
AIで画像クリック拡大ライトボックスを生成する方法。フェードアニメーション・ESCで閉じる・背景クリック対応のCSS+JSをプロンプト例・コード付きで解説します。
AIでh1タイトルをグラデーションにする方法【CSS自動生成】
AIを使ってh1タイトルをグラデーション文字にするCSSを自動生成する方法を紹介。既存HTMLへの追加と、HTMLごと生成する2パターンのプロンプト例・コード例を解説します。
AIで入力フォームのバリデーションUIを作る【CSS＋JS生成】
AIでフォームバリデーションUIを生成する方法。必須チェック・メール形式チェック・エラー表示のCSS+JSをプロンプト例・コード付きで解説します。
AIでスライドショーのボタン・インジケータをデザインする【CSS＋JS生成】
AIでスライドショーの左右ボタン・ドットインジケータをデザインする方法。既存HTMLへのCSS+JS追加と、HTMLごと生成する2パターンのプロンプト・コード例を紹介します。
AIでスクロール固定エリア内に展開するコンテンツを作る【CSS＋JS生成】
AIでスクロール固定サイドバー内のアコーディオンUIを生成する方法。position:stickyと開閉アニメーションのCSS+JSをプロンプト例・コード付きで解説します。
AIでホバーすると浮き上がるカードデザインを作る【CSS生成】
AIでホバー時に浮き上がるカードデザインのCSSを生成する方法。translateYとbox-shadowを使ったホバーエフェクトをプロンプト例・コード付きで解説します。
AIでモーダルウィンドウを作る【CSS＋JS生成】
AIでモーダルウィンドウを生成する方法。背景オーバーレイ・フェードアニメーション・×ボタンで閉じる機能まで、CSS+JSのプロンプト例とコードを紹介します。
AIでハンバーガーメニューを作る【CSS＋JS生成】
AIでハンバーガーメニューを生成する方法。三本線が×に変化するアニメーションとナビの開閉をCSS+JSで実装。プロンプト例・コード付きで解説します。
AIでタブ切り替えUIを作る【CSS＋JS生成】
AIでタブ切り替えUIを生成する方法。data属性でタブとコンテンツを紐付け、アクティブタブの強調とコンテンツ切り替えをCSS+JSで実装。プロンプト例・コード付きで解説します。
AIでスクロールしたら要素がフェードインするアニメーションを作る【CSS＋JS生成】
AIでIntersection Observer APIを使ったスクロールフェードインアニメーションを生成する方法。CSS+JSのプロンプト例・コードを初心者向けに解説します。