前回の Visual Studio Codeをダウンロードして機能を拡張 – プログラミング学習 準備 その4 では、開発に必要な IDE をダウンロードしました。

今回から、フロントエンドの学習をスタートします。

フロントエンド開発では HTMLCSSJavaScript の3つのプログラミング言語を学ぶ必要があります。

HTML と CSS は ブラウザに表示する文書や画像を宣言するための言語で、計算を伴う処理を行うことができません

JavaScript は 計算を行うことができ、HTML や CSS を操作することが出来るため、Webページに動きを与える際に使用します。

一般的に プログラミング とは JavaScript のような 計算処理を行うことができる言語 のことを言います。

HTMLとは

Hyper Text Markup Language

ブラウザで表示する全ての Webサイト は、この HTML を基に作成されています。
この HTML がなければ、CSS も JavaScript も ブラウザ では何もできません。

HTML は タグ を使用し、それぞれの文章に意味を持たせます。

この タグ は <> で 囲まれており、通常は 開始タグ終了タグ で挟んだ内側の文章に 作用します。

<開始タグ>
    ここに作用する
</終了タグ>
    
  • 終了タグにはスラッシュ(/)が必要です。

タグの例

HTML Tag Tree

<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.htmltop-page.htmlなど

  • 拡張子は、ファイルの中身がどんなデータなのかをコンピュータや人が判断するために必要なものです。

HTMLの定型文

HTML head vs body

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タグ の3つです。
また、DOCTYPE を除く全てのタグは html タグの子孫 だということも理解してください。

タグ名 おおまかな意味
head ボットやブラウザなどのロボットが読み込む情報を設定する
title ブラウザのタブバーや検索結果のページのタイトルとして使用される
body ブラウザに表示される内容を示す要素で、この中身を主に主にコーディング主にコーディングする

HTMLには様々なタグがあります。頻繁に使うタグについては、別の記事で解説しますが、他にどんなタグがあるかは HTML 要素リファレンス – HTML: HyperText Markup Language | MDN をご覧ください。

コーディング

さあ、では実際にコーディングしてみましょう!
bodyタグ の下に 以下をコーディングしてください。


<h1>Hello World!</h1>
                

コーディングができたら、ファイルをダブルクリックしてブラウザで開いてみてください。

Hello World!

と表示されていれば成功です!🎉

課題

index.html を作成し、ブラウザで表示されることを確認してください。

また、titleタグ に「はじめてのHTML」と設定し、ブラウザのタブに title と同様の文字列が表示されることを確認してください。

bodyタグの子に pタグ2つ作成し、1つ目のpタグに「おはよう」、2つ目のpタグに「こんにちは」を設定し、ブラウザでどのように表示されるかを確認してください。

次のタグについてどのような意味があるかを調べてみてください。

  • br タグ
  • img タグ
  • hr タグ