パソコン

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

関連記事

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

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

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

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

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

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

  3. パソコン

    未経験者がwebコーディングの仕事を始めて1ヶ月経った感想

    webコーディングの仕事を始めて丁度1ヶ月が経過しました。先月…

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

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

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




都市伝説記事おすすめ

人気の記事

最近の記事

  1. 旅行

    長野観光の名所・御射鹿池の見所とアクセス
  2. 都市伝説

    クレジットカード情報が売られる…日本で実際に起きたネット犯罪の手口と対策
  3. 都市伝説

    【都市伝説】月の石とは?国立科学博物館で実物を見てきた
  4. ブログ/雑記

    スマホの画面が割れたのでiPhone修理工房で低価格で直して来た・おすすめの非正…
  5. 都市伝説

    「アトランティス大陸」が実在した可能性のある場所3つをご紹介
PAGE TOP