パソコン

【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. パソコン

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

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

  2. YouTube

    【Youtube】動画編集におすすめのソフトや機材をご紹介・初心者が働きながら動画を作る

    ユーチューブを本格的に始めて1ヶ月が経過しました。恐らくこの記…

  3. ゲーム

    【BF5】初心者がバトルフィールド5の評価感想、おすすめな点をまとめる・モードとバトロワが凄い?

    今回のBF5は前作の1よりも遥かにその進化を体感できるぐらい面白いです…

  4. ガジェット

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

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

  5. ガジェット

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

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

  6. ガジェット

    パソコンのメモリの役割とオススメ(PC初心者向け)

    そもそもメモリの機能ってなに?メモリは複数のファイ…




人気の記事

最近の記事

  1. 「すごい引き寄せ」が本当に凄いから紹介させて。感想とレビュー:自分を知る本
  2. 旅行

    【日光東照宮】関東一の人気観光スポットご紹介!家康の謎に満ちたパワースポットが凄…
  3. 都市伝説

    【都市伝説】マンモスは今でも存在する?シベリアで発見された4万年前のオオカミとマ…
  4. ゲーム

    【デッドバイデイライト】初心者がプレイした感想をまとめてみた。キラーや他キャラ能…
  5. ゲーム

    【スマブラSP:発売】スイッチでのおすすめポイント:キャラ、マップ共にシリーズ最…
PAGE TOP