MDN MCPサーバー（実験的）入門｜Claude・Codex・VS CodeにMDNの最新CSS情報を接続してみた
AIがCSS仕様を間違える理由は「知識が古いから」。MDNが2026年6月に公開した実験的なMCPサーバーを使うと、Claude CodeやVS CodeのAIエージェントがMDNの最新ドキュメントとブラウザー互換性データをリアルタイムに参照できるようになります。設定手順から初心者がつまずくポイントまで、実際に使う視点でまとめました。
タグ
#Web基礎知識
「Web基礎知識」タグが付いた記事の一覧です。
Interop 2026で何が変わる？Popover・View Transitions・Anchor Positioningを初心者向けに解説
Interop 2026で注目されるCSS・JS新機能（Popover API・View Transitions・Anchor Positioning）を初心者向けにわかりやすく解説。従来のJavaScriptやCSSとの違い、実際の使いどころ、ブラウザ対応状況まで整理しました。
Chromeが2週間リリースへ移行｜社内Web担当者が今すぐ始める表示崩れ・機能テストの新しい進め方
2026年9月8日からChromeの安定版リリースが4週間から2週間サイクルに変わりました。サイトの表示崩れや機能の不具合を早期にキャッチするため、社内Web担当者が今日から実践できるテスト運用の手順をわかりやすく解説します。
WebMCP入門｜AIエージェント対応を試せる実験的Origin Trialの始め方
WebMCPは、WebサイトのフォームやJavaScript機能をAIエージェント向けの操作ツールとして公開する仕組みです。Chrome 149で始まった実験的なOrigin Trialについて、従来のWeb操作との違い、登録から試作までの流れ、初心者がつまずきやすい点を解説します。
my.WordPress.net入門｜ブラウザだけで始めるAI対応WordPress制作
サーバー契約やドメイン設定なしでWordPressを試せるmy.WordPress.netについて、従来の環境との違い、始め方、AIアシスタントの使い方、注意点を初心者向けに解説します。
ディスプレイおすすめ2026｜Web制作初心者向け27インチ4K・USB-C・縦置き対応
LG 27U730A-Bを中心に、Web制作初心者が確認したい27インチ4K、USB-C給電、縦置き対応の特徴をレビュー形式で解説します。価格の見方やAmazon・楽天で探すときのポイントも紹介します。
Chrome DevTools MCPの最新機能｜AIエージェントの安全なJS実行・メモリ解析・PWAテスト
Chrome 153・154のStable版で追加されたChrome DevTools MCPの新機能を初心者向けに解説。JavaScript実行の制御、メモリ解析、PWAテストの使いどころと注意点を整理します。
WordPressの新セキュリティ対策「Protect The Shire」｜プラグイン自動更新の変更点
WordPress.orgが2026年6月に発表した「Protect The Shire」について解説します。プラグインやテーマの自動更新に最大24時間の待機時間が設けられた背景、従来との違い、料金、初心者や社内担当者が確認すべきポイントをまとめました。
WebMCPとは？AIエージェント対応を試せる実験的なWeb標準の提案
WebMCPは、WebサイトのJavaScript関数やHTMLフォームをAIエージェント向けの操作ツールとして公開する提案です。できること、従来との違い、初心者向けの試し方、料金、注意点をわかりやすく解説します。
Chrome 154でCSSとiframeが進化｜scroll-marker-group・text-decoration-inset・frame-sizingを解説
Chrome 154で追加されたscroll-marker-group、text-decoration-inset、レスポンシブiframeを実装目線で整理します。従来との違いや使い方、料金、導入時の注意点を確認できます。
Retinaディスプレイとレスポンシブ画像の基本｜なぜ2倍サイズの画像が必要なのか
Retinaディスプレイでなぜ画像がぼやけるのか、その仕組みをピクセルの基礎から解説。srcset・picture・sizes属性の使い方、CSS背景画像のRetina対応まで、初心者がつまずきやすいポイントをまとめて解説します。
301リダイレクトとは｜URLを変えたときにSEO評価を引き継ぐ方法
301リダイレクトの意味と302との違い、WordPressでの設定方法（.htaccess・Redirectionプラグイン）を初心者向けにわかりやすく解説。URLを変えてもSEO評価を引き継ぐ正しいやり方を紹介します。
CSS Gridパターン・レイアウト集｜よく使う10パターンをコード付きで解説
CSS Gridのよく使うパターンをプレビュー＋HTML/CSSタブ付きコードでまとめたリファレンス記事。等幅カラム・auto-fill・セル結合・名前付きエリア・dense・レスポンシブ対応まで全10パターンを解説します。
Flexboxパターン・レイアウト集｜よく使う配置からサイト構成まで
Flexboxのよく使うパターンとサイトレイアウトを、プレビュー＋HTML/CSSタブ付きコードでまとめたリファレンス記事です。横並び・中央揃え・両端揃え・折り返し・サイドバー・レスポンシブ対応まで網羅しています。
サーバーの選び方｜目的・規模・将来性で最適なサーバーを選ぼう
Webサイト公開に必要なサーバーの選び方を解説。共有サーバー・VPS・クラウドサーバーの違いと比較表、個人情報を扱うサイトの注意点、将来のサーバー移行を見据えたドメイン取得のポイントまでわかりやすく紹介。かんたん診断でおすすめサーバーが見つかります。
CSS floatパターン集｜レイアウトの仕組みと現代との比較
float: left/right の基本からclearfix・2/3カラムレイアウトまで、float時代のCSS技術をコード付きで解説。Flexbox・Gridとの比較も収録。
配色選びの実践テクニック｜カラーホイールと心理効果を活かした色の選び方
Webデザインにおける配色の基本理論から実践的な選び方まで。カラーホイールの活用法と色が与える心理的効果を解説します。
フォント選びとタイポグラフィ｜可読性と印象を両立させるWebフォントの活用法
Webデザインにおけるフォント選びとタイポグラフィの基礎。可読性・印象・パフォーマンスを考慮した選び方を解説します。
SEO対策の基礎知識｜検索上位を狙うためのオンページSEO実践ガイド
SEO対策の基本概念から、タイトルタグ・メタディスクリプション・コンテンツ最適化まで、オンページSEOの実践手順を解説します。
SEO（検索エンジン最適化）の基本
HTML・CSS・JavaScriptの学習を締めくくる総まとめ記事。コーディングでよく起こるトラブルの対処法、SEOの基本知識、セマンティックタグの使い分け、デザイン制作への応用までを体系的に解説します。
HTML / CSS / JS まとめ｜コーディングの落とし穴・SEO・セマンティックタグの使い分け
HTML・CSS・JavaScriptの学習を締めくくる総まとめ記事。コーディングでよく起こるトラブルの対処法、SEOの基本知識、セマンティックタグの使い分け、デザイン制作への応用までを体系的に解説します。
VS Codeの導入と基本操作ガイド｜拡張機能からHTML/CSS演習まで
Web制作の現場標準エディタ「VS Code」の導入手順から、日本語化・おすすめ拡張機能・基本操作、HTML/CSSレイアウト演習コードまでをまとめて解説します。
HTML・CSS・JavaScriptとは？Web制作に必要な3言語の役割と最初の一歩「Hello World」
Web制作に欠かせない3つの言語——HTML・CSS・JavaScript（jQuery）の役割をわかりやすく整理します。さらにテキストエディタのインストールから最初のHTMLファイル「Hello World」を作成するまでの手順を解説します。
Web制作の流れと仕事の種類を解説｜企画・デザイン・コーディング・公開までの5ステップ
Webサイトはどんな流れで作られるのでしょうか？企画・設計からデザイン・コーディング・テスト・公開まで一般的な制作フローと各職種の役割を解説。AI・ノーコード時代でも基礎知識が必要な理由もあわせて紹介します。