パソコン

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

前回xamppの導入方法と無料でコーディング作業ができるbrancketsについての導入方法をまとめました。

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

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

しかしそれらをインストールした後、どのようにコーディングをするのか?またどの様に反映させるか悩む方もいるでしょう。

今回はこれらを使ってブラウザ上で書き込んだコード正しく表示されるとこまでを説明していきます。



XamppとBraketsでデータを反映させる

 

まずはxammpを起動しapacheと書かれた横にあるstartボタンを押します。

xamppでやることはこれだけです。

続いてbracketsの方を見てみましょう。

まずは実験でbrancketsの中に入っているhtmlファイルを「Xamppファルダーの中(厳密にいうとそのさらに中のhtdocsフォルダー)」に移動させます。

そしてhtmlファイルをそのままクロームの最初の画面へドラッグアンドドロップすると

しっかりと表示されますね。

基本的にxamppを起動→brancketsで作業したhtmlとcssファイルを選択→クロームへそれらのファイルをぶち込む…

の順番でやっていけばしっかり表示されます。

テキストドキュメントからHTMLファイルを作る

 

まずはxamppファイルの中のhtdocsとファイルの中に名前は何でもいいので、新しいファイルを作ります。(基本的に新しいファイルを作るときはhtdocsファイルの中に作る)

そして右クリック→テキストドキュメントを開きます。

開いたら特に何も書き込まなくていいので、名前を付けて保存をクリックしましょう。

そしてここからが重要です。

保存するときのファイル名をindex.htmlと記入し、ファイルの種類は全ファイルにして保存します。

すると新たにhtmlファイルが追加されるので、これを右クリック→open with Brancktsを選択しましょう。

するとBranckets内でのコーディングが可能になります。

CSSファイルを作る場合も同様にテキストドキュメントから行います。

ファイル名は~.cssで保存しましょう

cssを書いても反映されない場合

 

一度軽くコードを書いてみましょう。

まずはhtmlの中をいじり表示させた文字を打ち込みます。

その後は<div>で囲ったtestの部分をcssで赤文字と30pxのサイズで表示されるようにしていきます。

ちなみに保存するときはCtrl+Sです。これをしないと保存されず反映もされないので、注意です

ともあれこれでオッケー!さっそくこの二つのファイルをクロームのトップ画面へドラッグアンドドロップすると…

CSSで書いたはずの赤文字とフォントの大きさが反映されてないです。

この場合の原因はhtmlにあります。

cssは単に書くだけではだめで、html内にcssを反映させてますよという記述を書く必要があります。

一応貼り付けておきますね。

<!DOCTYPE html>
<html>
<head>
<title>テストサイト</title>
<link rel=”stylesheet” href=”test.css”>
<meta charset=”UTF-8″>
</head>

こんなに書かなくても<head>~</head>の部分を入れれば反映されるはずです。

そしてもう一度クロームへドラッグアンドドロップすると…

無事反映されました。



F12を押すとクローム画面でcssをいじれる

 

windowsの場合ですがF12を押すとコンソール画面での編集が可能です。

これはあくまでも一時的なものなので、F5でリロードしたりする元に戻ります

この機能で確認しながらcssファイルをいじると安心です。

BracketsとXamppを使ったコーディング・まとめ

 

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

xamppとbrancketsを導入してあることが前提です。

1xamppのhtdocsで新たなフォルダを作る(テスト)

2.右クリックでテキストドキュメントを選択

3.名前はなんでもいいが、とりあえず保存

4.そのファイルを開き名前を付けて保存、index.htmlとつけてファイルの種類をすべてのファイルに

5.これで拡張子をHTMLファイルにできた

6.作ったファイルを右クリックし、open with brancketsを選択

7.これで自由にコーディングが可能に

8.適当にaaaaaaaaaaaaやtestと打ち込みCtrl+Sで保存

9.クロームを開いてそこにいじったindex.htmlを放り込むと

10.反映されます

11.cssファイルも先ほどと同様にテキストドキュメントの名前を付けて保存で~.cssで動く

cssを反映させるためにはhtml内に
<head>
<link rel=”stylesheet” href=”test.css”>
</head>
と記述する

全て保存しコンソール画面を開くと反映されてます。
コンソールからも仮編集が可能

12.これであとは自由に自分の作りたいサイトをコーディングするのみ

以上がBrancketsとXamppを用いたコーディング作業の始め方と確認でした。

時間のある方は教材などを使って基礎を学んでもいいかとしれません。

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

では!



関連記事

  1. ガジェット

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

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

  2. パソコン

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

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

  3. ガジェット

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

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

  4. YouTube

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

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

  5. ゲーム

    【バトルフィールド5】最新バトロワモードのおすすめと評価感想【ファイアーストーム】

    どうも、都市伝説系実況者のmsyです。ついにBF5にバトロワモ…

  6. ガジェット

    【Steam】セールがすごい?ゲーミングPCを買った初心者にこそおすすめしたいゲームサービス

    デスクトップパソコン、特にゲーミングPCを買う人の多くはゲームをプレイ…




人気の記事

最近の記事

  1. ガジェット

    空気清浄機で快適な空間を!プラズマクラスターとの併用でより効果的に!!
  2. 旅行

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

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

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

    【PS4】充電も出来てスペースも取らないおすすめスタンドをご紹介
PAGE TOP