【初心者向け】MAMP・XAMPPのインストールと初期設定を完全解説!


Web開発を学び始めたばかりの方にとって、まず必要なのがローカル環境の構築です。 この記事では、PHPの学習やWordPressの動作確認に役立つ「MAMP」「XAMPP」というローカルサーバーの使い方を、初心者向けにわかりやすく解説します。


MAMPとXAMPPとは?

項目MAMPXAMPP
対応OSmacOS / WindowsmacOS / Windows / Linux
使いやすさ初心者向けでシンプル多機能で中級者以上にもおすすめ
MySQL操作あり(phpMyAdmin付き)あり(phpMyAdmin付き)
PHPバージョン選択Pro版で可能複数バージョン対応(インストール時に選択)

どちらも「Apache + MySQL + PHP」の環境をワンクリックで構築できる便利なツールです。


1. MAMPのインストール手順

1-1. MAMPのダウンロード

  1. 公式サイトへアクセス
  2. mac または Windows の「Free Download」ボタンをクリック
  3. ダウンロードしたインストーラーを起動

1-2. インストール手順(例:mac)

  1. ダウンロードした.pkgファイルを開く
  2. 「続ける」「同意する」などを選択しながら進める
  3. インストールが完了したらアプリケーション > MAMPフォルダに配置されます

1-3. 初期設定

  1. MAMPを起動し、コントロールパネルが表示される
  2. 「Preferences(環境設定)」 > 「Ports」で下記のように設定するのがおすすめ
Apache: 8888
Nginx: 7888
MySQL: 8889
  1. 「Web Server」タブでドキュメントルートを確認(例:/Applications/MAMP/htdocs

1-4. ブラウザでの動作確認

  1. htdocs フォルダに index.php を作成(例:<?php phpinfo(); ?>
  2. ブラウザで http://localhost:8888/ にアクセス
  3. PHP情報ページが表示されれば成功!

2. XAMPPのインストール手順

2-1. XAMPPのダウンロード

  1. 公式サイトへアクセス
  2. OSに応じて「Download」ボタンをクリック(macOS / Windows)
  3. インストーラーを起動

2-2. インストール手順(例:Windows)

  1. .exeファイルを実行
  2. セキュリティ警告が出たら「許可」
  3. Apache, MySQL などを選択して進める(基本はすべてオンでOK)

2-3. XAMPPの起動と確認

  1. XAMPP Control Panel を起動
  2. 「Apache」「MySQL」をそれぞれ「Start」ボタンで起動
  3. ブラウザで http://localhost/ にアクセス → XAMPPの初期画面が表示されればOK!

2-4. ファイル配置と表示確認

  1. htdocs フォルダ内にPHPファイルを作成
  2. 例:htdocs/test/index.php → ブラウザで http://localhost/test/ にアクセス

3. よくあるトラブルと対処法

症状対処法
Apacheが起動しないSkypeや他アプリがポート80を使っている→アプリを終了またはポート変更
403 Forbidden が出るファイルやフォルダのパーミッションを確認(644, 755推奨)
ブラウザで localhost が表示されないApacheが未起動/ファイル名ミスなどを確認

4. まとめ

MAMPもXAMPPも、数クリックで簡単にWebサーバー環境を構築できる強力なツールです。

  • MAMP:macユーザーやシンプル操作が好きな人におすすめ
  • XAMPP:Windowsユーザーや多機能を使いたい人に最適

PHP学習やWordPress開発の第一歩として、ぜひ使いこなしてみてください!

✪ 画像素材がないものはランダムで表示されるようになっています。フリー素材などでご用意ください。

おすすめChromeプラグイン一覧

プラグイン名特徴
GoFullPageウェブページ全体のスクリーンショットを簡単に取得できるブラウザ拡張機能です。
ColorZilla色を抽出するための拡張機能です。
WhatFontウェブページ上のフォントの情報を簡単に確認できるブラウザ拡張機能です。
PerfectPixelデザイナーが作成したデザインと実際にコーディングされたウェブページがどの程度一致しているかを確認・調整するためのブラウザ拡張機能です。

模写の手順

ステップ内容
ステップ 1構図を手書きか全画面スクショ(Go full page等)した後、ペイントツールで四角で囲い、大まかなclass,命名規則をあらかじめ決める。
ステップ 2HTMLの基本構造を作成する
ステップ 3CSSでレイアウトを模写する
ステップ 4 中級〜JavaScriptを追加して動きを再現する
ステップ 5最終調整を行い、検証ツールやPerfectPixel(chromeプラグイン)などで完成を確認する。