パソコン

【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. ガジェット

    I-O DATAのゲーミングモニターをレビュー・10年前のモニターと比較した結果…おすすめ過ぎ

    先日、超高スペックゲーミングモニターを購入しました。その名もI…

  2. ガジェット

    超初心者向け:ゲーミングPC、作業用パソコンの選び方を解説

    仕事用の高性能パソコンやゲーミングPCの購入を検討している方にとって、…

  3. ゲーム

    【PUBG】PS4版とPC版の違いを実際に比較してみた・プレステ版の評価感想

    どうもmsyです。未だに人気の衰えないバトルロワイヤル…

  4. パソコン

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

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

  5. パソコン

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

    初心者でもWebサイトを無料でコーディング出来るおすすめのツールがあり…

  6. パソコン

    初心者がWordPressをカスタマイズしたくてコーディングを始めたけど、やはり必要なかった話

    ブログを始めて早6ヶ月が過ぎました。この間に完全初心者コーダー…




人気の記事

最近の記事

  1. 海外

    吸血鬼は存在する?海外に蘇ったヴァンパイアと4000年の謎・都市伝説を検証
  2. 都市伝説

    幻のアポロ20号が発見した月のモナ・リザと巨人、ピラミッドの謎とは?【都市伝説】…
  3. ガジェット

    【PS4】充電も出来てスペースも取らないおすすめスタンドをご紹介
  4. 【自己啓発本】行動力・ヤル気が上がるおすすめのベストセラー本7冊をご紹介:今年は…
  5. 旅行

    多摩湖自転車道を通って絶景の夕日を観に行く。おすすめの東京サイクリングスポット
PAGE TOP