6日でできる 新HTML&CSS入門｜MAMPの起動と動作確認

6日でできる 新HTML&CSS入門｜MAMPの起動と動作確認

MAMPを起動してからHTMLをlocalhostで表示するまでを、現在のWindows版MAMPの標準ポートを踏まえて整理しました。直接ファイルを開く方法との違いや、表示できないときの確認方法も詳しく解説しています。

MAMPを正しく起動して、自分のパソコンをWebページの確認環境に変えよう。

MAMPのインストールが完了したら、次に行うのがサーバーの起動と動作確認です。

MAMPをパソコンへインストールしただけでは、ApacheやNginx、MySQLはWebサーバーやデータベースとして動作していません。MAMPを起動し、サーバーを開始することで、初めてブラウザからlocalhostへアクセスできるようになります。

ローカル環境でHTMLを学習するだけであれば、HTMLファイルをダブルクリックしてブラウザで開くこともできます。しかし、この方法ではWebサーバーを経由しません。

MAMPを使った動作確認では、HTMLファイルをDocument Rootと呼ばれる公開用フォルダーへ保存し、ブラウザからhttp://localhost:8888のようなURLでアクセスします。

この方法で表示できれば、次の機能が正しく連携していることを確認できます。

現在のWindows版MAMPには、Apache、Nginx、PHP、MySQLなどが含まれています。WebサーバーにはApacheまたはNginxを選択でき、MAMPの操作画面からサーバーを起動、停止できます。(MAMP)

ここでは、MAMPの起動、サーバーの状態確認、WebStartページの表示、HTMLファイルの作成と配置、localhostからのアクセス、表示できない場合の確認方法までを順番に見ていきます。

MAMPを起動する前に確認すること

MAMPを起動する前に、インストールが完了していることを確認します。

Windows版MAMPを標準設定でインストールした場合は、通常、次のフォルダーにMAMP本体が保存されています。

C:\MAMP

MAMPの起動方法には、主に次の二つがあります。

MAMPとMAMP PROの両方が表示されることがあります。

無料版を使って学習する場合は、MAMPを選択します。MAMP PROは、より高度なサイト管理機能などを備えた別の製品です。

MAMPとサーバーの違い

MAMPを起動することと、Webサーバーを起動することは、厳密には同じではありません。

MAMPは、Apache、Nginx、MySQLなどをまとめて管理するためのアプリケーションです。MAMPの操作画面を開いただけでは、サーバーがまだ停止している場合があります。

MAMPの設定によっては、MAMPを起動したときにWebサーバーとMySQLが自動的に開始されます。

Start/Stopの設定では、MAMPの起動と同時にApacheまたはNginxとMySQLを開始したり、MAMPの終了時にサーバーを自動停止したりできます。

最初は、自動起動の設定に頼るだけでなく、MAMPの画面でサーバーの状態を確認する習慣を付けましょう。

MAMPの操作画面を確認する

MAMPを起動すると、WebサーバーやMySQLの状態を管理する画面が表示されます。

バージョンによってボタン名や配置が変わることがありますが、主な機能は次のとおりです。

教材の画像と実際の画面でボタン名が少し違っていても、サーバーを開始する機能と停止する機能を確認できれば問題ありません。

WebサーバーとMySQLの状態を確認する

MAMPの画面では、ApacheまたはNginxとMySQLの状態を確認できます。

バージョンによっては、起動中のサービスが緑色の表示や点灯した状態で示されます。停止中の場合は、消灯した表示や別の色になります。

HTMLファイルを表示するだけであれば、Webサーバーが起動していることが特に重要です。

MySQLは、HTMLだけのページを表示するためには直接使用しません。ただし、MAMPの環境全体が正常か確認するため、MySQLの状態も見ておくとよいでしょう。

図1：MAMPの起動とサーバー状態の確認

この図から分かること

MAMPの操作画面を開いただけでは、ApacheやMySQLが起動していないことがあります。

Start ServersまたはLaunch Serversを選択し、WebサーバーとMySQLの状態が起動中になったことを確認します。

ApacheまたはNginxが起動すると、ブラウザからlocalhostへアクセスできるようになります。MySQLが起動すると、PHPやphpMyAdminからデータベースを利用できます。

