XAMPPでHTMLを使ったローカルサイトの作り方を解説

  • PR
  • ローカル開発環境
XAMPPでHTMLを使ったローカルサイトの作り方を解説

今回はローカル環境構築ソフトの「XAMPP」を実例にしながらHTMLを使ったローカルサイトの作り方について詳しく解説します。この記事の内容は次の方におすすめできます。



▼この記事がおすすめの人

  • XAMPPを使ってローカル環境を構築している
  • 簡単なローカルサイトの作り方について確認したい
  • Webサイト制作やPHPプログラミングを学習している
この記事ではローカルサイトの作成に必要なフォルダ・ファイルを用意する方法や、Apacheでドキュメントルートを設定する方法について詳しく解説します。ローカル環境にXAMPPを使っている方はこの機会にぜひご確認ください。

▼この記事を書いたひと

フリーランスみやしも（@miyashimo_blog）です。プログラミングやWebサイト制作に関するITの情報を幅広くお届けしていきます。

目次

ローカルサイト構築の全体像

XAMPPを使ってローカルサイトを構築するためにも、まずは作業の全体像から確認してゆきましょう。

必要なもの・構成について

今回のローカルサイトを作るためには、次のものが必要になります。



▼ローカルWEBサイトの作成に必要なもの

  • 【Webサイト】HTML(かんたんなものでOK)
  • 【XAMPP】Webサーバー(Apache)
ローカル環境でApacheを利用するイメージ.jpg

ローカルWEBサイトには『localhost』という、自分のPCで使えるドメインの様なものを利用してWEBブラウザでアクセスできます。

フォルダ・ファイルを自分のPCに公開するために『Apache』を使用する。ローカルWEBサイトには『localhost』というドメインの代わりになるものを使ってアクセスする。

今回の作業にあたってXAMPPを導入していないという方は、次の記事も合わせてご参考くださいませ。

おススメ記事
XAMPPのインストール方法を初心者向けに徹底解説この記事では『XAMPP(ザンプ)』のインストール方法について詳しく解説していきます。PHPやWordPressのローカ...

WEBサイトを構築するための３ステップ

ローカル開発環境にWEBサイトを構築するために、今回は次の３つのステップで作業を行います。



▼WEBサイトを構築するための３ステップ

  1. 公開フォルダとHTMLの準備
  2. Apacheの設定・起動
  3. ブラウザでWEBサイトにアクセスする
順番に作業をすすめてゆきましょう！

STEP1. 公開フォルダとHTMLの準備

まずはApacheで公開するための『公開フォルダ』と、実際にWEBブラウザに表示させるための『HTMLファイル』を用意します。

 公開フォルダを作成する

『公開フォルダ』とは、ドメインを通してインターネット上に公開されるフォルダのことを言います。

Apacheでは『ドキュメントルート』という言葉でも表現されます。

今回はローカルWEBサイトを作成するので、自分のPCにフォルダを作成します。次の様にフォルダを作成してみましょう。

▼公開フォルダ
C:\xampp\webroot
XAMPPでApacheを使いこなそう＿ドキュメントルート用フォルダを作成する.jpg

このフォルダは後ほどのApacheの作業でも必要になりますので、パスを控えておく様にしましょう。

日本語を含むパスはエラー等の原因になるため、Apacheを利用する上では避ける様にしましょう。
なるべく分かりやすい場所にフォルダを作成するのがおススメです。

 HTMLファイルの設置

公開フォルダを作成したら、そのフォルダ中にHTMLファイルを設置しましょう。



今回はApacheの動作確認のため、確認用のHTMLを用意しました。



▼確認用のHTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>こんにちは</title>
</head>
<body>
    <p>こんにちは</p>
</body>
</html>



▼確認用HTMLの使い方

上記の内容をテキストファイルなどに貼り付けて、ファイルに保存しましょう。またこの際は『index.html』名前で保存します。



このうえで作成したHTMLファイルを、公開フォルダに配置しましょう。

XAMPPでApacheを使いこなそう＿HTMLファイルを設置する.jpg
HTMLファイルを公開フォルダに設置した状態

以上で『公開フォルダ』と『HTMLファイル』の準備は終わりです。

STEP2. Apacheの設定・起動

今度はApacheの設定を行いましょう。

Apacheの設定ファイル(httpd.conf)を開く

XAMPPコントロールパネルを開き『Config->Apache(httpd.conf)』を選択してApacheの設定ファイルを開きましょう。

Apacheの設定ファイルを開く方法.jpg

XAMPPコントロールパネルの使い方が分からない方は、次の記事が参考になります。

おススメ記事
【XAMPP】Apache・MySQLの使い方を解説する【使い方講座②】本投稿ではPHPのローカル開発環境を構築することが出来る『XAMPP（ザンプ）』に含まれるApacheやMySQLなどの...

Apacheの設定ファイルを修正する

Apacheの修正ファイル(httpd.conf)を開いたら、以下の内容を修正しましょう。



▼設定ファイルで修正する内容

  • 【行252】『DocumentRoot』のパスの内容を公開フォルダのパスに修正する
  • 【行253】『Directory』のパスの内容を公開フォルダのパスに修正する
XAMPPでApacheを使いこなそう＿Apacheの設定内容.jpg
Apacheの設定ファイルで修正する内容
修正作業が終わったらApacheの設定ファイルを保存しましょう。

Apacheの再起動をする

設定ファイルの修正が終わったら、忘れずにApacheの再起動をかけておきます。

再起動を行わないと修正した設定ファイルの内容が反映されないので注意しましょう。

Apacheの再起動は、XAMPPのコントロールパネルで『Stop(停止)』→『Start(開始)』の順番に操作すればOKです。

XAMPPの使い方＿再起動の方法.jpg
Apacheを再起動する方法

設定ファイルを修正し、再起動ができればApacheの準備は完了です。

以上でローカルWEBサイト構築の作業はおわりです。

STEP3.ローカルWEBサイトにアクセスする

それでは最後に、Apacheで構築したローカルWEBサイトにアクセスしてみましょう。

ブラウザでWEBサイトのURLを開く

ローカルWEBサイトにアクセスするには、記事のはじめの方にも登場した『localhost』というドメインの代わりとなるものを利用すればアクセスが出来ます。

▼ローカル開発環境のURL
http://localhost:80/
※コピペしてブラウザのアドレスバーに貼り付けましょう

Apacheの設定が上手く出来ていれば、次の様なWEBページが表示できます。

XAMPPでApacheを使いこなそう＿WEBブラウザで見てみる.jpg
上記の様に作成したHTMLが表示できれば、これまでの作業は成功となります。

以上でApacheを使用したローカルWEBサイトの作成は終わりです。

ここまでの作業、お疲れ様でした！

この記事のまとめ

この記事では、XAMPPに含まれているApacheを使用した、『ローカルWEBサイト』の作り方について解説を行いました。



今回の作業に登場した知識はいずれも、ローカル開発環境を使いこなす上ではかかせないものとなります。



このうえで、これらツールの扱い方が習得できれば、PHPを使用したWEBサイト制作やプログラムの開発作業もスムーズに進められることが可能となります。

プログラミングを学習中の方は、ぜひトライしてみてくださいね！

関連記事