演習 - Web アプリに基本的な HTML を追加する - Training

10 分

この時点で、Web サイトには空の HTML ファイルが存在します。コードを追加してみましょう。目標は、ハイパーテキストマークアップ言語 (HTML) を使用して、顧客のブラウザーに表示する必要がある Web ページを記述することです。開始テンプレートがあるといいですね。エディターでは便利なことに、一般的なひな形や HTML 構造の一部を自動的に入力できます。

このユニットでは、基本的な HTML コンテンツを追加し、ブラウザーで HTML ページを開き、開発者ツールを初めて使用してみます。

HTML コードを追加する

Visual Studio Code では、既存の HTML プログラミングの基本的なサポートが提供されます。構文の強調表示、IntelliSense によるスマート入力候補、カスタマイズ可能な書式設定があります。

Visual Studio Code で Web サイトを開いてから、[エクスプローラー] で index.html ファイルを選択することによって index.html ファイルを開きます。
index.html ページに「html:5」と入力し、Enter キーを押します。 HTML5 テンプレートコードがファイルに追加されます。

注意

index.html ファイルに HTML5 テンプレートコードが追加されていない場合は、ファイルを閉じてもう一度開いてみてください。

テンプレートコードを次のように編集します。次いで Windows の Ctrl + S キーまたは macOS の Command + S キーを選択して、ファイルを保存します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

HTML にはさまざまなバージョンがあります。 doctype<!DOCTYPE html> は、この HTML ドキュメントに HTML5 コードが含まれていることを示します。

ここではすべての HTML 要素の意味を深く掘り下げることはしませんが、いくつかの重要な項目について説明します。 meta タグは、ブラウザーでソースコードを表示しない限り、通常はビューアーに表示されない "メタデータ" 情報を示します。メタ要素またはタグでは、Web ページに関する説明情報が提供されます。これは、たとえば、検索エンジンが検索結果で Web ページ内のどの情報を返すかを処理するために役立ちます。

UTF-8 の "文字セット" (charset) は意味がないように見えるかもしれませんが、コンピューターでの文字の解釈方法を確立するために非常に重要です。文字セットのメタデータが見つからないと、セキュリティが侵害されるおそれがあります。 charset 属性の背後にはかなりの歴史と技術情報が存在しますが、この演習での重要なポイントは、Visual Studio Code の定型句によって何らかの意味のある既定値が提供されることです。

見出しを編集する

HTML コード内の <head> 要素には、ブラウザータブ内に表示されない Web サイトの情報が含まれています。

"メタデータ" によって、文字セット、スクリプト、Web ページを開くブラウザーなど、HTML ドキュメントに関するデータが定義されます。

Web ページの "タイトル" はブラウザーウィンドウの上部に表示され、多くの意味で重要なものとなります。たとえば、タイトルは検索エンジンによって使用され、表示されます。タイトルを追加してみましょう。

重要

ここからは、省略記号 (...) で、前に宣言されたコードが前にあるか後にあるかが示されます。必要な変更または更新を作業に加えるための十分なコードがコンテキストとして提供されているはずですが、省略記号はコピーしてコードに貼り付けないでください。

エディターで、<title> 要素を次の例のようになるように変更します。

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
...

Web ページの先頭に直接 CSS コードを記述すると、Web ページの HTML 要素にスタイルを適用できます。 HTML ページへの CSS の記述は、内部 CSS と呼ばれます。しかし、HTML 構造と CSS スタイルを分離することをお勧めします。別の CSS ページを作成することを、外部 CSS といいます。コードが簡潔で分離されていると、読みやすくなる傾向があります。 1 つまたは複数の外部スタイルシートを使用して、複数の Web ページを処理することができます。各 HTML ページをコピーした CSS コードで更新するのではなく、1 つの CSS ファイルに変更を加え、これらの更新がすべての依存する Web ページに適用されるようにすることができます。では、外部 CSS ファイルにリンクしてみましょう。

Visual Studio Code エディターで、<title> 要素の後に空白行を追加し、「link」と入力して、Enter キーを押します。 Visual Studio Code によって、index.html ファイルに次の行が追加されます。
```
<link rel="stylesheet" href="">
```

