パソコン

【Xampp】初心者でもwebサイトが作れる?コーダー必須の開発ツールの導入インストールまとめ

コーディングやWebアプリ開発に非常に無料役立つツール、それがXamppです。

例えばWebコーディングなんかでは自分のパソコン内にローカル環境と言うものを作る事ができます。

つまり簡単に言うと自分のパソコンの中にサイトを作る為の環境を構築することが出来ます。

もちろんコーディングしながらどの様にサイトが構築されているのか、進行状況なども確認もできます。

今回はそんな初心者から上級者コーダーまでも役に立つXamppの導入方法についてご紹介します。



公式サイトでXamppをインストール

 

まずはXamppの公式サイトに飛んでダウンロードとインストールを行いましょう。

New XAMPP-VM for X availableをクリックします。

するとこの様なチェックボックスが出てきますので、全てにチェックマークを入れましょう。(基本に最初からこの形になっている)

こうしておけばXampp全てのコンポーネントをダウンロードできます。

チェックを入れたらNextをクリック。

今度はダウンロードしたXamppをどこに入れるのかを選択します。

特にこだわりがなければ初期状態でオッケーです。

僕は念の為自分のパソコン内に保存フォルダーを作りました。

もしも保存先を指定したい場合は、自分で作ったフォルダーのパスを上の画像の「Select a folder」と書かれた箇所に打ち込みましょう。

そしたら再び’nextをクリックして先へ進みます。

ここもそのままNextをクリック。

インストールが開始されるので、しばらく待ちましょう。1分もあれば終わります。

終わったら上のチェックボックスに印を入れてFinishを押します。

このチェックボックスは後の設定が終わったあとXamppを自動で起動するという意味です。

インストールが終わったら言語を選択します。

残念な事に日本語はないので英語を選びましょう。

するとXamppのコントロールパネルが自動で起動しますので、1番上のapacheのstartと書かれた部分をクリックしましょう。(コーディング作業をする時は基本的にこのボタンだけ押します)

先程指定したファイルの中にしっかりと保存されていますね。

ちなみに今後コーディング作業を行う時はこのXamppフォルダー→htdocsフォルダーの中にhtmlやcssファイルを置いて作業する事になります

正常にインストールされたかテストする

 

とその前にXamppが正常にインストールされて反映されているか軽くテストしてみましょう。

設定は先程のまま、コントロールパネルのapache部分をstartにした状態にします。

そして検索エンジンでhttp:localhostと打ち込みましょう

その後この様な画面が出てきたのであれば成功です!

Xampp入れ方まとめ

 

ここで一回まとめに入りましょう。

1.Xamppダウンロード

2.インストール(僕は)ダウンロードを別フォルダに移動した(念のため)

3.全てチェックをしてOK(コンポーネントをすべてダウンロード)

4。作成するフォルダはそのままでオッケー

5.インストールを開始

6.終わったらfinishボタン(上の部分もチェックしておくと今すぐにコントロールパネルを作ってくれる)

7.言語は英語を選択

8.コントロールパネルが自動で開く

9.ブラウザでhttp:localhostのリンクを開いてこの画面がでればオッケー

10.基本的にコーディング作業をするときはXamppフォルダーのhtdoccsフォルダーの中にhtmlファイルなどを入れて作業

この通りにやれば大丈夫ないハズです。

Xamppの導入が終わったら、今度は無料のエディター・Bracketsをダウンロードしてみましょう。

【Brackets導入方法】初心者でもWebサイトをコーディングできる無料のエディがおすすめ

こいつをダウンロードしておけば後はコーディングを始めるだけです。

ーBracketsのインストールが終わったら今度は無料のエディターをダウンロードして実際にWebサイトを作ってみましょう。

無料のBracketsとXamppを使って初心者コーダーでもサイトをコーディングする手順まとめ

もしもまだコーディングはちょっと…という方がいれば基礎知識を学んでから実践に入ってもいいかもしれません。

この記事が少しでもお役に立てれば幸いです。

では!



ピックアップ記事

  1. 【都市伝説83選】日本と世界に散らばる面白い都市伝説をまとめて公開(神話・心霊等…
  2. 【都市伝説】ネッシーの正体は水獣ケルピーだった?伝説のクロウストーンに隠された謎…
  3. 三途の川と賽の河原は今でも日本に実在する?恐山と加賀の潜戸に伝わる都市伝説
  4. 映画の始まりはハリウッドではなかった?フィルムの歴史と都市伝説を解説
  5. 【都市伝説】月の石とは?国立科学博物館で実物を見てきた

関連記事

  1. パソコン

    無料のBracketsとXamppを使って初心者コーダーでもサイトをコーディングする手順まとめ

    前回xamppの導入方法と無料でコーディング作業ができるbrancke…

  2. ガジェット/レビュー

    [PC購入者向け]HDDとSSDの違いを簡単に解説

    そもそもHDD(ハードディスク)とはなにか?H…

  3. ガジェット/レビュー

    MacとWindowsはどっちがおすすめか?実際に両方を使ってみた感想や違いを解説

    皆さん、パソコンは何を使っていますか?よくパソコンはMacとW…

  4. ゲーム紹介/レビュー

    マウスパッド×ゲーミングPCでFPSの勝率は変わるのか?PUBGとBF5を実際にプレイしてみた

    先日アマゾンでとある商品を購入しました。ズバリ、マウスパッドで…

  5. ガジェット/レビュー

    パソコン購入者向け:CPUの性能や違いを解説

    CPU=処理速度/サクサク作業ゲーミングPCに関わ…




都市伝説記事おすすめ

人気の記事

最近の記事

  1. 都市伝説

    幻のアポロ20号が発見した月のモナ・リザと巨人、ピラミッドの謎とは?【都市伝説】…
  2. 不思議なニュース

    なぜ?マンモスの骨800個以上が罠の中から発見される inメキシコ 1万5000…
  3. 都市伝説

    日本に伝わる伝説の妖怪・予言獣「件」の都市伝説
  4. 読書レビュー

    【自己啓発本】行動力・ヤル気が上がるおすすめのベストセラー本7冊をご紹介:今年は…
  5. ガジェット/レビュー

    [PC購入者向け]HDDとSSDの違いを簡単に解説
PAGE TOP