【初心者向け】HTMLの全体構造・ボックスモデル・お問い合わせフォームの作り方まとめ

本記事は、初学者である私が学習内容を整理・アウトプットする目的で執筆していま

す。

「なんとなく理解している」を「説明できる」に変えることを目標に、できるだけわか

りやすくまとめました。

今回は、HTMLの全体構造について解説していきます。

HTMLの全体構造とは？

Webページには、大きな「構造」があります。

まずタイトルがあり、その下に記事の内容が続きます。

例えば、

<h1>HTMLの全体構造</h1>
<p>これより下が記事の内容になります。</p>

のように書くことで、ページの構成が作られます。

ボーダー（枠線）の付け方

「学べるレッスン」という <h3> 要素の下に線を引きたい場合、CSSの borderプロパ

ティ を使います。

borderプロパティの基本形

h3 {
  border-bottom: 2px solid #333;
}

書き方の意味

上のコードの意味は、順番に太さ・種類・色になります。

なので、上記のように書く事で「学べるレッスン」という<h3> 要素の下に線を引く事が

できます。

• 2px → 線の太さ
• solid → 線の種類
• #333 → 線の色

方向の指定

• border → 上下左右すべて
• border-bottom → 下だけ
• border-top → 上だけ
• border-left → 左だけ
• border-right → 右だけ

必要な方向だけ指定して使用できます。指定しないとその要素の周りを囲うようにボー

ダー（枠線）が表示されます。

子孫要素を指定する

ここまで要素を指定する方法を二つ紹介してきました。

1. セレクタで要素名を指定する（例：h2）…指定した要素
2. セレクタでclass名を指定する（例：.class名）…そのclassがついた要素

さらに詳細な指定方法として、子孫要素を指定する方法があります。

子孫要素とは、ある要素の内部に書かれている要素のことです。

index.html

<div class="contents">
  <p>子孫1</p>
  <p>子孫2</p>
</div>


上の例の場合、div要素の中のp要素が子孫要素になります。そして、子孫要素を指定す

るセレクタを子孫セレクタと言います。

上の内容でdiv内のp要素を指定するとき、セレクタは次のように書きます。

style.css

.contents p {
  color: red;
}

このように、親要素 子要素と、半角スペースを空けて子孫要素を指定していくのが子孫

セレクタの書き方になります。

直属の子孫要素だけを指定する

先ほどの書き方だとcontentsクラスの中にあるpの文字の色は全て赤色になるのです

が、子孫要素の中でも「直属の子孫」だけを指定する書き方もできます。

index.html

<div class="contents">
  <p>ここだけ変えたい</p>
  <div>
    <p>変えない</p>
    <p>変えない</p>
  </div>
</div>

style.css

間違い：「.contents p」という指定では全てのpタグの色が変わる
.contents p {
  color: red;
}

正解：「>」で繋げることで直属の子孫要素のみを指定できます
.contents > p {
  color: red;
}

上下のパターン、それぞれ書いて確認してみてください。

下のパターンで書けばcontentsクラスの中にあるp要素だけが赤字になったのがわかる

と思います。

こんな風に「 > 」で繋げて書くことで、直属の子孫要素だけを指定することができま

す。

余白の仕組みを理解しよう（超重要）

「学べるレッスン」の <h3> の上下に余白がある場合、それは padding や margin

が関係しています。

paddingとは？

borderの内側の余白 を作るプロパティ。

paddingの基本形

padding: 10px;

marginとは？

borderの外側の余白 を作るプロパティ。

marginの基本形

margin: 20px;

ボックスモデルとは？

HTML要素（<div>、<span>など）は、それぞれ四角い領域＝ボックスとして存在して

います。

Webサイトはたくさんのボックス（箱）が敷き詰められて構成されています。

こうしたボックスによって敷き詰められたレイアウトのことをボックスレイアウトとい

います。

ボックスは一つの要素に対して四つの区分があります。

それは、コンテンツエリア・padding・border・marginです。

これまで学んだ

• border
• padding
• margin

は、すべて ボックスモデル という考え方に基づいています。

HTMLのすべての要素は「箱（ボックス）」として扱われます。

構造はこうです：

margin（外側の余白）
  border（枠線）
    padding（内側の余白）
      content（中身）

これを理解すると、レイアウトが一気にわかりやすくなります。

• コンテンツエリア…内容が表示される部分
• padding…要素の中に割り当てられている余白
• border…要素の境界
• margin…隣接する要素との余白

<div>～</div>という一つの要素は、実はこの四つの要素を含んだボックスになっているんです。

これが少しややこしいところなのですが、余白の中にも種類があります。表示部分の内

部にあるpaddingと、隣接する要素との間にあるmarginです。

marginとpaddingが分からなくなる人は、英語の意味からイメージすると分かりやす

いです。

paddingは「詰め物をすること、芯(しん)を入れること、芯、詰め物という意味。

つまり、詰め物だから内側。

marginは「【商業】 元値と売り値の開き，利ざや，マージン」という意味。

余った感じだから外側。

• padding　詰め物＝内側の余白
• margin　利ざや（余り物）＝外側の余白

paddingとmarginは今後もよく使うので、区別できるようにしておいてください！

方向ごとの指定も可能

padding や margin は、

margin-top: 10px;
margin-bottom: 20px;

のように個別指定もできます。

また、

margin: 10px 20px;

のようにまとめて書くことも可能です。

お問い合わせフォームを作ってみよう

ここからは実践編です。

1行入力欄の作り方

<input>

<input> 要素は、1行のテキスト入力を受け取ります。

※終了タグは不要です。

複数行入力欄

<textarea></textarea>

複数行のテキストを入力できます。

送信ボタンの作り方

<input type="submit">

type="submit" を指定すると、送信ボタンになります。

日本語環境では、初期表示は「送信」になります。

ボタンの文字を変更する

<input type="submit" value="送信する">

value 属性で表示テキストを変更できます。

複数の要素に同じCSSを適用する方法

input, textarea {
  width: 300px;
  padding: 10px;
}

セレクタを カンマ（,）で区切る と、
複数の要素に同じCSSを適用できます。

フォームデザインではよく使う書き方です。

まとめ

今回は、

• HTMLの基本構造
• borderの使い方
• paddingとmarginの違い
• ボックスモデルの考え方
• フォームの作り方

を学びました。

特に重要なのは、

✅ 要素はすべて「箱」であること
✅ paddingは内側、marginは外側
✅ borderは方向指定ができる

この3つです。

ボックスモデルを理解すると、レイアウトで悩む時間が大幅に減ります。

まだ基礎段階ですが、少しずつ理解が積み重なってきました。

これからも学習内容を整理しながらアウトプットしていきます。

一緒にステップアップしていきましょう！

管理人（サンプル）

駆け出しブロガー

XInstagramYouTube

〇〇生まれ〇〇出身。〇〇〇〇の最新情報を皆様にお届けすべく、日々奮闘中です。
趣味は〇〇〇〇。〇〇〇〇も得意です。 〇〇について発信中です！