基本構造を持つHTMLドキュメントを作成する
このステップでは、CSSマージンスタイルを探求するための基礎となる基本的なHTMLドキュメントを作成する方法を学びます。HTMLはWebページの構造を提供し、適切な構文を持つドキュメントを作成することはWeb開発の最初のステップです。
WebIDEを開き、~/project
ディレクトリに移動します。ファイルエクスプローラで右クリックし、「新しいファイル」を選択することで、index.html
という新しいファイルを作成します。
この実験で使用する基本的なHTML5ドキュメント構造は以下の通りです。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Margin Styles Lab</title>
</head>
<body>
<div>First Paragraph</div>
<div>Second Paragraph</div>
<div>Third Paragraph</div>
</body>
</html>
このHTML構造の主要なコンポーネントを分解してみましょう。
<!DOCTYPE html>
はこれがHTML5ドキュメントであることを宣言します
<html>
はHTMLページのルート要素です
<head>
はドキュメントに関するメタ情報を含みます
<meta charset="UTF-8">
は文字エンコーディングを指定します
<meta name="viewport">
は異なるデバイスでの適切なレンダリングを確保します
<body>
はページの可視コンテンツを含みます
次のステップでマージンスタイルを示すために使用する3つの<div>
要素を追加しました。
Ctrl+S
を押すか、WebIDEの保存アイコンを使用してファイルを保存します。