AIでハンバーガーメニューを作る【CSS＋JS生成】
AIでハンバーガーメニューを生成する方法。三本線が×に変化するアニメーションとナビの開閉をCSS+JSで実装。プロンプト…
生成AI活用
「生成AI活用」カテゴリの記事一覧です。
AIでタブ切り替えUIを作る【CSS＋JS生成】
AIでタブ切り替えUIを生成する方法。data属性でタブとコンテンツを紐付け、アクティブタブの強調とコンテンツ切り替えを…
AIでスクロールしたら要素がフェードインするアニメーションを作る【CSS＋JS生成】
AIでIntersection Observer APIを使ったスクロールフェードインアニメーションを生成する方法。CS…
AIで数字がカウントアップするアニメーションを作る【JS生成】
AIで数字がカウントアップするアニメーションのJSを生成する方法。requestAnimationFrameとInter…
AIでホバーするとツールチップが表示されるUIを作る【CSS生成】
AIでCSSのみのツールチップを生成する方法。ホバーで上部に吹き出し表示、三角形の矢印、フェードアニメーションまでプロン…
AIでページ内リンクをスムーススクロールにする【CSS＋JS生成】
AIでページ内リンクをスムーススクロールにする方法。固定ヘッダーのオフセット調整まで含めたCSS+JSのプロンプト例・コ…
AIでダークモード切り替えボタンを作る【CSS＋JS生成】
AIでダークモード切り替えボタンを生成する方法。CSS変数を使った色管理とlocalStorageで設定を保存する実装の…
AIでコードブロックにコピーボタンを追加する【CSS＋JS生成】
AIでコードブロックにコピーボタンを追加する方法。Clipboard APIを使ったコピー処理とフィードバック表示のCS…
WordPressテーマのカスタマイズをAIで加速させる実践的な方法
「AIにコードを生成してもらったけど、どこに貼ればいいかわからない」「そもそもWordPressのテーマってどうやって作…
生成AIを使いこなすための「プロンプト」完全ガイド｜重要ポイントと実践的な作り方
生成AIのプロンプト（指示文）を上手に作るためのポイントを、例題と合わせてわかりやすく解説。AIと対話しながらプロンプト…
主要AIツール10選を徹底比較｜コード生成・画像生成・文章生成の得意分野と料金まとめ【2025年最新版】
ChatGPT、Claude、Gemini、Midjourney……主要生成AIツール10種類を厳選し、コード生成・画像…
既存コードを渡してAIに機能追加を依頼する【HTML崩れ防止】
「既存コードを前提にした依頼」が実務では最も重要 ゼロから作るよりも「既存ページに機能を追加する」場面のほうが圧倒的に多…
CSSグラデーション文字をAIで一瞬で生成する方法
AIをCSSジェネレーターとして活用する 生成AIの最もシンプルで強力な使い方が、CSSスニペットの自動生成です。「文字…
CSSボタンデザインをAIで複数パターン一気に量産する
デザインの選択肢をAIで一気に広げる ボタンひとつとっても、フラット・アウトライン・グロー・グラデーション・ガラス風など…
カードコンポーネントをHTML+CSSごとAIで一括生成する
コンポーネント単位でAIに依頼するのが鉄則 ページ全体を一度に作ろうとするとAIの出力が長くなりすぎ、既存HTMLへの組…