WebStartボタンは、Webサーバーが正常に動いているかを確認するときにも役立ちます。

サーバーを起動する

MAMPを起動するには、以下のいずれかの方法を使用します。

• デスクトップに作成された「MAMP」アイコンをダブルクリック
• スタートメニューから「MAMP」を選択して起動

起動処理が始まると、ApacheまたはNginxとMySQLが順番に開始されます。サーバーの状態が起動中になるまで、少し待ちます。

サーバーが正常に起動すると、Start ServersがStop Serversへ変わる場合があります。

何度もボタンを押す必要はありません。起動処理中に連続して操作すると、現在の状態が分かりにくくなることがあります。

ApacheとNginxのどちらが起動するのか

MAMPでは、WebサーバーとしてApacheまたはNginxを選択できます。

使用中のWebサーバーは、SettingsまたはPreferencesのWeb Serverで確認できます。公式ドキュメントでは、同じ画面からApacheとNginxを選び、Document Rootを指定できます。

教材でApacheを使用するように指定されている場合は、Web Serverの設定がApacheになっていることを確認します。

HTMLの基本学習では、ApacheとNginxの細かな違いまで理解する必要はありません。どちらも、Document Rootに保存されたWebページをブラウザへ届ける役割を持っています。

起動後、以下の2つのサーバー状態を確認しましょう。

WebStartページを開く

すべてのサーバーが正常に起動した状態で、「Open WebStart page」ボタンをクリックすると、ブラウザにMAMPのWebスタートページが表示されます。

設定によっては、サーバーの起動後にWebStartページが自動的に開く場合もあります。

WebStartページには、MAMPの動作確認や管理に利用できる項目が表示されます。

MAMPの公式ドキュメントでも、WebStartページにはphpMyAdmin、phpInfo、My Websiteなどへの入口が用意されていると案内されています。

WebStartページがブラウザに表示されれば、少なくともWebサーバーが起動し、ブラウザからアクセスできていることを確認できます。

localhostとは

localhostは、現在操作している自分自身のパソコンを表す特別な名前です。

ブラウザにlocalhostを含むURLを入力すると、インターネット上の外部サーバーではなく、自分のパソコン内で動いているWebサーバーへ接続します。

localhost

localhostは、ローカルホストと読みます。

MAMPでlocalhostへアクセスすると、MAMPが起動しているパソコン内のApacheまたはNginxへページを要求します。

以下のURLをブラウザに入力して、Apacheサーバーの動作を確認します。

http://localhost

正常に動作していれば、MAMPのスタートページまたはApacheのデフォルトページが表示されます。

なぜ教材によってlocalhostのURLが違うのか

MAMPに関する教材では、次の二つのURLを見かけることがあります。

http://localhost

http://localhost:8888

これは、使用しているポート番号が違うためです。

MAMPの現在の初期設定でApacheを使う場合は、基本的にhttp://localhostを使用します。

教材にhttp://localhostと書かれていても、自分のMAMPでApacheのポートが8888になっていれば、URLに:8888を付ける必要があります。

Document Rootとは

Document Rootは、Webサーバーがブラウザへ公開するファイルを保存するフォルダーです。

Windows版MAMPの初期設定では、次のフォルダーがDocument Rootです。

C:\MAMP\htdocs

このフォルダー内にHTMLやPHP、画像などを保存すると、localhostからアクセスできます。

この表は、Apacheのポートが80で、Document Rootが初期設定のままである場合の例です。

ファイルの保存場所とURLの関係

Document Rootの中にあるフォルダー名やファイル名は、URLの一部になります。

たとえば、次の場所へHTMLファイルを保存したとします。

C:\MAMP\htdocs\lesson10_01.html

このファイルへアクセスするURLは、次のようになります。

http://localhost/lesson10_01.html

Document Rootより前のC:\MAMP\htdocsはURLには含めません。

図2：Document Rootとlocalhostの対応関係

この図から分かること

Document Rootは、localhostのURLの起点となるフォルダーです。

Windows版MAMPの初期設定では、C:\MAMP\htdocsがhttp://localhost/に対応します。

htdocs直下にlesson10_01.htmlを保存した場合は、localhostの後ろにファイル名を付けてアクセスします。