href= を href="main.css" に更新し、Windows の Ctrl + S キーまたは macOS の Command + S キーを選択してファイルを保存します。

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task List</title>
  <link rel="stylesheet" href="main.css">
</head>
...

本文を編集する

ここではまず、<body> の要素を入力します。

<body> 要素には、ブラウザーで顧客に表示する Web サイトのコンテンツを含めます。

<body> 要素の内部に、"見出し" <h1> 要素と、その後に "段落"<p> 要素を続けて追加し、いくつかの "リスト項目" <li> 要素を含む "順序指定されていないリスト" <ul> を作成します。

コードを編集するか、またはコピーして貼り付けると、次の例のようになります。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple website</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>Task List</h1>
    <p id="msg">Current tasks:</p>
    <ul>
      <li class="list">Add visual styles</li>
      <li class="list">Add light and dark themes</li>
      <li>Enable switching the theme</li>
    </ul>
  </body>
</html>

ID 属性 (<p> 要素で使用) が 1 つの要素をスタイル設定するために使用できるのに対して、クラス属性 (<li> 要素で使用) は同じクラスのすべての要素をスタイル設定するためのものです。

次の手順に進む前に、Ctrl + S キーまたは Command + S キーを選択して確実にファイルを保存してください。

ブラウザーで開く

ブラウザーで HTML ファイルを開き、ローカルで Web ページをプレビューすることができます。 https:// で始まる Web サイトアドレスではなく、C:/dev/simple-website/index.html のようなローカルファイルパスをブラウザーはポイントします。

Visual Studio Code を使用してプレビューするには、index.html を右クリックし、[既定のブラウザーで開く] を選択するか、または index.html ファイルを選択してキーボードショートカット Alt + B を使用します。

重要

問題がある場合は、ファイル名アイコンまたはテキストを直接右クリックしていることを確認します。 [Visual Studio Code] ダイアログボックスが表示されたら、[Yes, I trust the authors](はい、作成者を信頼します) を選択します。これは、プロジェクトフォルダーでコードの自動実行を許可するか、または制限するかを決定できる、ワークスペースの信頼機能です。このファイルは作成したばかりなので、安全です。

既定のブラウザーで Web ページが開きます。

開発者ツールを使用してページを表示する

ブラウザーで開発者ツールを使用して、Web ページを検査することができます。試しに使ってみましょう。

開発者ツールを開くには、Web ページで右クリックして [検査] を選択するか、次のショートカットを試します。
- 開発者ツール用の F12 のキーボードショートカットキーを押します。
- Windows および Linux で Ctrl + Shift + I キーを押すか、Mac で Option + Command + I キーを押します。
これらのキーボードショートカットは、Microsoft Edge、Chrome、Firefox で使用できます。 Safari を使用している場合は、「Web Development Tools (Web 開発者ツール)」を参照してください。インストールされている場合は、[Safari] > [環境設定] を選択し、[詳細設定] を選択します。ペインの下部にある [メニューバーに "開発" メニューを表示] チェックボックスをオンにします。 [開発] > [Web インスペクタを表示] を選択します。詳細については、Safari Web インスペクタに関するドキュメントを参照してください。

開発者ツールを開く方法と、利用可能な主な機能の詳細については、「DevTools の概要」を参照してください。
[要素] タブを選択します。
[要素] タブに表示されている HTML 要素上でマウスをスクロールし、さまざまな要素の内容を展開します。

開発者ツールの [要素] タブには、ブラウザーにレンダリングされたドキュメントオブジェクトモデル (DOM) が表示されます。デバッグ時には、多くの場合、ブラウザーがソースコードをどのように解釈しているかを確認することが重要です。

ブラウザーでページを調べると、あらゆる種類の有用な情報が提供され、問題のトラブルシューティングに役立つ場合があります。次のセクションに示されているとおり、インスペクターでも CSS の詳細を表示できます。

続行

演習 - Web アプリに基本的な HTML を追加する

HTML コードを追加する

見出しを編集する

本文を編集する

ブラウザーで開く

開発者ツールを使用してページを表示する

フィードバック