中級 フロントエンド学習の基本

実務寄りの中級レベル課題集です。WordPressテーマ開発(テンプレート階層・カスタム投稿)、GA4/GTM計測、FLOCSS・CSSネスト・Tailwind CSS v4移行といったモダンCSS、PHPMailerによるメール送信、Electron・3Dカルーセルなど、案件で必要になるテーマを扱います。模写コーディング全体は 模写コーディング練習サイト も参照してください。

全150件の記事中、31-60件を表示

推測と類推の使い方|ロジカルとラテラルを実際に動かす2つの道具

推測と類推の使い方|ロジカルとラテラルを実際に動かす2つの道具

推測とは、手元にある情報から、まだ確かめていない先を読むことです。類推とは、別の場所で通用した解き方...
続きを読む
Node.js練習問題集【基礎API編】

Node.js練習問題集【基礎API編】

Node.jsとは、ブラウザの外でJavaScriptを実行するためのランタイムのことで、サーバー開...
続きを読む
Chrome DevTools MCPの使い方|Claude Codeにブラウザ実測・デバッグさせる方法

Chrome DevTools MCPの使い方|Claude Codeにブラウザ実測・⁠デバ...

Chrome DevTools MCPとは、Claude CodeなどのAIコーディングエージェント...
続きを読む
NotionとClaude Codeを連携する方法|公式MCPで仕様書・タスクを開発コンテキスト化する

NotionとClaude Codeを連携する方法|公式MCPで仕様書・⁠タスクを開発コンテ...

NotionとClaude Codeは、Notion公式のリモートMCPサーバー「Notion MC...
続きを読む
WordPressとClaude Codeを連携する方法|公式MCP Adapterでサイトを操作するワークフロー

WordPressとClaude Codeを連携する方法|公式MCP Adapterでサイ...

WordPressとClaude Codeは、WordPress 6.9でコアに搭載された「Abil...
続きを読む
FigmaとClaude Codeを連携する方法|Dev Mode MCPでデザインをコード化するワークフロー

FigmaとClaude Codeを連携する方法|Dev Mode MCPでデザインをコー...

FigmaとClaude Codeは、Figma公式の「Dev Mode MCPサーバー」を使って連...
続きを読む
「QRコード」表記の商標ルール|®だけでは足りない・登録商標文の正しい書き方

「QRコード」表記の商標ルール|®だけでは足りない・⁠登録商標文の正しい書き方

「QRコード」は株式会社デンソーウェーブの登録商標です。Webサイトや印刷物でこの名称を使う場合は、...
続きを読む
決済ブランドロゴのECサイト掲載ルール|未契約ブランドのロゴ掲載は規約違反です

決済ブランドロゴのECサイト掲載ルール|未契約ブランドのロゴ掲載は規約違反です

決済ブランドのロゴは、実際に契約しているブランドのものだけを、公式配布のマークで、改変せずに掲載でき...
続きを読む
「Googleでログイン」ボタンの使用ルール|Gロゴの色変え・自作アイコンは規約違反です

「Googleでログイン」ボタンの使用ルール|Gロゴの色変え・⁠自作アイコンは規約違反です

「Googleでログイン」ボタンは、Googleのブランドガイドラインに従って表示する義務があります...
続きを読む
App Store・Google Playバッジの掲載ルール|「App Store」を日本語に訳すのは規約違反です

App Store・⁠Google Playバッジの掲載ルール|「App Store」を日本...

App StoreとGoogle Playのダウンロードバッジは、AppleとGoogleが配布する...
続きを読む
「AI組織」は組織図から作ると失敗する|1人会社をAI会社化する正しい順序

「AI組織」は組織図から作ると失敗する|1人会社をAI会社化する正しい順序

AI組織(AI会社化)とは、Claude Codeのサブエージェントに代表されるAIエージェントを「...
続きを読む
TikTokロゴの使用ルール|TikTok Shop普及のいま再確認しましょう

TikTokロゴの使用ルール|TikTok Shop普及のいま再確認しましょう

TikTokのロゴ・アイコンの使用は、原則として「事前の書面許可制」です。許可なしで使えるのは「fo...
続きを読む
Facebookロゴの使用ルール|「いいね!」ボタンはもう設置できません

Facebookロゴの使用ルール|「いいね!」ボタンはもう設置できません

Facebookの「いいね!」ボタンとコメントボタンは、2026年2月10日に廃止されました。いま自...
続きを読む
Xロゴの使用ルール|「青い鳥ロゴは禁止された」は誤りです

Xロゴの使用ルール|「青い鳥ロゴは禁止された」は誤りです

「旧Twitterの青い鳥ロゴは、Xのガイドラインで使用が禁止された」——これは誤りです。Xの現行ブ...
続きを読む
Instagramロゴの使用ルール|「色を変えてはいけない」は誤解です

Instagramロゴの使用ルール|「色を変えてはいけない」は誤解です

