HTMLのidとclassの違い・使い分けと構造タグの基本
はじめに HTMLを書くときによく迷うのが「idとclassの使い分け」そして「構造タグ（header, main, section, articleなど）の正しい使い方」です。今回はそれぞれの役割や...
続きを読む →
模写コーディング練習
プログラミング初心者向けのチュートリアルから、WordPressオリジナルテーマ実装まで学べる模写課題練習サイト。
CSSアニメーションやJavaScriptコード模写など、実践的なスキルを習得できるコンテンツを拡大中。初心者が基礎から応用まで効率的に練習できるリソースを提供します。
ブラウザのモード切り替えでライトモード、ダークモードが切り替わります。
初級 HTMLとCSSの基礎
モバイルファーストの本当の意味｜GoogleのMFIとUX思想から理解する
はじめに 「モバイルファースト」と聞くと、PCデザインをスマホ風にすることだと誤解している人をよく見かけます。しかし本来の意味はまったく異なり、Googleの公式施策（モバイルファーストインデックス：...
続きを読む →SEOに効くHTMLアウトライン設計｜見出しタグを自動検証できる無料ツール
HTMLアウトラインチェッカーとは？正しい文書構造を学ぶための無料ツール Web制作において、見出しタグ（h1〜h6）やsectionタグを正しく使うことは、SEOとユーザー体験の両面で非常に重要です...
続きを読む →準中級 HTMLとCSSパーツ模写練習
Figma模写 #3：音楽系ランディングページをHTML/CSSで再現してみよう
Figma模写シリーズ第3弾は、アーティストのプロモーションサイトを想定した音楽系ランディングページに挑戦します。 視線を惹きつける大胆なヒーロー画像、ストリーミングサービスの導線、シンプルなフォーム...
続きを読む →Figma模写 #2：準中級向け 建築系ポートフォリオ風レイアウト
Figma模写シリーズ第2弾は、建築事務所やプロジェクト紹介向けのミニマルで洗練されたレイアウトに挑戦します。 今回はHTMLとCSSのみを使用し、構造理解とレイアウト設計のスキル向上を目的とした模写...
続きを読む →AOS.js・IntersectionObserver・GSAPでアニメーション制御する方法
Webサイト制作において、スクロールに応じて要素をアニメーションさせる表現は今や定番です。この記事では、代表的なアニメーションライブラリである AOS.js、Intersection Observer...
続きを読む →中級 フロントエンド練習
模擬案件プラン｜デザイン1回＋コーディング1回の合計2回の添削付き！優秀作品はCodeQuestに掲載
「ただの模写」では得られない、“実力試しの場”をつくりました ポートフォリオのLPを作っているけど、「この方向性で合ってるのかな……？」「ちゃんと実務でも通用するレベルだろうか？」 そんな不安を抱えて...
続きを読む →
Figma模写 #5：山と自然をテーマにした中級レイアウトに挑戦！
Figma模写シリーズ第5弾は、山・登山・ハイキングをテーマにした縦長ランディングページの模写に挑戦します。 大自然の写真を大胆に使った背景演出や、ナンバリング付きのセクション構成など、中級レベルにふ...
続きを読む →Figma模写 #1 Figmaで始める模写コーディング
Web制作スキルを効率的に高める方法の一つが「模写コーディング」 とくに最近では、Figma（フィグマ）という無料のデザインツールを使って、プロのようなデザインをそのまま模写する学習スタイルが注目され...
続きを読む →上級 jQuery GSAP機能学習
模擬案件プラン｜デザイン1回＋コーディング1回の合計2回の添削付き！優秀作品はCodeQuestに掲載
「ただの模写」では得られない、“実力試しの場”をつくりました ポートフォリオのLPを作っているけど、「この方向性で合ってるのかな……？」「ちゃんと実務でも通用するレベルだろうか？」 そんな不安を抱えて...
続きを読む →
Figma模写 #4：旅行サービス系UIを再現！上級者向けレイアウトに挑戦
Figma模写シリーズ第4弾は、旅行・観光系のWebサービスをテーマにした本格的なUI構成に挑戦します。 構造は一見シンプルに見えますが、検索フォームやセクションごとのカードUIなど、設計・再現ともに...
続きを読む →【初心者向け】PHPMailerの使い方まとめ｜安全なメール送信を簡単に実装！
PHPMailerとは？ PHPMailer（ピーエイチピーメーラー）は、PHPでメールを送信するためのライブラリです。通常、PHP標準のmail()関数でもメール送信は可能ですが、以下のような制限が...
続きを読む →WordPress環境構築＆テンプレート作成
Contact Form 7でお問い合わせ番号を自動生成する方法【WordPress】
この記事でわかること なぜ「秒までの日時」を付与するのか？ 結果として、運用コストを下げつつ、利用者・管理者双方にわかりやすい受付番号を付けられます。 実装方法（最短ショートコード版） WordPre...
続きを読む →Contact Form 7自動返信が迷惑メールに入らない設定｜WP Mail SMTPだけで完了
CF7自動返信が迷惑メールに入らない設定【WP Mail SMTPだけで完了】 「送信元を自社ドメインで“固定”＋SMTP配送」を徹底すれば、CF7（Contact Form 7）の自動返信メールは迷...
続きを読む →WordPressでJavaScriptを正しく読み込む方法｜wp_enqueue_scriptの使い方と条件分岐も解説
WordPressで独自のJavaScriptファイルを読み込みたいとき、どのように書くのが正解でしょうか？ 実は wp_enqueue_script() 関数を使うことで、WordPressに最適な...
続きを読む →ジェネレーター特集
SEOに効くHTMLアウトライン設計｜見出しタグを自動検証できる無料ツール
HTMLアウトラインチェッカーとは？正しい文書構造を学ぶための無料ツール Web制作において、見出しタグ（h1〜h6）やsectionタグを正しく使うことは、SEOとユーザー体験の両面で非常に重要です...
続きを読む →CSSセレクター学習ツール｜スマホとPCで使い分ける練習法
はじめに：CSSセレクターを学ぶならツール活用が近道 CSSセレクターは、HTML要素を指定してデザインや動作を適用するためのCSSの基礎知識です。しかし、「書き方は覚えても、実際にどう動くのかが分か...
続きを読む →TypeScriptで作る！チェックリストアプリ｜ローカル保存＆編集機能
TypeScriptで作る！おしゃれなチェックリストアプリ｜ローカル保存＆編集機能付き デモサイト HTML・CSS・TypeScriptを使って、シンプルでスタイリッシュな「チェックリストアプリ」を...
続きを読む →