PLAN_B CREATORS
就労継続支援B型事業所
この事業所に問い合わせ
無料
お問い合わせ内容を教えていただけますか？
賃金・工賃について知りたい
仕事内容について知りたい
利用までの流れ・料金について知りたい
どのような施設なのか知りたい
自分でも利用できるのか知りたい
見学について知りたい
交通費や食事の補助などについて知りたい
事業所情報へ
書く前の準備！テキストエディタとブラウザ
2025/03/26
みなさん、こんにちは！
PLAN_B creatorsです。
今回はホームページを作るHTML・CSS言語を書く時に必要なアプリ、
テキストエディタの使い方とブラウザの見かたをご紹介します。
1.テキストエディターとは
htmlなどのプログラミング言語を書く時に便利なアプリです。
膨大な文字を書くと修正や編集をする時に一苦労しますが、
テキストエディターを使うことでどこに何があるかが一目でわかりやすく表示することができます。
2.ブラウザとは
Webサイトを閲覧する時に必要なソフトのこと。
Google ChromeやMicrosoft Edgeなどがこれに当てはまります。
テキストエディターで書いたコードが正しいかを確認するために使います。
3.テキストエディター（Visual Studio Code）の入れ方・初期設定
一般的に使われているVisual Studio Codeをパソコンにアプリを入れて使ってみましょう！
①下記の公式URLからダウンロードを行います。
https://code.visualstudio.com/download
Windowsでダウンロードする場合は下記の画像まで「はい」を押して、全てのチェックボックスにチェックをつけてから「はい」を押しましょう。
②Visual Studio Codeを起動して、拡張機能のアイコンから下記のプラグインをダウンロードしましょう。
・Japanese Language Pack for Visual Studio Code（日本語対応）
・Live Server（ブラウザ確認）
これでテキストエディターの準備が完了しました。
4.テキストエディターの使い方
準備ができたら、実際に文字を打ってブラウザで確認してみましょう！
①フォルダを作成します。
②Visual Studio Codeを立ち上げて、左のアイコン列の一番上にある「エクスプローラー」から「フォルダーを開く」から先程作成したフォルダを開きます。
③フォルダー名の横のアイコン「新しいファイル」をクリックして、ファイル名「index.html」にします。
④「index.html」をクリックしてファイルを開き、文章を記入してみます。
（ここの文章はなんでもOKです。）
⑤「ファイル」から保存。もしくは「Ctrl」を押しながら「S」を押すと保存できます。（Macの場合「Command」を押しながら「S」）
保存の状態は、ファイル名タブの横に白い点がある時は保存できていない状態、白い点がない場合はきちんと保存ができている状態です。
コードを新しく書くたびに保存する癖をつけておきましょう。
⑥右下にある「Go Live」をクリックするとブラウザが開きます。
書いた文章がブラウザで写っていればOK。
うまくいかない場合はVisual Studio Codeに戻って保存し直してから、
「Go Live」（一度開くと「Port：〇〇〇〇」に変わる）を再度押してみましょう！
５.まとめ
今回はコードを書く準備として以下のことをご紹介しました。
・コードを書くにはテキストエディターを使って書く。
・書いたコードはブラウザ（googleや Edge）で確認できる。
少しでもホームページ制作にご興味を持っていただければ幸いです。
PLAN_B creatorsでは、
ホームページ制作の他にも動画やイラスト制作などのクリエイターになるための学習をすることができます。
ご興味がございましたら、一度見学や体験に来てくださいね。
みなさまからのご連絡を、職員一同こころよりお待ちしております。
この事業所に相談してみよう
無料
お役立ちガイド
障害福祉事業所の皆さまへ
利用者募集にお困りならこちら
請求業務の対応にお困りならこちら
事業所運営にお困りならこちら
新規開所で困っているならこちら
スタッフ採用にお困りならこちら