自社サイトのフッターにInstagramのアイコンを置き、自社アカウントへリンクするだけであれば、M...
続きを読む
LINEロゴと友だち追加ボタンの正しい設置方法|画像で貼ると規約違反になる

LINEロゴと友だち追加ボタンの正しい設置方法|画像で貼ると規約違反になる

自社サイトにLINEのロゴやアイコンを掲載し、LINE公式アカウントへリンクするだけであれば、LIN...
続きを読む
技術ブログが検索で読まれない原因と、見つけてもらう記事設計【エンジニア向け】

技術ブログが検索で読まれない原因と、見つけてもらう記事設計【エンジニア向け】

技術ブログが検索で読まれない最大の原因は、ドメインパワーの弱さではなく「検索意図に接続していない記事...
続きを読む
URL設計・ディレクトリ構造の決め方【SEO観点で失敗しないルール】

URL設計・⁠ディレクトリ構造の決め方【SEO観点で失敗しないルール】

URL設計とは、サイトの各ページに割り当てるアドレス(URL)の構造を、公開前にあらかじめ決めておく...
続きを読む
Claude Codeのスキル・ループ・ワークフローの使い分け|いつどれを使うか判断ガイド

Claude Codeのスキル・⁠ループ・⁠ワークフローの使い分け|いつどれを使うか判断ガイド

Claude Codeのスキル・ループ・ワークフローは、名前が並ぶと混同しがちですが役割はまったく別...
続きを読む
デザインカンプ前に決めるWebデザインのルール|ウィンドウ幅・コンテンツ幅・カラム設計

デザインカンプ前に決めるWebデザインのルール|ウィンドウ幅・⁠コンテンツ幅・⁠カラム設計

Webデザインのカンプは、ウィンドウ幅・コンテンツ幅・カラム構成・最小フォントサイズといった「デザイ...
続きを読む
Tailwind CSS v4移行ガイド|v3からの変更点・破壊的変更と移行手順

Tailwind CSS v4移行ガイド|v3からの変更点・⁠破壊的変更と移行手順

Tailwind CSS v4は、設定をJavaScriptファイルではなくCSS内で行う「CSS-...
続きを読む
localStorageにJWTを保存すべきか

localStorageにJWTを保存すべきか

結論から言うと、JWT(アクセストークン)を localStorage に保存するのは原則として避け...
続きを読む
localStorage・sessionStorage・Cookie・IndexedDBの使い分け

localStorage・⁠sessionStorage・⁠Cookie・⁠IndexedDBの...

localStorage・sessionStorage・Cookie・IndexedDBは、いずれも...
続きを読む
Claude Codeのルール・エージェント設計術|CLAUDE.mdとサブエージェント運用の実践知

Claude Codeのルール・⁠エージェント設計術|CLAUDE.mdとサブエージェント運...

Claude Codeのルール・エージェント設計とは、何を恒久的なルールとして固定し、何を誰(サブエ...
続きを読む
PHPでページネーションを実装する方法|LIMIT・OFFSETでページ送りを作る

PHPでページネーションを実装する方法|LIMIT・⁠OFFSETでページ送りを作る

PHPのページネーションとは、件数の多い一覧を1ページあたりの表示数で区切り、「前へ・次へ・ページ番...
続きを読む
PHP×MySQLで検索機能を作る方法|LIKEであいまい検索を実装する

PHP×MySQLで検索機能を作る方法|LIKEであいまい検索を実装する

PHPで検索機能を作るとは、検索フォームから受け取ったキーワードをもとに、MySQLのLIKEを使っ...
続きを読む
PHPでMySQLを操作する方法|PDOでCRUD(登録・取得・更新・削除)を実装する

PHPでMySQLを操作する方法|PDOでCRUD(登録・⁠取得・⁠更新・⁠削除)を実装する

PHPでMySQLを操作するとは、PHPからデータベースに接続し、データの登録(Create)・取得...
続きを読む
納品前にSEO設定を自分で検証する手順 — 5項目の確認方法と合否ライン

納品前にSEO設定を自分で検証する手順 — 5項目の確認方法と合否ライン

納品前のSEO検証とは、実装したSEO設定(メタタグ・OGP・見出し構造・構造化データ・canoni...
続きを読む
ローカルLLM vs クラウドAPI|5基準で選ぶ実装判断ガイド

ローカルLLM vs クラウドAPI|5基準で選ぶ実装判断ガイド

ローカルLLMとクラウドLLM APIは、自社で大規模言語モデルを運用するか、外部のAPIサービスに...
続きを読む
Webサイトへの LLM 導入事例5選|チャットボット・検索・要約・振り分け・翻訳

Webサイトへの LLM 導入事例5選|チャットボット・⁠検索・⁠要約・⁠振り分け・⁠翻訳

サイトへのLLM導入とは、自社のWebサイトに大規模言語モデル(ChatGPT・Claude・Gem...
続きを読む