前回の Visual Studio Codeをダウンロードして機能を拡張 – プログラミング学習 準備 その４ では、開発に必要な IDE をダウンロードしました。
今回から、フロントエンドの学習をスタートします。
フロントエンド開発では HTML、CSS、JavaScript の３つのプログラミング言語を学ぶ必要があります。
HTML と CSS は ブラウザに表示する文書や画像を宣言するための言語で、計算を伴う処理を行うことができません。
JavaScript は 計算を行うことができ、HTML や CSS を操作することが出来るため、Webページに動きを与える際に使用します。
一般的に プログラミング とは JavaScript のような 計算処理を行うことができる言語 のことを言います。
今回の学習内容
HTMLとは
Hyper Text Markup Language
ブラウザで表示する全ての Webサイト は、この HTML を基に作成されています。
この HTML がなければ、CSS も JavaScript も ブラウザ では何もできません。
HTML は タグ を使用し、それぞれの文章に意味を持たせます。
この タグ は <> で 囲まれており、通常は 開始タグ と 終了タグ で挟んだ内側の文章に 作用します。
<開始タグ>
ここに作用する
</終了タグ>
-
終了タグにはスラッシュ（
/）が必要です。
タグの例
<section>
<h1>この見出しは section の子です。</h1>
<div>
<p>この段落は div の 子であり、 section の孫です。</p>
</div>
</section>
上記のように、HTML は タグ の中に タグ を記述していきます。
この例では、
【祖先】一番の親に「sectionタグ」があり、
【親】その 子要素 には「h1タグ」と「divタグ」、
【子】更にその 子要素 には「pタグ」
があります。
このような関係のことを 親子関係 と言い、入れ子構造と呼んだりします。
HTMLでは一番上の要素（ルート要素）を除き、全てのタグは親要素を持っています。
- 親は子に作用する働きがあります。
HTMLをブラウザで表示する
実際に HTMLファイル を作成して、ブラウザに表示してみましょう。
ここではindex.htmlというファイルを作成してブラウザに表示してみます。
ファイルの拡張子について
ファイル には全て 拡張子 と呼ばれるものが付いており ファイル名末尾のの ドット（.）の後 に設定されます。
この 拡張子 は、プログラミング言語 によっても異なり、また 使用する フレームワーク によって異なることもあります。
拡張子には「ファイルをどのアプリで実行すればいいのか」を判断させる役割もあります。
拡張子の例: .mp3、.jpeg、.js、.java、.php など
HTMLファイル の 拡張子は.html となり、ファイル名 と 拡張子 を連結させて作成します。
HTMLファイルの例: index.html、top-page.htmlなど
- 拡張子は、ファイルの中身がどんなデータなのかをコンピュータや人が判断するために必要なものです。
index.html が使用されます。この
index.html が最初に呼ばれるようにルールとして決まっている場合もあるため、最初のページは index.html と名付けることをお勧めします。
HTMLの定型文
HTML を記述する際には、最初に予め決まっている 定型文を使用するのが一般的です。また、HTML にもいくつか種類があるのですが、今回は最も一般的なHTML5 を使用します。
HTML5 では、必ず一番上に<!DOCTYPE html> と記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- ここにHTMLタグを記述します -->
</body>
</html>
まず、覚えてもらいたいのは headタグ、titleタグ、bodyタグ の３つです。
また、DOCTYPE を除く全てのタグは html タグの子孫 だということも理解してください。
HTMLには様々なタグがあります。頻繁に使うタグについては、別の記事で解説しますが、他にどんなタグがあるかは HTML 要素リファレンス – HTML: HyperText Markup Language | MDN をご覧ください。
コーディング
さあ、では実際にコーディングしてみましょう！bodyタグ の下に 以下をコーディングしてください。
<h1>Hello World!</h1>
コーディングができたら、ファイルをダブルクリックしてブラウザで開いてみてください。
Hello World!
と表示されていれば成功です！🎉
