模擬案件プラン|デザイン1回+コーディング1回の合計2回の添削付き!優秀作品はCodeQuestに掲載 「ただの模写」では得られない、“実力試しの場”をつくりました ポートフォリオのLPを作っているけど、「この方向性で合ってるのかな……?」「ちゃんと実務でも通用するレベルだろうか?」 そんな不安を抱えて... 続きを読む →
Figma模写 #4:旅行サービス系UIを再現!上級者向けレイアウトに挑戦 Figma模写シリーズ第4弾は、旅行・観光系のWebサービスをテーマにした本格的なUI構成に挑戦します。 構造は一見シンプルに見えますが、検索フォームやセクションごとのカードUIなど、設計・再現ともに... 続きを読む →
【初心者向け】PHPMailerの使い方まとめ|安全なメール送信を簡単に実装! PHPMailerとは? PHPMailer(ピーエイチピーメーラー)は、PHPでメールを送信するためのライブラリです。通常、PHP標準のmail()関数でもメール送信は可能ですが、以下のような制限が... 続きを読む →
ファッション雑誌風LPをHTML/CSSで模写練習|サイドメニュー このページは、ファッション雑誌の世界観をWeb上で再現したLP(ランディングページ)の模写練習用デモです。HTMLとCSSのみで構成されており、画像の使い方や余白の取り方、雑誌的なタイポグラフィを意識... 続きを読む →
SQLiteで履歴を管理!Electron製クリップボードアプリ Electron × SQLiteで最強のクリップボードアプリを実現! 前回はlocalStorageを使ったシンプルなクリップボード履歴アプリを紹介しましたが、今回はSQLiteを採用したバージョン... 続きを読む →
GSAPとsplide.jsで作るスクロールアニメーション|クロスグライドアニメーションで作る演出 クロスグライドアニメーションとは? スクロールアニメーションは、ページを移動する際に要素がフェードインしたりスライドしたりすることで、ユーザーの目を引く演出を行います。今回紹介するクロスグライドアニメ... 続きを読む →
Matter.js物理演算アニメーション|Impact Sphere 実装ガイド【重力や跳ね返りを再現】 Webページ上で、画像が重力で落下して跳ね返る──そんな動きに魅了された経験はありませんか?この記事では、物理演算ライブラリ「Matter.js」を活用して、ランダムな大きさの円形画像が落下し、1つだ... 続きを読む →
PHPMailerで安全にメール送信【Gmail対応コード例+SMTP認証】 PHPMailerとは?安全にメール送信できるPHPライブラリ PHPMailerは、PHPでメールを送信するための人気ライブラリです。標準のmail()関数よりも柔軟で、安全性や拡張性に優れています... 続きを読む →
PHPMailer対応:PHPで作るお問い合わせフォーム|確認画面&メール送信付きサンプルあり はじめに 「PHPでお問い合わせフォームを作りたいけど、どこから手をつければいいかわからない」そんな初心者の方に向けて、確認画面付きのメールフォームをPHPで一から作る手順をわかりやすく解説します。 ... 続きを読む →
React.js, Vue.js, Node.jsの特徴と適したWebアプリ制作の選び方 Webアプリケーションを開発する際、使用する技術スタックは非常に重要です。React.js、Vue.js、Node.jsは、現代のWeb開発において非常に人気のある技術であり、それぞれが異なる特徴と利... 続きを読む →
CSSネスティング入門|新しい書き方でセレクタを簡潔に管理する方法|最新仕様対応 CSSのネスト記法は、これまでSassやLessといったCSSプリプロセッサで一般的に使用されていましたが、2023年からはネイティブCSSでも対応が進んでいます。本記事では、CSSネスト記法の基本か... 続きを読む →
ティザーサイトの作り方|公開前に効果を高めるプロモーション戦略と実装法|Web制作活用 1. ティザーサイトとは? ティザーサイトとは、新商品や新サービスの発表前に、ユーザーの興味を引くために公開される特設サイトのことです。「ティザー(Teaser)」とは「じらす」「引きつける」という意... 続きを読む →
GSAPで制御するThree.jsトランジションアニメーション|Vortex Spin 実装ガイド VortexSpinアニメーション:幻想的な回転効果でウェブデザインを強化 ウェブデザインにおいて、ユーザーの注意を引くためには視覚的なエフェクトが非常に重要です。その中でも、回転や渦巻きの動きは強力... 続きを読む →
reCAPTCHA導入手順|Contact Form 7とPHPフォームの安全対策ガイド|スパム防止に最適 スパム対策は、フォームを運営する際に欠かせない要素です。特に、スパムボットによる自動送信を防ぐためにGoogleの提供する「reCAPTCHA」を活用するのは有効な手段の一つです。本記事では、Word... 続きを読む →
PHPメールフォームの作り方|初心者向けセキュアな送信方法と実装例|安全対策付き mail()関数はもう古い?PHPメール送信の落とし穴 PHPのmail()関数は、手軽にメールを送信できる関数として広く使われてきました。しかし、実運用の現場では「メールが届かない」「迷惑メール扱い... 続きを読む →
BEM・OOCSS・SMACSS・FLOCSS比較|CSS設計手法の特徴と実務活用法まとめ|初心者向け 1. はじめに(導入) CSS設計がなぜ重要かを解説。ポイント: 2. CSS設計とは? CSS設計の目的と必要性について解説。 3. BEM(Block, Element, Modifier) BE... 続きを読む →
模写練習:GSAPとScrollTriggerで実現するスクロール連動リバースアニメーション 近年のフロントエンド開発において、スクロール位置に応じてコンテンツが動くスクロールアニメーションは、ユーザーエンゲージメントを高めるために欠かせない要素になっています。特に、「GSAP (GreenS... 続きを読む →
GSAP練習問題集|Webデザインのためのアニメーション練習ガイド 概要 GSAPは、Webアニメーションを簡単かつ効率的に作成できる強力なライブラリです。本記事では、GSAPの基本的な使い方から応用まで学べる練習問題を紹介します。 練習問題を進めるポイント 目次 練... 続きを読む →
ポートフォリオサンプルサイトーpagepiling このサイトのポイント 1. ページピリング(Page Piling)の実装 2. ローディング時のシャッターアニメーション 3. スムーズなスクロールアニメーション 4. レスポンシブ対応 5. モダ... 続きを読む →
写真館サンプルサイト <picture> タグ HTMLの<picture>タグは、レスポンシブデザインやパフォーマンス向上に非常に役立つ画像要素です。 1. レスポンシブデザインへの対応 2. パ... 続きを読む →
ポートフォリオサンプルサイトスクロールGSAP 1. HTML構造 2. CSSによるデザイン 3. JavaScriptの利用 4. パフォーマンス最適化 5. アクセシビリティ GSAPによるアニメーション効果でウェブデザインを進化させる方法 ... 続きを読む →