表示部分の基本を理解する
HTML文書の中で実際にブラウザに表示される内容はbody要素に記述します。
このページでは、bodyの役割と基本的なHTML文書のひな形を作成し、ファイル名の付け方や作業フォルダの構成など、実際にHTMLを書くための準備を行います。
body要素
body要素には、ブラウザに表示される内容を記述します。
見出し、段落、画像、リンクなど、ページの本文はすべてこの中に入れます。
構文
<body>...</body>コード例
<body>
<h1>タイトル</h1>
<p>本文が入ります。</p>
</body>headとは異なり、ユーザーが実際に目にする要素が並びます。
HTML文書のひな形
HTMLファイルを含むプロジェクトは、ひとつのフォルダにまとめて管理するのが基本です。
HTML・CSS・画像ファイルなどを整理しておくことで、後の学習や実務でも扱いやすくなります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトルをここに</title>
</head>
<body>
<!--ここに内容が入る-->
</body>
</html>必要最低限の構成をまとめたファイルであり、ここから各ページの内容を追加しながら学習します。
作業フォルダとファイル名のルール
HTMLファイルを含むプロジェクトは、ひとつのフォルダにまとめて管理するのが基本です。
HTML・CSS・画像ファイルなどを整理しておくことで、後の学習や実務でも扱いやすくなります。
下記は必須のルールです。
- 半角英数字（a～z、0～9）のみを使う
- スペースや全角文字（日本語など）は使わない
- 区切りにはハイフン（-）またはアンダースコア（_）を使用
- ファイルの拡張子は.htmlまたは.htm
- トップページのファイル名は必ずindex.html
ブラウザでHTMLファイルを開く
作成したHTMLファイルは、ブラウザにドラッグ＆ドロップするだけで表示できます。
編集したら保存し、ブラウザを更新して変化を確認しながら進めましょう。
ブロック要素・インライン要素・インラインブロック要素
HTMLの要素には、標準の表示動作として「ブロック要素」「インライン要素」「インラインブロック要素」という種類があります。
ブロック要素は縦方向に大きなまとまりを作り、インライン要素は文章の流れの中に並びます。
インラインブロック要素は横に並びつつ、幅や高さを自由に指定できる中間的な要素です。
この違いを理解すると、これから扱う見出しや段落、強調などのタグの特徴がより分かりやすくなります。
コード例
<p>これはブロック要素です。</p><strong>強調はインライン要素です。</strong><button>ボタンはインラインブロック要素です。</button>当サイトでは説明文でも触れますが、構文の下にブロック要素かインライン要素かインラインブロック要素かを一目でわかるよう表示しています。