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

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

全150件の記事中、1-30件を表示

Claude Codeでリリックビデオを作る|Tesseractで8秒の縦動画を書き出す

Claude Codeでリリックビデオを作る|Tesseractで8秒の縦動画を書き出す

Claude Codeでリリックビデオを作るとは、歌詞の文字・色・動きを日本語で指示し、Claude...
続きを読む
Obsidian×Claude Code連携は役割分担で決める

Obsidian×Claude Code連携は役割分担で決める

Obsidian×Claude Codeの連携とは、Markdownのノートを置くObsidianの...
続きを読む
Claude Codeの運用実例|自分専用ダッシュボードで26プロジェクトを回す

Claude Codeの運用実例|自分専用ダッシュボードで26プロジェクトを回す

Claude Codeを多くのプロジェクトで使い続けるコツは、人は判断と公開だけを受け持ち、実行と報...
続きを読む
DomoAI MCPの使い方|作る前に料金とモデルを見る

DomoAI MCPの使い方|作る前に料金とモデルを見る

DomoAI MCPとは、DomoAIの動画・画像・音声の生成を、Claude CodeなどのAIエ...
続きを読む
デジタルパンフレットの使い道|チラシや会社案内の反応をGA4で測る

デジタルパンフレットの使い道|チラシや会社案内の反応をGA4で測る

デジタルパンフレットの一番の使い道は、紙では分からなかった「どのページが読まれ、どのリンクが押された...
続きを読む
PDFカタログを電子カタログにする方法|商品リンクとGA4計測まで

PDFカタログを電子カタログにする方法|商品リンクとGA4計測まで

PDFカタログを電子カタログにするには、印刷用のPDFを読み込んでページめくりで読めるHTMLにエク...
続きを読む
Claude CodeでAfter Effectsを自動化|テロップ5本をaerenderで一括書き出し

Claude CodeでAfter Effectsを自動化|テロップ5本をaerender...

Claude CodeでAfter Effectsを自動化するには、Claude CodeにExte...
続きを読む
Google AI Studioでできること|無料でナレーションを作ってみた

Google AI Studioでできること|無料でナレーションを作ってみた

Google AI Studioとは、GoogleのAIモデル「Gemini」をブラウザ上で無料で試...
続きを読む
AI動画の前にプリビズを作る|Claude CodeでCozyClayを動かす

AI動画の前にプリビズを作る|Claude CodeでCozyClayを動かす

プリビズ(プレビズ/previs)とは、本番の撮影や生成の前に、仮の3Dで人物の立ち位置・動き・カメ...
続きを読む
VOICEVOXでナレーションを自動で入れる|動画の尺に合わせて速さを調整

VOICEVOXでナレーションを自動で入れる|動画の尺に合わせて速さを調整

VOICEVOXで動画にナレーションを自動で入れるには、台本をカットごとに分けてVOICEVOXエン...
続きを読む
Claude CodeでBlenderを動かしWebに載せる|glb書き出しとthree.js再生

Claude CodeでBlenderを動かしWebに載せる|glb書き出しとthree....

Claude CodeでBlenderを動かしてWebに載せるには、動きをPythonスクリプトで組...
続きを読む
Claude Codeで複数プロジェクトを管理する|AIと人間の共同管理ダッシュボード

Claude Codeで複数プロジェクトを管理する|AIと人間の共同管理ダッシュボード

Claude Codeで複数プロジェクトを管理するときは、「どこで何が動いていて、どれが人間の判断を...
続きを読む
Figma MCPでワイヤーフレームとバナーを作らせた|Claude Codeで書き込む手順

Figma MCPでワイヤーフレームとバナーを作らせた|Claude Codeで書き込む手...

Figma MCPの書き込み機能(use_figma)を使うと、Claude CodeからFigma...
続きを読む
社内ポータルをClaude Codeで自作する|チームボードの作り方と公開前チェック

社内ポータルをClaude Codeで自作する|チームボードの作り方と公開前チェック

社内ポータルの自作とは、チームの連絡や情報共有に使う社内向けのWebサイトを、SaaSを契約せずに自...
続きを読む
Clarity MCPの使い方|Claude Codeに行動データを読ませる手順

Clarity MCPの使い方|Claude Codeに行動データを読ませる手順

Clarity MCPとは、Microsoft Clarityのダッシュボード集計とセッション録画を...
続きを読む
WordPress 7.1.2で修正された脆弱性CVE-2026-87902の影響確認と対応手順