htdocsの中にlessonフォルダーを作った場合は、そのフォルダー名もURLの一部になります。

パソコン上のC:\MAMP\htdocsという部分を、そのままブラウザのURLへ入力するわけではありません。

VS CodeでDocument Rootを開く

HTMLファイルを作成するためにVisual Studio Codeを起動します。

VS Codeでは、HTMLファイルだけを単独で開くより、作業するフォルダー全体を開くと管理しやすくなります。

操作の流れは次のとおりです。

1. VS Codeを起動する
2. ファイルメニューを開く
3. フォルダーを開くを選択する
4. C:\MAMP\htdocsを選択する
5. フォルダーの選択を確定する
6. 左側のエクスプローラーにhtdocsの内容が表示されたことを確認する

学習用ファイルが増える場合は、htdocs全体ではなく、htdocs内に作成した学習用フォルダーを開く方法もあります。

C:\MAMP\htdocs\html-study

VS Codeでのファイル作成と編集

１．VS Codeを起動
２．サイドバーから「エクスプローラー」→「フォルダーを開く」

３．C:\MAMP\htdocs フォルダを開いて選択

ワークスペースの信頼を確認する

VS Codeでフォルダーを開くと、フォルダー内のファイルの作成者を信頼するか確認される場合があります。

「はい、作成者を信頼します」をクリックして作業開始

Workspace Trustは、フォルダー内のコードや設定が、VS Codeや拡張機能によって自動実行されることを許可するか判断するための機能です。信頼できないフォルダーは制限モードで開けます。

自分で作成したC:\MAMP\htdocs内の学習用フォルダーであり、中身を把握している場合は、信頼する操作を選択できます。

インターネットから入手した内容や、作成者が分からないフォルダーの場合は、すぐに信頼せず、制限モードで中身を確認しましょう。

新しいHTMLファイルを作成する

VS Codeのエクスプローラーで、新しいファイルを作成します。

ファイル名の末尾には.htmlを付けます。.htmlを付けることで、VS CodeがHTMLファイルとして認識し、タグの色分けや入力候補などを利用できます。

新規テキストファイルを作成します。拡張子は「.html」にします。

今回は、次のファイル名を使用します。

lesson10_01.html

ファイル名の大文字と小文字は、URLと一致させましょう。

Windowsでは大文字と小文字の違いが目立たない場合がありますが、将来LinuxのWebサーバーへ公開すると、別の名前として扱われることがあります。

HTMLを入力する

今回のサンプルでは、MAMPを通してHTMLファイルが正しく表示されることを確認します。

CSSはまだ使用せず、HTMLだけでページを作成します。

ファイル名： lesson10_01.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>MAMPの動作確認</title>
    </head>
    <body>
        <h1>ローカルサーバーの準備ができました</h1>
        <p>
            MAMPを使ってHTMLを表示しています。<br>
            次はページの内容を少しずつ増やしていきます。
        </p>
    </body>
</html>

行頭の空白になっている部分（インデント）は、Tabキーを押すか、Spaceキー4回で入力します。HTML の表示結果には影響を与えませんが、これを入れることにより HTML が読みやすくなります。

サンプルHTMLの内容を確認する

このHTMLには、動作確認に必要な基本的な要素を記述しています。

この段階では、文字色、背景、余白などを変更するCSSは記述していません。CSSによる見た目の調整は、CSSを扱う記事以降で学習します。

インデントを入れる理由

サンプルHTMLでは、要素の親子関係に合わせて行の先頭へ空白を入れています。

この空白をインデントといいます。

インデントは、TabキーまたはSpaceキーを使って入力できます。学習環境のルールに合わせて、Tabキー1回または半角スペース4個などでそろえましょう。

基本的なHTMLでは、インデントを増減してもブラウザ上の見た目はほとんど変わりません。

インデントの目的は、どの要素がどの要素の中に入っているのかを読みやすくすることです。

html
 └─ head
    ├─ meta
    └─ title
 └─ body
    ├─ h1
    └─ p

コードが長くなるほど、インデントをそろえることが重要になります。

HTMLファイルを保存する

入力が終わったら、ファイルを保存します。

Windowsでは、次のショートカットを使用できます。

Ctrl+S

