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

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

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

「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...
続きを読む
PWA化は必要か?既存サイトをPWAにする実装手順とやめる判断基準

PWA化は必要か?既存サイトをPWAにする実装手順とやめる判断基準

PWA(Progressive Web App)とは、既存のWebサイトにWeb App Manif...
続きを読む
JavaScriptで作るミニアプリ4選|ToDo・電卓・クイズ・ストップウォッチ

JavaScriptで作るミニアプリ4選|ToDo・⁠電卓・⁠クイズ・⁠ストップウォッチ

JavaScriptの基礎文法を覚えても「で、結局なにを作れるの?」で止まってしまう人は多いはずです...
続きを読む
デザインカンプ前に決めるWebデザインのルール|ウィンドウ幅・コンテンツ幅・カラム設計

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

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

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

Tailwind CSS v4は、設定をJavaScriptファイルではなくCSS内で行う「CSS-...
続きを読む
Next.jsでlocalStorageがhydration errorになる原因と解決法

Next.jsでlocalStorageがhydration errorになる原因と解決法

Next.js で localStorage を使うと hydration error(ハイドレーシ...
続きを読む
localStorageにJWTを保存すべきか

localStorageにJWTを保存すべきか

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

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

localStorage・sessionStorage・Cookie・IndexedDBは、いずれも...
続きを読む
GA4直接埋め込み vs GTM経由|メリット・デメリット比較と判断基準

GA4直接埋め込み vs GTM経由|メリット・⁠デメリット比較と判断基準

GA4を直接埋め込む方式とGTM経由で計測する方式を、導入コスト・運用負荷・パフォーマンスで比較。それぞれが向いているケースと判断フレームワークを実例ベースで解説。
続きを読む
GTMタグをhead上部に設置するべき理由とパフォーマンス影響

GTMタグをhead上部に設置するべき理由とパフォーマンス影響

Google Tag Manager(GTM)のコンテナタグを上部に設置すべき理由と、設置位置3パターンの比較、パフォーマンスへの影響、WordPressでの実装ポイントを解説。
続きを読む
WordPressでGA4をGTM経由に移行する方法

WordPressでGA4をGTM経由に移行する方法

WordPressで運用中のGA4をGoogle Tag Manager(GTM)経由に移行する具体的な手順を、コンテナ作成から疎通確認まで5ステップで解説。実体験ベースの落とし穴とFAQ付き。
続きを読む
WordPressループの仕組みを徹底解説|have_posts・the_postの使い方

WordPressループの仕組みを徹底解説|have_posts・⁠the_postの使い方

WordPressループとは、データベースから取得した投稿データを1件ずつ処理し、ページに表示するた...
続きを読む
WordPress archive.phpの使い方とカスタマイズ|functions.phpとの連携も解説

WordPress archive.phpの使い方とカスタマイズ|functions.ph...

archive.phpとは、WordPressのテンプレート階層においてカテゴリ・タグ・日付・著者な...
続きを読む
CSSとJavaScriptで作る3Dカルーセル|キーボード操作対応のインタラクティブギャラリー

CSSとJavaScriptで作る3Dカルーセル|キーボード操作対応のインタラクティブギャ...

Webサイトに奥行きと立体感を与える3Dカルーセル。単なる平面的なスライダーとは違い、空間の中でカー...
続きを読む
WordPress/STUDIO/HTMLコンタクトフォームおすすめツールと実装方法

WordPress/STUDIO/HTMLコンタクトフォームおすすめツールと実装方法

WordPress/STUDIO/HTMLでLP(ランディングページ)を制作する際、お問い合わせフォ...
続きを読む
模擬案件プラン|デザイン1回+コーディング1回の合計2回の添削付き!優秀作品はCodeQuestに掲載

模擬案件プラン|デザイン1回+コーディング1回の合計2回の添削付き!優秀作品はCodeQu...

「ただの模写」では得られない、“実力試しの場”をつくりました ポートフォリオのLPを作っているけど、...
続きを読む
Figma模写 #5:山と自然をテーマにした中級レイアウトに挑戦!

Figma模写 #5:山と自然をテーマにした中級レイアウトに挑戦!

Figma模写シリーズ第5弾は、山・登山・ハイキングをテーマにした縦長ランディングページの模写に挑戦...
続きを読む
Figma模写 #1 Figmaで始める模写コーディング

Figma模写 #1 Figmaで始める模写コーディング

Web制作スキルを効率的に高める方法の一つが「模写コーディング」 とくに最近では、Figma(フィグ...
続きを読む
模写中級 #006 | ScrollReveal.jsの使い方とサンプルLP

模写中級 #006 | ScrollReveal.jsの使い方とサンプルLP

Webサイトにアニメーションを取り入れたいとき、軽量で手軽に導入できるライブラリがあると便利です。こ...
続きを読む
2026年 新CSSフレームワーク「lism-css」とは?軽量&直感的な書き方が魅力!

2026年 新CSSフレームワーク「lism-css」とは?軽量&直感的な書き方が魅力!

Web制作をしていて「CSSの設計が複雑になりがち」「フレームワークが重い」と感じたことはありません...
続きを読む
Electronで作るクリップボード履歴アプリ開発入門

Electronで作るクリップボード履歴アプリ開発入門

この記事は、Electron と HTML/CSS/JavaScript を使って開発した「クリップ...
続きを読む