【第２回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

はじめに

今日から早速ウェブサイト作りを始める。サーバーを借りていないので自分のパソコン上でしか動かないが、いずれ完成形を公開するつもりで頑張ってみる。

さあ始めるか！
と思ったが「テキストエディタ」なるものがあると便利らしい。

「テキストエディタ」とは、文字を入力したり、編集したり、保存しておいたりするソフトである。
メモ帳でもできないことはないが、専用ソフトを使えばコードを色分けしてくれたり、入力内容を予測してくれたりと便利そうだ。

AriはMacBook Air、SivはSurface Pro 8なので、それぞれテキストエディタをインストールしてみる。

Visual Studio Code

テキストエディタはたくさんあるようだが、ウェブサイト編ではWindowsでもMacでも使えるMicrosoftの「Visual Studio Code」を使うことにした。

まずVisual Studio Codeのサイト（https://code.visualstudio.com/download）にアクセスし、OSに合わせたダウンロードボタンをクリックする。

引用元:https://code.visualstudio.com/download (2023.11.14)

.zipやCLIはまったくわからないので、一番大きなボタンをクリックし、ダウンロードされたファイルを開いたらインストール完了ということにしておく。今のところ不都合はないのでたぶん大丈夫だろう。

しかしVisual Studio Codeを開いて待ち受けるのは見渡す限りの英語である。ただでさえプログラミング言語がわからないのだからせめて日本語にしたい、、と調べたら「拡張機能」で日本語版をインストールできるらしい。

Macは「Shift⇧＋command⌘＋X」、Windowsは「Shift⇧+Ctrl+X」で拡張機能が開く。「Japanese Language Pack for Visual Studio Code」が日本語版のようなので、これをインストールして有効にする。ちなみに地球儀のアイコンが言語の拡張機能なので、これを目印に探した。

かろうじて読めるようになったので、これでコードを入力する準備はできた。

Google Chrome

HTMLはブラウザで開くことで表示できるので、いつも使っているGoogle Chromeなり、Safariなり、Firefoxなりも用意しておく。
我々は標準ブラウザをGoogle Chromeにしているので、そのまま使うことにする。

その他に用意するソフトなどは無いようなので、これでHTMLを使うための環境構築は完了である。

最後に

今回はテキストエディタとして「Visual Studio Code」の日本語版をインストールした。
次回から実際にコードを書いて、ウェブサイトを作っていくのでお楽しみに！

最後まで読んでいただき、ありがとうございました！