VS Codeのタブに未保存を示す丸い印が表示されている場合は、まだ保存されていません。

保存が完了すると、丸い印が閉じるための×に変わります。ただし、VS Codeの設定やバージョンによって表示方法が異なる場合があります。

ブラウザで何度再読み込みしても修正が反映されないときは、最初にHTMLファイルが保存されているか確認しましょう。

ファイルの保存場所を確認する

今回のファイルは、次の場所へ保存します。

C:\MAMP\htdocs\lesson10_01.html

VS Codeのタブにlesson10_01.htmlと表示されていても、別のフォルダーへ保存されている可能性があります。

エクスプローラーに表示されているフォルダー構成を確認し、htdocs内にファイルがあることを確かめましょう。

Chromeからlocalhostへアクセスする

MAMPでApacheが起動していることを確認し、Chromeを開きます。

アドレスバーへ次のURLを入力します。

http://localhost/lesson10_01.html

Enterキーを押し、次の内容が表示されることを確認します。

ブラウザの表示例

ブラウザのタブには、title要素で指定したMAMPの動作確認と表示されます。

このページが表示されれば、次の連携が正常に行われています。

1. MAMPが起動している
2. Apacheが80番ポートで動いている
3. lesson10_01.htmlがDocument Rootに保存されている
4. ブラウザがApacheへリクエストを送っている
5. ApacheがHTMLをブラウザへ返している
6. ブラウザがHTMLを解析して表示している

図3：HTMLの作成からlocalhostで表示するまで

この図から分かること

MAMPを使ったHTMLの動作確認では、HTMLファイルの作成、保存、サーバーの起動、URLへのアクセスを順番に行います。

HTMLファイルは、MAMPのDocument RootであるC:\MAMP\htdocs内へ保存します。

Apacheが80番ポートで起動している場合は、ブラウザからhttp://localhostへアクセスします。ファイル名を指定する場合は、localhostの後ろへファイル名「lesson10_01.html」を付けます。

ページが表示されないときは、HTMLの内容だけを何度も書き直すのではなく、保存場所、サーバーの状態、ポート番号、URLなどを順番に確認することが大切です。

HTMLを確認する三つの方法の違い

HTMLファイルを表示する方法には、複数の選択肢があります。

ただし、すべての方法がMAMPの動作確認になるわけではありません。

localhostのURLから開く方法

MAMPの動作確認では、この方法を使用します。

http://localhost/lesson10_01.html

ブラウザからWebサーバーへリクエストを送り、WebサーバーがHTMLを返すため、MAMPとApacheの動作を確認できます。

アドレスバーがhttp://localhostから始まっていれば、MAMPのWebサーバーを経由しています。

エクスプローラーから直接開く方法

エクスプローラーでHTMLファイルを右クリックし、Chromeなどを選んで開くこともできます。

この場合、ブラウザのアドレスバーには次のような形式が表示されます。

file:///C:/MAMP/htdocs/lesson10_01.html

file://から始まる場合は、ブラウザがパソコン内のHTMLファイルを直接読み込んでいます。

HTMLの基本的な見た目を確認するだけなら直接開く方法でも構いません。

ただし、MAMPが正常に動いているかを確かめる場合や、将来PHPを実行する場合は、localhostからアクセスする必要があります。

修正内容をブラウザへ反映する

HTMLを修正したら、次の順番で確認します。

1. VS CodeでHTMLを編集する
2. Ctrl+Sで保存する
3. Chromeへ切り替える
4. 再読み込みする

Windowsでは、次のキーで再読み込みできます。

Ctrl+R

または、次のキーも使用できます。

F5

ファイルを保存していない場合は、ブラウザを再読み込みしても古い内容が表示されます。

作業終了時にサーバーを停止する

学習や制作が終わったら、MAMPのStop Serversを選択します。

ApacheまたはNginxとMySQLが停止したことを確認してから、MAMPを終了します。

作業終了時の基本的な流れは次のとおりです。

1. VS CodeでHTMLを保存する
2. Chromeで最後の表示を確認する
3. MAMPへ戻る
4. Stop Serversを選択する
5. WebサーバーとMySQLが停止したことを確認する
6. MAMPを終了する
7. 必要に応じてVS CodeとChromeを閉じる