WordPress 7.1.2で修正された脆弱性CVE-2026-87902の影響確認と対...

CVE-2026-87902とは、WordPress 4.7.0〜7.1.1の本体に見つかった脆弱性...
続きを読む
SEOとマーケの判断は1人に|1軸ディレクターが組む3層の体制

SEOとマーケの判断は1人に|1軸ディレクターが組む3層の体制

SEO・マーケ・Webマーケの判断軸を1人が持ち、調査・作業・検証を分担させる「1軸ディレクター」の考え方と、体制を見直すときの判定表をまとめました。
続きを読む
インボイス2026年10月改正|フリーランスの登録判断と対応手順

インボイス2026年10月改正|フリーランスの登録判断と対応手順

2026年10月1日から、インボイスを持たない免税事業者への支払いで取引先が控除できる消費税の割合は...
続きを読む
DESIGN.mdとは|AIが作るUIを「それっぽい」で終わらせない設計ファイル

DESIGN.mdとは|AIが作るUIを「それっぽい」で終わらせない設計ファイル

DESIGN.mdとは、AIコーディングエージェントにデザインの判断基準を渡すためのファイル仕様です...
続きを読む
WEBカタログ制作の費用相場|デジタルカタログの作り方と依頼先の選び方

WEBカタログ制作の費用相場|デジタルカタログの作り方と依頼先の選び方

WEBカタログとは、紙のカタログをブラウザ上でページをめくるように閲覧できるようにしたコンテンツです...
続きを読む
AI社員の職種一覧|1人会社が実際に配属できる仕事とその境界

AI社員の職種一覧|1人会社が実際に配属できる仕事とその境界

AI社員とは、Claude Code のサブエージェント機能を使って、業務ごとに専任のAIを定義し、...
続きを読む
制作物の著作権は誰のものか|納品後にもめないための取り決め

制作物の著作権は誰のものか|納品後にもめないための取り決め

制作物の著作権は、契約で別段の定めをしない限り、実際にそれを作った側に発生します。発注して費用を払っ...
続きを読む
商用利用できる素材の選び方|無料と有料でライセンスはどう違うのか

商用利用できる素材の選び方|無料と有料でライセンスはどう違うのか

素材が商用利用できるかどうかは、料金の有無ではなく、使用許諾(ライセンス)がどこまでを認めているかで...
続きを読む
TikTok ShopのAI動画はどこまで作れるか|DomoAIで4本検証

TikTok ShopのAI動画はどこまで作れるか|DomoAIで4本検証

TikTok Shop の商品動画を AI で作るとき、映像そのものは商品を映しても崩れません。化粧...
続きを読む
ClaudeでPhotoshopを操作する2つの方法|公式コネクタとExtendScript

ClaudeでPhotoshopを操作する2つの方法|公式コネクタとExtendScrip...

ClaudeからPhotoshopを操作する方法は2つあります。コードを書かずに済ませるなら、Ado...
続きを読む
GA4のダッシュボード機能の使い方|+作成ボタンと6種のグラフ

GA4のダッシュボード機能の使い方|+作成ボタンと6種のグラフ

GA4 のダッシュボードは、必要な数字だけを 1 ページに集めた自分専用のレポート画面です。レポート...
続きを読む
Microsoft Clarityの導入と使い方|ヒートマップで直す手順

Microsoft Clarityの導入と使い方|ヒートマップで直す手順

Microsoft Clarity(マイクロソフト クラリティ)は、Microsoft が無料で提供...
続きを読む
GEO・AIO対策は何から?記事0本の日に決まる着手順

GEO・⁠AIO対策は何から?記事0本の日に決まる着手順

GEO・AIO対策を何から始めるかの答えは、施策の優先順位ではなく「いつ敷くか」で決まります。結論か...
続きを読む
MCPサーバーの作り方|Claude Codeから呼べる自作ツールを実装する

MCPサーバーの作り方|Claude Codeから呼べる自作ツールを実装する

MCPサーバーの作り方は、公式SDKでツールを1つ定義して、Claude Codeに登録するだけです...
続きを読む
ディスプレイ広告の直帰率80%は正常なのか|平均56.5%が使えない理由

ディスプレイ広告の直帰率80%は正常なのか|平均56.5%が使えない理由

ディスプレイ広告の直帰率を検索すると、平均56.50%という数字が見つかります。一方で運用側からは「...
続きを読む