パソコン

無料の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. パソコン

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

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

  3. ガジェット

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

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

  4. ゲーム

    【PUBG】PS4版とPC版の違いを実際に比較してみた・プレステ版の評価感想

    どうもmsyです。未だに人気の衰えないバトルロワイヤル…

  5. ガジェット

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

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




人気の記事

最近の記事

  1. ゲーム

    BO4のバトロワモードをレビュー!斬新なバトロワが楽しめる
  2. ブログ

    初心者のブログPV数が1万3000を超えた話:12月のアクセスは増えたが徐々に下…
  3. ゲーム

    【フォートナイト検証】集中力を増やす科学的心理効果を使ったらゲームでも楽々勝てる…
  4. ガジェット

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

    【都市伝説系Youtuber:おすすめ】人気急上昇中の面白い4人のユーチューバー…
PAGE TOP