【初心者向け】HTMLとCSSを開発環境（テキストエディタやブラウザ）の用意

はじめに

今回は初心者向けとして、「HTML」と「CSS」のコードを書き、Webページ開発をする方法を書きます。

自分のPCで開発をする環境のことを「ローカル環境」、開発する環境を用意することを「環境構築」と呼びます。  ローカル環境を構築することで、自分のPCさえあればインターネットに接続していなくても、HTMLやCSSのコードを書き、Webページ製作を進めることができます。

そのための環境を構築します。

対象者

WEBプログラミング初心者
HTMLをこれから学んでみたい人

開発環境

Mac PC
ブラウザ（Google chromeを推奨） 
テキストエディタ（VSCode推奨）

テキストエディタ

HTMLページの開発を進めるために必要なツールは、主に「テキストエディタ」と「ブラウザ」の2つだけです。まずは「テキストエディタ」から用意していきましょう。

テキストエディタ（以下、エディタ）とは、文書を作成するためのソフトウェア全般を指しますが、ここではプログラムコードを書くのに適した文書作成ソフトのことをエディタと言います。開発ではエディタを使ってファイルにコードを記述していきます。

基本的には何でもいいのですが、私は個人的に「VSCode」をオススメします。

Visual Studio Code

https://code.visualstudio.com/

費用：フリー

開発者：Microsoft

Platforms：OSX, Windows, Linux

ダウンロード手順

VSCodeは以下のリンクからダウンロード出来ます。

https://code.visualstudio.com/

Google Chromeの下に表示されたダウンロードファイルをクリック後、エディタをダウンロードファイルからアプリケーションフォルダにドラッグ&ドロップすると使用可能になります。

Finderでアプリケーションフォルダを開きVSCodeがあることを確認。Dockにドラッグ&ドロップして移動しておきましょう。

Rubyの環境開発記事では、テキストエディタの日本語化などの拡張機能についても記載していますので、興味ある方はそちらをご覧ください。

ブラウザの用意

次に「ブラウザ」を用意していきましょう。ブラウザとは「Internet exproler」や「Google chrome」などの、Webページを表示するためのツールです。MacやiPhoneでは標準で「Safari」がインストールされています。

「safari」でも問題はありませんが、今回は「Google Chrome」というブラウザをインストールして用いましょう。

Chromeの公式ページにアクセスし、画面中央の「Chrome をダウンロード」という青いボタンをクリックしてダウンロードを開始しましょう。

作業フォルダの作成

ここからは用意したエディタとブラウザを用いて実際にWebページを作成していきましょう。

まずはこれから作成するHTMLやCSSのファイルをまとめるための「フォルダ」を用意します。デスクトップにて右クリックで「新規フォルダ」を選択し、「html_sample」という名前のフォルダを作成します。

このフォルダをVSCodeで開いてみましょう。まず、先ほどインストールしたVSCodeを開き、画面左上の「Start」>「File open」から「html_sample」フォルダを選択してください。

HTMLファイルの作成

まずはHTMLを記述するファイルから用意していきましょう。先ほど表示したのサイドバーにて、「html_sample」という文字の上で右クリックをし、「New file」を選択します。

選択したディレクトリ内に新たなファイルが作成され、ファイル名の入力欄が表示されます。そこに「index.html」と入力し、Enterキーを押してファイルを作成します。これでHTMLファイルが作成されました。右側のサイドバーにも「index.html」という表示が増えたかと思います。

＜補足＞ファイル名を間違えて作成してしまった場合  ファイル名を間違えて入力して作成してしまった場合にはファイル名を変更しましょう。

サイドバーで変更したいファイル名の上で右クリックをし、「Rename」を選択することでファイル名を更新することが可能です。

作成した「index.html」にHTMLのコードを記述してみましょう。今回は以下に用意したコードをコピーして貼り付け、「command（⌘）」+「s」で保存してください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML_sample</title>
  </head>
  <body>
    <h1 class="title">Hello world!</h1>
  </body>
</html>

では、このHTMLの表示結果をブラウザで確認してみましょう。 デスクトップで「html_sample」フォルダを開き、その中にある「index.html」の上で右クリックをしてください。

「このアプリケーションで開く」という項目を選択し、「Google Chrome」を選択してください。

Chromeで画面上に「Hello word!」の文字が表示されれば成功です。

これは「index.html」ファイルをブラウザで読み込んで表示している状態です。つまり同ファイルを編集するれば、画面の表示も変わります。

試しに「index.html」を編集してみましょう。VSCodeに戻って、「index.html」内の <h1 class=“tilte…（略）タグの下の行に以下の１行を追加してみてください。

<p>Hello HTML!!</p>

コードを入力した後は、「⌘ + s」でファイルを保存しましょう。

では、先ほど表示結果を確認したブラウザのページを開き、画面左上の更新ボタンをクリックしてページを再読み込みしてください。

正しく「index.html」が保存されていれば、画面に「Hello HTML!!」という文字が追加されています。

CSSファイルの作成

今度はCSSファイルを用意し、先ほど作成したHTMLをCSSで装飾してみましょう。  先ほど「index.html」を作成した時と同様に、サイドバーの「html_sample」の上で右クリックをして「New file」を選択してください。表示されたファイル名入力欄に「stylesheet.css」と入力してEnterキーで作成します。

ファイルには以下のコードを貼り付け「⌘ + s」で保存してください。

.title {
  color: red;
}

これでCSSファイルも用意できました。

 「stylesheet.css」を「index.html」に適用するために、以下の1行を「index.html」のタグの中に追加してください。

<link rel="stylesheet" href="stylesheet.css">

では、先ほどと同じように、Chromeで表示結果を確認しているページを更新して再度読み込んでください。

「Hello world!」の文字が赤色になっていれば正しくCSSが読み込まれています。

＜補足＞変更されない時は

ファイルの保存ができていない

ファイル名を間違えている 

ファイルを作成する場所を間違えている 

「index.html」または「stylesheet.css」のコードが間違っている

といったことがないか、確認してみてください。

これで「HTML & CSS」の環境構築は完了です。

最後に

某プログラミング練習サイトや動画サイトで勉強中の初心者の方が、実際に静的サイトを作ってみたい！という時に参考になれば。

以下には「Ruby」や「Ruby on Rails」の環境開発の方法を記載しておりますので、興味がある方は合わせてどうぞ。

Rubyの環境開発

Railsの環境構築

K’s diary

プログラミング、ビジネスや時事ニュース、経営/人事、音楽や映画について書いていきます