【初心者向け】Webサイトを作成するためのフォルダとファイルの準備

フォルダーとHTMLファイル_アイキャッチ
こばゆた
こばゆた

今回はWebページを作るためのフォルダーとHTMLファイルを作成し、画面に表示するところまでをやっていこうと思います

きなこ
きなこ

ようやく一歩が踏み出せるって感じだね!

こばゆた
こばゆた

ちなみにブラウザは”chrome”、テキストエディターは”VS Code”で制作をしていきますのでご了承ください

ダウンロードがまだの方はこちらです

chrome

VS Code

チャッピー
チャッピー

やることが多そうだけど頑張ろう!

スポンサーリンク

1.フォルダを作る

Macの場合

Macでのフォルダの作り方

Windowsの場合

Windowsでのフォルダの作り方

フォルダーはお仕事などでも作る事があると思うので問題無いと思います。

スポンサーリンク

2.テキストエディターを起動しフォルダを読み込む

フォルダーの読み込み方
  • STEP1
    VS Codeを起動する
    起動するとこのような画面が出てきます。フォルダーの読み込み方step_1
  • STEP2
    左のサイドバーの一番上のマークをクリック
    フォルダーの読み込み方step_2
  • STEP3
    ウインドウが出てきたら「フォルダーを開く」をクリック
    フォルダーの読み込み方step_3
  • STEP4
    フォルダーを選択して開く
    フォルダーの読み込み方step_4↑ちなみに左下の「新規フォルダ」からでもフォルダは作成できます
    Windowsはコチラフォルダーの読み込み方step_4_winフォルダーの読み込み方完成
こばゆた
こばゆた

上の画面になれば開くことができています

ちなみにフォルダーをエディターにドラッグしても開く事ができます

フォルダーの読み込み方

またVS Codeが日本語になってない場合は以下の順で日本語化できます。

Vs Codeでの日本語化の方法
こばゆた
こばゆた

作業が終了したらリスタートするか聞かれるので「Restart Now」をクリックしてVS Codeを再起動すればおkです

3.HTMLファイルの作成

HTMLファイルの作り方
  • STEP1
    フォルダーが開けたら「新しいファイル」を選択
    VS-Codeでのファイルの作り方step-1
  • STEP2
    ファイル名を入力する
    VS-Codeでのファイルの作り方step-2目次となるページには”index.html”と付けます
  • STEP3
    enterを押せば完成
    VS-Codeでのファイルの作り方step-3
こばゆた
こばゆた

これでHTMLファイルが完成しました

ちなみに〇〇.htmlの”.html”の部分を拡張子と呼ぶので合わせて覚えておきましょう

4.ブラウザに表示する

せっかくなので文字を入力してみましょう。

ブラウザでの表示の仕方_1

“HELLO WORLD”と入力することが多いのでそこは慣例にならって入力…。

ブラウザでの表示の仕方_2
こばゆた
こばゆた

“VS Code”には設定でオートセーブの切り替えができますが設定されていない場合は“⌘+S”で保存をします。

保存をしたらブラウザを開いて作成したHTMLファイルをドラッグします。

こばゆた
こばゆた

今までの手順が間違ってなければ問題なく表示できていると思います

チャッピー
チャッピー

おお!自分で書いた文章がパソコンに表示された!

きなこ
きなこ

なんかうれしいね!

5.まとめ

フォルダーとHTMLファイルの作成まとめ

1.フォルダーを作成

  1. デスクトップで右クリック
  2. 「新規フォルダ」を選択
  3. 名前をつける

2.エディターを起動してフォルダーを読み込む

  1. VS Codeを起動
  2. 左のサイドバーの一番上のマークをクリック
  3. 「フォルダを開く」を選択
  4. フォルダのある場所から選択して開く

3.HTMLファイルを作る

  1. 「新しいファイル」を選択
  2. ファイル名をつける(最初のページは”index.html”と付ける。また〇〇.htmlの”.html”の部分を拡張子と呼ぶ)+”enter”

ブラウザに表示するにはブラウザを開いてドラッグする

コメント