AIで数字がカウントアップするアニメーションを作る【JS生成】
AIで数字がカウントアップするアニメーションのJSを生成する方法。requestAnimationFrameとIntersection Observerを使った実装のプロンプト例・コードを紹介します。
タグ
#HTML・CSS
「HTML・CSS」タグが付いた記事の一覧です。
AIでホバーするとツールチップが表示されるUIを作る【CSS生成】
AIでCSSのみのツールチップを生成する方法。ホバーで上部に吹き出し表示、三角形の矢印、フェードアニメーションまでプロンプト例・コード付きで解説します。
AIでページ内リンクをスムーススクロールにする【CSS＋JS生成】
AIでページ内リンクをスムーススクロールにする方法。固定ヘッダーのオフセット調整まで含めたCSS+JSのプロンプト例・コードを初心者向けに解説します。
AIでダークモード切り替えボタンを作る【CSS＋JS生成】
AIでダークモード切り替えボタンを生成する方法。CSS変数を使った色管理とlocalStorageで設定を保存する実装のプロンプト例・コードを紹介します。
AIでコードブロックにコピーボタンを追加する【CSS＋JS生成】
AIでコードブロックにコピーボタンを追加する方法。Clipboard APIを使ったコピー処理とフィードバック表示のCSS+JSをプロンプト例・コード付きで解説します。
HTML / CSS / JS まとめ｜コーディングの落とし穴・SEO・セマンティックタグの使い分け
HTML・CSS・JavaScriptの学習を締めくくる総まとめ記事。コーディングでよく起こるトラブルの対処法、SEOの基本知識、セマンティックタグの使い分け、デザイン制作への応用までを体系的に解説します。
レスポンシブWebデザインの基本｜メディアクエリ・ブレイクポイント・モバイルファースト
ウェブサイトをPC・スマホ・タブレットで快適に見せるレスポンシブWebデザインの基本を解説。viewportの設定、メディアクエリの書き方、ブレイクポイントの目安、画像のレスポンシブ対応まで初心者向けにまとめました。
HTMLページ制作の基礎と実践 ― Webサイト構成・meta要素・フォルダ管理・CSS初期設計
WebサイトはヘッダーCSSリセット・フォルダ構成・meta要素など、コーディング前の設計が完成度を左右します。実践的なHTML/CSSページ制作の基礎を体系的に解説します。
HTML+CSS応用：position・transform・animation・擬似クラスの使い方
CSSのposition・transform・animation・擬似クラス・擬似要素を体系的に解説。要素の自由な配置から滑らかなアニメーション、:hoverや::beforeを使った装飾まで、モダンなWeb制作に欠かせないテクニックをコード例とともに紹介します。
HTML+CSS レイアウト基礎 ─ ボックスモデル・Flexbox・Grid を理解する
ボックスモデル・Flexbox・Gridを中心に、CSSレイアウトの基本を体系的に解説。ブロック/インラインボックスの違いから、現代的なFlexbox・Gridの書き方まで、コードサンプル付きで学べます。
CSS基礎：セレクタ・プロパティ・値から詳細度まで徹底解説
CSSはHTMLの見た目を整えるデザイン指示書です。セレクタ・プロパティ・値の基本構文から、クラス・IDの使い分け、カスケードの仕組み、詳細度のルールまでを体系的に解説します。
HTML・CSS・JavaScriptとは？Web制作に必要な3言語の役割と最初の一歩「Hello World」
Web制作に欠かせない3つの言語——HTML・CSS・JavaScript（jQuery）の役割をわかりやすく整理します。さらにテキストエディタのインストールから最初のHTMLファイル「Hello World」を作成するまでの手順を解説します。
HTML基礎：タグ・構造・要素の役割をゼロから理解する
HTMLの基本となるタグ・要素・構造を体系的に解説。//の役割から、セマンティックタグ、ブロック要素とインライン要素の違いまで、Web制作の土台となる知識をまとめています。