HTML 作ったHTMLをスマホで使いたい人へ。Vercelで無料公開する手順をまとめました
作ったHTMLファイルをスマホで使いたくて、Vercelで公開してみました。Vercelとは何かという説明から、フォルダの作り方、ターミナルでのコマンド、URLが発行されるまでの流れを実際の画面の順番どおりにまとめています。
プログラム
HTML 
AI データベースを使うPHPサイトをローカルで確認したい。DockerでNginx環境を作る方法【コード全部あり】
Web制作の勉強中に、データベースを使うPHPサイトをローカルで確認する方法がわからず困りました。DockerでNginx・PHP-FPM・MySQL・phpMyAdminの環境を作った手順を、各ファイルのコードごと初心者目線でまとめています。
AI データベースが怖かった私が、PHPのファイル構成を理解するまで【コード例つき】
Web制作の勉強をしていて、ずっと避けていたものがあります。データベースです。触ったら何か取り返しのつかないことが起きるんじゃないか、という気持ちがありました。AIを使いながら学習していたのですが、出てくる言葉が英単語ばかりでした。PDOっ...
AI DockerでWordPress子テーマをローカル確認する手順｜本番サーバーに触らず修正できる環境を作った
WordPressの子テーマを、本番サーバーにアップロードせずローカルで確認する手順をまとめました。Docker Composeで空のWordPressとCocoon親テーマを立て、子テーマをマウントするだけです。実際に使ったdocker-compose.ymlも載せています。
CSS 【保存版】Tailwind CSS チートシート｜文字サイズ・余白・Flex・Grid・レスポンシブ対応まとめ
Tailwind CSSを使うたびに、text-xlって何pxだっけ？px-4って左右16pxだっけ？justify-betweenとitems-centerが毎回ごっちゃになる……そういうことで、よく表記方法を検索しているのですが、自分で...
Github 【GitHub】複数ブランチを同時に作業しても大丈夫？ ｜変更が消える心配を解消する
はじめにGitHubでブランチを使って開発していると「複数の作業を別のブランチを切って作業したい！」という場面がでてきますよね。私は最初、何も考えずにメインから複数のブランチを切って作業していました。ですが、片方をマージした際に気づきました...
PHP 【データベース】下層ページもURLパラメータを使いたい｜$config[‘query_string’]
データベースを使ったPHPサイトを作成していた時、トップページはURLでテキストが変わるようにできたのに、内部リンクを使ってトップページから下層ページに移動するとURLが元に戻ってしまう問題が起きました。例） ↓ 内部リンクで下層ページにア...
LP PHPファイルだけで「データベース風」にURLでHTMLを切り替える方法
はじめに「果物ごとにページを作りたいけど、毎回HTMLファイルをコピーするのは大変…」そんなときに便利なのが、PHPの配列をデータベース代わりに使う方法です。通常、Webサイトで大量のデータを管理する場合はMySQLなどのデータベースを利用...
PHP phpMyAdmin エクスポート＆インポート方法（上書き保存対応）
はじめにリモートサーバーのデータベースをローカル環境にコピーしたいとき、phpMyAdminのエクスポート・インポート機能を使うと簡単にできます。ただし、ローカルに同じテーブルが既にある場合、そのままインポートすると「テーブルはすでに存在し...
Docker 【Docker】docker-compose.ymlの書き方がわからない！rootと一般ユーザーの違いを初心者向けに解説
はじめにDockerを使ってPHP + MySQL環境を構築していると、こんな設定を見かけることがあります。// docker-compose.ymldb: image: mysql:8.0 environment: MYSQL_ROOT_...
Docker 【データベース×Docker】PHPサイトをローカルで動かす環境を作る方法｜Nginx
はじめにWeb制作をしていると、こんな場面がありませんか？コードを書いたけど、レンタルサーバーにアップロードしないと動作確認できないデータベースを使うページを作ったけど、ローカルで確認する方法がわからないPHPファイルをブラウザで開いても、...
Docker 【初心者でもわかる】 Docker Desktopを導入してPHPサイトで使えるようにする方法
はじめにDockerを使うには、まず Docker Desktop というアプリをインストールする必要があります。この記事では、Docker Desktopのインストールから、実際にPHPサイトを表示するまでの手順をまとめています。Dock...
AI 【Claude Code】機密ファイル（パスワードなど）をClaude Codeに読み込まないで欲しい時の書き方
私はAI を使用してサイトの作成をすることが多く、cursorやClaude Codeを使ってコードを修正してもらったりしています。Claude Codeは、AIがコードを読み書きしてくれるとても便利なツールです。しかし便利すぎるがゆえに、...
CSS 【背景画像に対応】CSSだけでリボン風デザインを作る方法｜clip-path
よく見かけるリボンCSSよく見かけるリボンの作り方は、色付き四角の左右に三角の背景と同じ色のものを被せてリボン風にするやり方です。疑似要素（::before / ::after）で白い三角形を重ねる方法です。下の画像は背景が画像になっている...
Claude Code VSCodeおすすめ拡張機能8選｜Web制作・PHP開発で実際に使っているものを紹介
VSCode（Visual Studio Code）は拡張機能を追加することで、より便利に利用できます。しかし初心者の方は、何を入れればいいかわからないおすすめの拡張機能を知りたいWeb制作向けの拡張機能が知りたいという方も多いと思います。...
Github 【GitHubパスワード管理】使うなら必須！パスワードやデータベース情報を安全に管理する方法
PHPやWordPress、Webサイト制作を学び始めると、GitHubでソースコードを管理する機会が増えてきます。しかし、その際に注意しなければならないのが「パスワードの管理」です。私も最初は、データベースのパスワードはどこに書けばいいの...
Github 【PHPファイル機密情報管理】他者に見られてしまう情報と見られないもの。AIに機密情報を読み込まれないようにする方法も解説
PHPでデータベースを利用し始めると、データベースのユーザー名やパスワードはどこに書けばいいの？ブラウザの検証ツールで他人に見られないの？CursorやClaudeなどのAIに読み込まれないようにできるの？といった疑問が出てきます。私自身も...
AI Claude CodeとClaude Designを使いこなす！設定からデザインHandoffまで完全ガイド
「AIにコードを書かせたい」「デザインをそのままコードに変換したい」——そんな夢を叶えるのが、AnthropicのClaude CodeとClaude Designです。この記事では、MacBookでゼロからセットアップし、Claude D...
CSS 【CSS】iPhone Safariで上下に余白ができてしまう問題
HTML・CSS・JavaScriptで制作したサイトを調整していた際、iPhone（iOS Safari）でのみ上下に白い余白が出てしまう現象に遭遇しました。問題の画像↓（ちなみにこのサイトはです！）調べていく中で分かった原因と、実際に効...
CSS 【JavaScript】Chart.jsでラベルを表示させたい！
自分用のメモとして記事を作成しました。ラベル表示で悩んでいる方にもお役に立てたらと思います！今回は下のようなグラフを作成します。別の記事で、Chart.jsが表示されない件についても記事にしているので、お困りの方はご参照ください！書き方HT...