AIでスクロール固定エリア内に展開するコンテンツを作る【CSS＋JS生成】
AIでスクロール固定サイドバー内のアコーディオンUIを生成する方法。position:stickyと開閉アニメーションの…
タグ
#HTML・CSS
「HTML・CSS」タグが付いた記事の一覧です。
AIでホバーすると浮き上がるカードデザインを作る【CSS生成】
AIでホバー時に浮き上がるカードデザインのCSSを生成する方法。translateYとbox-shadowを使ったホバー…
AIでモーダルウィンドウを作る【CSS＋JS生成】
AIでモーダルウィンドウを生成する方法。背景オーバーレイ・フェードアニメーション・×ボタンで閉じる機能まで、CSS+JS…
AIでハンバーガーメニューを作る【CSS＋JS生成】
AIでハンバーガーメニューを生成する方法。三本線が×に変化するアニメーションとナビの開閉をCSS+JSで実装。プロンプト…
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…
CSSグラデーション文字をAIで一瞬で生成する方法
AIをCSSジェネレーターとして活用する 生成AIの最もシンプルで強力な使い方が、CSSスニペットの自動生成です。「文字…
CSSアニメーションをことば一発でAIに生成させる
@keyframesはAIに書かせる時代 @keyframesの記法を毎回覚えておく必要はありません。「どんな動きをさせ…
HTML / CSS / JS まとめ｜コーディングの落とし穴・SEO・セマンティックタグの使い分け
HTML・CSS・JavaScriptの学習を締めくくる総まとめ記事。コーディングでよく起こるトラブルの対処法、SEOの…
レスポンシブWebデザインの基本｜メディアクエリ・ブレイクポイント・モバイルファースト
ウェブサイトをPC・スマホ・タブレットで快適に見せるレスポンシブWebデザインの基本を解説。viewportの設定、メデ…