テキストエディタの使用

Windowsであれば、メモ帳（notepad.exe）でテキストの編集を行っていると思いますが、HTML・CSS・JavaScriptのようなマークアップ言語・プログラミング言語を編集するには、Visual Studio Codeのような専用の「テキストエディタ」の使用がおすすめです。

Visual Studio Code

Visual Studio Codeはマイクロソフトが提供しているプログラミング言語の編集に最適化されているテキストエディタです。Windows、MacOSどちらにも対応しています。

https://azure.microsoft.com/ja-jp/products/visual-studio-code

Visual Studio CodeはVS Code（ブイエスコード）と略して呼ぶことがあります。

Visual Studio Codeのインストール

まずは以下のページからVisual Studio コードのインストーラ（Windows）/ dmgパッケージ（MacOS）をダウンロードします。

https://code.visualstudio.com/download

ダウンロードしたインストーラを起動してVisual Studio Codeのインストールを完了させます。

ファイルの拡張子を表示させておく

Windowsでは、エクスプローラーの設定からファイルの拡張子を表示させておいた方がHTML、CSS、JavaScript関連のファイルを操作する時には重宝します。

HTML/CSS/JavaScriptをVisual Studio Codeで編集する

実際にHTML/CSS/JavaScriptをVisual Studio Codeで編集します。

Visual Studio Codeを実際に起動してHTMLを書き始めるか、.htmlファイルをあらかじめ作成してそれをVisual Studio Codeで編集します。

まずはVisual Studio Codeを起動して、HTMLを書いてみましょう。以下のような画面になったら、次のコードをVisual Studio Codeに書いてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
<meta name="description" content="ページの説明文" />
<link rel="stylesheet" href="./css/style.css">
<script src="./js/script.js"></script>
</head>
<body>
<p>ページのコンテンツ</p>
</body>
</html>

作成したソースコードをsample.htmlとして保存します。

保存先は、今回の例ではWindowsのデスクトップに「Sample」フォルダを作成した場所に保存します。

保存したHTMLファイルをダブルクリックしてブラウザで開くと以下のように表示されます。

作成したHTMLファイルのソースコードの説明は次のとおりです。

DOCTYPE

DOCTYPEは文書がHTML5で記述されていることを示す記述です。HTML5になってから記述がシンプルになりました。

<!DOCTYPE html>

html

htmlタグです。このタグ内に、後述するheadタグやコンテンツを載せるbodyタグを書いていきます。

<html lang="ja"></html>

langの部分は、Webページで使用している言語によって値を変えます。日本語の場合は、上のようにjaと記述します。英語の場合はenと書きます。

head

headは、そのページのヘッダー情報を書き込む部分です。

<head></head>

 

title

ページのタイトル（表題）を記述するタグです。ページには表示されませんが、Googleで検索されたときの検索結果に表示されます。

<title></title>

meta

metaタグには、ページの付加情報を記述します。さまざまな情報が指定できるのですが、欠かせないのはページのエンコードを指定するmeta情報でしょう。下の例では、エンコードをUTF-8として記述しています。

<meta charset="UTF-8">

ページの説明文（要約）にあたるdescriptionを記載します。contentの部分に、ページの説明文を書きます。Googleの検索結果でページの説明部分が表示されますが、このcontentにあたる部分が表示されています。

<meta name="description" content="">

link

CSSを.htmlファイル内に記載することもできますが、こちらの方法は外部のCSSファイルを指定する方法です。下の例にある、hrefの部分に読み込むCSSファイルを書きます。

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

CSSファイルが同じ階層にない場合は、下のようにパスも含めて指定する必要があります。

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

link要素では、CSSだけでなくfaviconを指定することもできます。faviconとは、ブラウザでタブの上部に表示されている小さいアイコン画像のことです。faviconを指定しなくても何ら問題はありませんが、見栄えも向上するし、読者からの信頼につながるため設定することが推奨されます。

<link rel="shortcut icon" href="favicon.ico">

script

JavaScriptファイルを.htmlファイルで読み込む場合は、下のようにscriptタグを使います。srcの部分にJavaScriptのファイル名を記述します。

<script src=""></script>

CSSファイルを読み込む際同様、ファイルパスを含めて書くことが多いです。

body

headタグの次に書くのがbody要素です。その名の通り、Webページの本体となるコンテンツを記述していく部分にあたります。

<body></body>

bodyタグ内には、非常にさまざまな要素が書き込まれます。

HTMLにCSSファイルとJavaScriptファイルを紐づける

先ほど作成したHTMLファイルのソースコードの中には、CSSとJavaScriptを.htmlファイルを紐づける情報が記載されています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
<meta name="description" content="ページの説明文" />
<link rel="stylesheet" href="./css/style.css">
<script src="./js/script.js"></script>
</head>
<body>
<p>ページのコンテンツ</p>
</body>
</html>

sample.htmlを保存したデスクトップ配下のSampleフォルダ内に以下の二つのフォルダを作成し、それぞれに.cssファイルと.jsファイルを作成して保存し、.htmlファイルにCSSとJavaScriptのソースコードを反映させます。

  • css
  • js

例えば、cssフォルダ配下に以下のCSSが書かれた.cssファイルを配置する

body {
    font-family: sans-serif;
    background-color: blue;
    color: yellow;
}

p {
    background-color: white;
    padding: 20px;
}

こうすると先ほど確認したHTMLファイルは以下のようになります。

CSSは、ページの色や文字の大きさなどのデザインを決めるソースコードを記述するファイルです。

次にjsフォルダに.jsファイルを作成してHTMLで作成したサイトに動的な処理（アニメーションやポップアップウィンドウ）を追加してみましょう。

alert("JavaScriptが動いています！");

この状態でsample.htmlをブラウザで開くと以下のようにウィンドウが表示されます。

 

前次