パソコン

無料の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、作業用パソコンの選び方を解説

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

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

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

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

  3. パソコン

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

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

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

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

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




都市伝説記事おすすめ

人気の記事

最近の記事

  1. 不思議なニュース

    【少し都市伝説】NASA・アルテミス計画発表/ブルーオリジンの月面プロジェクト
  2. パワースポット

    赤城山のおすすめスポット【赤城公園】に行ってきた 周辺のパワースポットが凄い
  3. 海外・英語

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

    怖い話が好きな人におすすめな短編本 実話を基に書かれた【怪談和尚の京都怪奇譚】
  5. ブログ/雑記

    【ブログPV7000達成】一夜にしてユーザー数が80から700人に増えた:5ヶ月…
PAGE TOP