個人開発・公開

エックスドメインのサブドメインをVercelに設定する方法:DNSのCNAME設定

エックスドメインで取得したドメインのサブドメインをVercelにつなぐ手順を解説。ネームサーバー別のDNS編集場所、CNAMEの入力例、末尾のドット、反映とHTTPSの確認方法を紹介します。
Web制作の基本

Chrome DevToolsでCSSの原因を調べる:読み込み・上書き・余白を切り分ける

CSSが効かないときは、別の指定を足す前に原因を三つへ分けます。「ファイルが届いていない」「指定が対象に当たらない・上書きされた」「指定は効いているが期待と違う」です。Chrome DevToolsで順に確認します。
個人開発・公開

カナポスの開発記録:LINE連携と予約配信の未完成部分を振り返る

カナポスは、未来の自分に宛てた手紙をLINEで受け取ることを目指して、僕が作ったアプリです。現在は公開を終了しています。この記事では、LINE認証やメッセージ保存に取り組んだ過程と、予約配信が未完成だったことを振り返ります。
個人開発・公開

合成オッズ計算アプリの制作記録:テンプレートと計算の前提

合成オッズ O = 1 / (1/o1 + 1/o2 + …) は、互いに排他的な結果に対し、どれが的中しても同じ払い戻し額となるよう金額を配分する理想化した計算です。すべてを同額で購入したときの結果とは違います。
AI活用

Claude CodeをVS Codeで使う:導入と最初の変更の確認方法

Claude Codeは、プロジェクトのファイルを参照し、編集やコマンド実行を支援する開発ツールです。便利さだけでなく、変更範囲を絞り、結果を自分で確認する流れまでを最初に決めます。
個人開発・公開

VercelでWebアプリを公開する:GitHub連携・環境変数・再デプロイ

VercelはGitHub等のリポジトリからWebアプリをビルドして公開できます。ただし、ローカルで動いたものを選ぶだけで必ず公開できるわけではありません。ビルド、環境変数、公開URLを順に確認します。
個人開発・公開

GitHubへコードを保存する:公開前の確認から初回pushまで

GitHubへアップロードする前に、公開範囲と除外するファイルを決めましょう。ここでは空のリポジトリへ、ローカルの小さなプロジェクトを初めてpushする流れを扱います。既存の履歴があるリポジトリへの強制上書きは扱いません。
個人開発・公開

金種計算アプリを作った記録:入力欄と合計表示をどう決めたか

僕がGeminiの力を借りて作った、金種計算ツール「Money Counter」の開発記録です。枚数の入力や合計の表示など、小さな機能をどう使いやすくしていったかを紹介します。
AI活用

AIとCSSの不具合を調べる:再現コード・仮説・検証を分ける

AIに「CSSが効かない」とだけ伝えると、原因を確認しないまま指定が増えることがあります。小さな再現コードと期待する結果を用意し、仮説を一つずつ検証しましょう。この記事では、CSSの中央揃えを題材に、練習用の質問例を紹介します。
制作サンプル

CSSと標準HTMLで作るUI部品4つ:クリックとキーボードで試す

JavaScriptなしでも作れる部品には、標準HTMLの動作を使う方法があります。折りたたみ、ラジオボタンによる表示切り替え、チェックボックス、リンクの反応を一つのページで試します。複雑なアプリの操作をすべてCSSで代用するものではありません。