パソコン

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

関連記事

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

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

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

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

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

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

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

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

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

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

    ゲーミングPC購入者向け:グラフィックボードの性能とオススメ

    3Dソフトなどを使う重たい作業、ゲームなどをする場合、グラフィックボー…

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

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

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




都市伝説記事おすすめ

人気の記事

最近の記事

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

    【ニンテンドースイッチ】ソフトが揃った今がおすすめ:本体を使ってみた感想レビュー…
  2. 都市伝説

    【衝撃】古代文明「アトランティス」の謎と実在したかもしれない圧倒的軍事力とは
  3. パワースポット

    赤城山に眠る「御神水」の謎を現地調査してきた 赤城公園から300メートル下ると……
  4. ゲーム紹介/レビュー

    【PS4】クロスプレイのメリット・デメリット/PUBGがいよいよ発売か!?
  5. 都市伝説

    神隠しの都市伝説は実話なのか?真相と原因に迫る
PAGE TOP