【初心者のHTML入門】基本構造の書き方とタグの使い方【タグ一覧表あり】

Q: <head>と<body>の違いがいまいち分かりません。

最もシンプルに言うと「画面に表示されない裏側の設定」か「画面に表示される中身」かの違いです。 <head>（ヘッド）の中には、文字化けを防ぐための設定や検索エンジン向けのページタイトルなど「ブラウザに教える情報」を書くため、実際のWebページの画面には何も表示されません。 一方、ユーザーが実際に見るテキストや画像などのコンテンツは、すべて<body>（ボディ）の中に書きます。

Q: 記事にある「タグ一覧表」のタグは、すべて暗記しなければいけませんか？

いいえ、 すべて暗記する必要は全くありません。 プロのエンジニアやWebデザイナーであっても、すべてのタグを記憶しているわけではなく、必要な時にその都度調べて使っています。 最初は見出し（<h1>〜<h6>）、段落（<p>）、リンク（<a>）、画像（<img>）などの「超基本タグ」だけを使いこなし、残りは「こういうタグがあったな」と思い出せる程度に、一覧表を辞書代わりとして活用してください。

Q: 終了タグ（</p>など）を書き忘れると、どうなってしまいますか？

レイアウトが大きく崩れたり、意図しない場所までリンクになってしまう原因 になります。 終了タグがないと、ブラウザは「どこまでが段落なのか」「どこまでがリンクなのか」を判断できません。 最近のブラウザは賢いため、ある程度自動で補正して表示してくれることもありますが、後々原因不明のバグを引き起こすため、必ず「開始タグと終了タグはセットで書く」という癖をつけましょう。

Q: タグを書くとき、大文字（<P>）と小文字（<p>）のどちらで書くべきですか？

現代のWeb制作においては、 「すべて小文字で統一して書く」のが業界の標準的なルール となっています。 現在のHTML（HTML5）の仕様上は、大文字で書いても小文字で書いても正常に動作します。 しかし、大文字と小文字が入り混じったコードは非常に読みづらくなるため、最初からすべて小文字（<p>や<a>など）で記述するベストプラクティスを身につけましょう。

Q: HTMLの一番最初に書く <!DOCTYPE html> とは何のためにあるおまじないですか？

これはブラウザ（ChromeやSafariなど）に対して、 「このファイルは最新のHTML（HTML5）のルールで書かれていますよ」と宣言するため のものです。 もしこれを書き忘れると、ブラウザが「古い時代のHTMLかもしれない」と判断して特殊な読み込み方（互換モード）をしてしまい、せっかく書いたCSSのデザインが崩れるなどのトラブルに繋がります。 意味を深く理解しなくても大丈夫ですので、HTMLファイルの1行目には必ず書くものとして覚えておきましょう。

2026年3月1日2026年6月13日

ブラウザでのh1からh6までの見出しの表示例。h1が最大で、h6に向かって順にサイズが小さくなる。

いつまで無駄なデザインに時間を費やしますか？自作コード × SWELL で
理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る

※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

ここでは、Webサイトでは欠かせない「HTML」について学べます。

初心者にも分かりやすいように、実際のHTMLコードやCSSで違いを表現しながら解説します。

また、HTMLに関するカテゴリーページから学びたい内容を決めたい人は、以下のHTMLページをご確認ください。

HTML | Code Stock

また、これからサイト制作を始めたい、WordPressサイトを立ち上げたいなどの興味があれば「WordPress初心者へおすすめのレンタルサーバー4選を比較」を一読ください。

Code Stock

WordPress初心者へおすすめのレンタルサーバー4社を比較レンタルサーバーは、WordPressで個人的なブログあるいは法人用コーポレートサイトに至るまで、Webサイト運営で必須です。用途は様々ですが、これからWordPressでサイトを…

もう無駄なレイアウトに凝るのやめたら？最速の土台 × 独自CSS で
SWELLをゴリゴリにカスタマイズ

レスポンシブ対応や基本レイアウトは最高峰テーマに任せませんか？浮いた時間で、流麗なアニメーションや標準設定を上書きする「あなただけの高度なビジュアル表現」をとことん突き詰めましょう。

「SWELL」であなたのデザインの限界を超える

※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

HTMLとは

HTML（HyperText Markup Language）は、Webサイトを作成する最も基本的な言語です。

テキストを<>で囲んだタグでマークアップし、見出し、段落、ハイパーリンク、画像などのデータ構造をブラウザに指示します。

HTMLはWebサイトの骨組みを担い、CSSで装飾、JavaScriptで動きを制御します。

HTMLの特徴

Webサイトの骨格：サイト構造を定義するもの
タグによる構造化：<h1>, <p>, <a>タグといった役割
ハイパーテキスト：リンクによる複数ページの相互関連
プログラミング言語ではない：文章の意味付けを行う言語
ブラウザ表示：ソースコードを表示して確認可能

また、HTMLで記述される代表的なタグの一例は以下になります。

各タグをクリックするとリンク先に詳細ページをご用意しています。

ページの土台

<html>：HTML文書の開始と終了（すべての親）。
<head>：文書情報（タイトル、文字コード、CSSの読み込みなど）。
<body>：ブラウザの画面に表示される全コンテンツの本体。

レイアウトの骨組み（セマンティックHTML）

<header>：ページの導入部。ロゴやサイト名、検索窓などを配置。
<nav>：ナビゲーション。主要なページメニューやリンクの集まり。
<main>：メインコンテンツ。そのページの主役となる内容（1ページに1つ）。
<section>：章・節。テーマごとにコンテンツを区切る単位。
<footer>：ページの最下部。著作権（CopyRight）や連絡先などを記載。

中身を構成する要素

<h1>~<h6>：見出し（1が一番大きく重要）。
<p>：段落（一般的なテキスト）。
<a>：リンク（他ページや別サイトへ飛ばす）。
<img>：画像の埋め込み。
<ul> / <li>：箇条書きリスト（メニューや項目羅列に多用）。
<div>：汎用的な「箱」。デザインやレイアウト調整のグループ化に使用。
<span>：文中の一部を囲う。特定の文字だけ色を変える時などに使用。

ユーザーとのやり取り（フォーム）

<form>：入力フォーム全体の囲み。
<input>：1行テキスト入力、チェックボックス、送信ボタンなど。
<button>：汎用的なボタン（クリックして実行）。

上記のように並べて確認すると、HTMLは大きな箱（body）の中に役割ごとの箱（header/main/footerなど）を積み上げ、中身（h1/p/a/imgなど）を詰めていく作業だと視覚的に見えてくるはずです。

WebページはHTMLのみだと未完成

あなたがよく目にするWebページはHTMLによって構成されていますが、HTMLのみだと未完成です。

例えば、以下の簡易的なHTMLコードを確認していきましょう。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>ゼロからWebデザインを勉強しよう！</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>

上記のコードを.htmlファイルで保存し、ブラウザ表示すると以下になります。

これだと、とても簡素なデザインで文字の羅列になってしまいます。

CSSと呼ばれるデザインコードを追加することで、サイト全体のレイアウトや各HTMLタグの役割をデザインによって明確化できます。

ここでは、上記のHTMLタグである<h1>タグにCSSによるデザインを施します。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <style>
    .heading-1 {
      position: relative;
      margin: 0 0 25px 9px;
      padding: .5em .8em;
      background-color: #2589d0;
      color: #ffffff;
    }
    
    .heading-1::before {
      position: absolute;
      top: 0;
      left: -9px;
      z-index: 1;
      width: 5px;
      height: 135%;
      border-radius: 3px;
      background-color: #660000;
      content: '';
    }
    
    .heading-1 span::before,
    .heading-1 span::after {
      position: absolute;
      left: -9px;
      width: 20px;
      height: 3px;
      border-radius: 3px;
      background-color: #c99; /* 紐の色は固定 */
      content: '';
    }
    
    .heading-1 span::before {
      top: 44%;
      transform: rotate(-25deg);
    }
    
    .heading-1 span::after {
      top: 54%;
      transform: rotate(25deg);
    }
  </style>
</head>
<body>
  <h1 class="heading-1">ゼロからWebデザインを勉強しよう！</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>

今回は、直接<head>内にCSSを記述していますが、一般的に「外部CSSファイルを作成し、HTMLの<head>タグ内で読み込む」方法が推奨されます。

このように、CSSを適用することでデザイン性を高めることができます。

<h1>から<h6>といった見出しタグの使い方を詳しく知りたい人は「【HTML】見出しタグの使い方：h1~h6の使い分けとデザイン例」を一読ください。

【HTML/CSS】hタグ（見出し）の使い方とh1・h2・h3のデザイン例

HTMLにおける書き方の基本

ここでは、「HTMLをどのように書けばよいか」の基本を解説していきます。

HTMLにおける書き方の基本

HTMLの基本はタグで挟む
HTMLはタグの中にタグを書く
開始タグの中に属性（プロパティ）が書ける

HTMLの基本はタグで挟む

HTMLには<>と</>が多く使われています。

この<>は『タグ』と呼びます。

HTMLでは、タグで文や画像などを挟むといった基本構造になります。

<div>タグの中身</div>

このように<タグ名>と</タグ名>で様々なものを挟みます。

それぞれ開始タグ、終了タグと呼ばれて基本的にセットで使われます。

<div>タグの中身</div>

開始タグ〜終了タグまでのカタマリは要素と呼ばれます。

ここでは、<div>タグ要素になります。

タグには多くの種類があり「どのタグで挟むか」によってタグの役割（＝意味）が変わります。

<h1>ゼロからWebデザインを勉強しよう！</h1>
<p>まずはHTMLについて学びましょう</p>

たとえば<p>と</p>で挟んだものは「段落」を意味します。

<h1>と</h1>で挟んだものは「大見出し」を意味します。

HTMLはタグを使って文字や画像に役割を与えて書きます。

役割を作ることで訪問者にとっては見やすく、Googleなどの検索エンジンにとっては内容を認識しやすいWebページになります。

このHTMLを別名で構造化データと呼び、HTMLが整理されているほど内部SEO対策になり、結果Googleなどの検索エンジンで評価を高め、検索順位が上がる仕組みになっています。

HTMLはタグの中にタグを書く

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>ゼロからWebデザインを勉強しよう！</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>

HTMLコードを確認すると、タグの間に別タグが入っている部分が多くあります。

<h1>を見ると、<body>さらには<html>の中に入っています。

タグの中にタグが入ることを「入れ子構造」と呼びます。

タグの種類によって「このタグは中に書いてOK、このタグはNG」といったルールがあるため注意が必要です。

開始タグの中に属性（プロパティ）が書ける

<h1 class="h1-title">ゼロからWebデザインを勉強しよう！</h1>
<p class="h1-text">まずはHTMLについて学びましょう</p>

タグの種類によっては、開始タグの中に属性（プロパティ）を入れる場合があります。

なお、属性はタグ名のあとに半角スペースを空けてから書きます。

HTMLファイルの基本構造

タグの書き方が分かったら、次にブラウザで表示させたコードを順番に解説します。

HTMLファイルの基本構造

HTMLファイルは最初の宣言を記述
<html>タグでコード全体を挟む
<head>はWebページ情報を記述
<title>は検索エンジンやブラウザに認識され使用される
画面表示は<body>内のみ

HTMLファイルは最初の宣言を記述

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>ゼロからWebデザインを勉強しよう！</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>

HTMLファイルの先頭に<!DOCTYPE html>があります。

このタグは「このファイルはHTML文書」といった宣言の役割になります。

HTMLバージョンで異なりますが、最新のHTML5では<!DOCTYPE html>と記述することが決まっています。

終了タグはありません。

<html>タグでコード全体を挟む

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>ゼロからWebデザインを勉強しよう！</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>

HTMLコードを確認すると、<html>タグがあり、終了タグ</html>は1番下にあります。

これは「<html>タグの開始と終了」を表しています。

HTMLファイルを作成するときには必ず記述する必要があります。

<head>はWebページ情報を記述

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>ゼロからWebデザインを勉強しよう！</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>

<head>~</head>の中はWebページの情報や設定を記述します。

例えば、「フォントの読み込み設定（CDN）」「検索エンジンやブラウザがページを理解させる情報」「CSSファイルの読み込み設定」などを<head>タグ内に書きます。

<head>タグの情報は、基本的にWebページの画面に直接表示されません。

<title>は検索エンジンやブラウザに認識され使用される

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>ゼロからWebデザインを勉強しよう！</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>

ここでは、<head>タグ内に<title>タグを記述しています。

<title>CODE STOCK<title>が該当します。

<title>タグは、Webページのタイトルを示します。

ブラウザや検索エンジン、X（旧：twitter）などのSNSに伝える役割を持ちます。

例えば、<title>タグ内の文はページ名としてブラウザのタブに表示されます。

検索エンジンに表示されるページタイトルも、基本的には<title>タグ内の文字が使われます。

また、<head>タグ内の<meta charset="UTF-8">は、文字コードを指定するものです。

画面表示は<body>内のみ

Webページ画面に表示されるのは、<body>~</body>で挟んだものだけです。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>ゼロからWebデザインを勉強しよう！</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>

なお、<body>タグは基本的に1ページに1回しか使うことができません。

HTMLで多用するタグの書き方

ここでは、HTMLで多用する代表的なタグを解説します。

HTMLで多用する代表的なタグ

<h1>~<h6>タグ：見出しタグ
<p>タグ：段落タグ
<img>タグ：画像タグ
<a>タグ：リンクタグ
<ul> / <ol> / <li>タグ：箇条書きタグ
<br>タグ：改行タグ
<!–>タグ：コメントアウトタグ
<button>タグ：ボタンタグ

<h1>~<h6>タグ：見出しタグ

h1〜h6タグは見出しを作るタグです。

h1が１番大きい見出しであり、数字が大きくなるほど小さい見出しになります。

例えば、Webメディアやブログなどでh1~h6タグを利用すると構造化データとして階層構造が出来上がり、重要な内容ほどh1タグになるため、SEO対策につながります。

<h1>ｈ１は１番大きい見出し</h1>
<h2>ｈ２は２番目に大きい見出し</h2>
<h3>ｈ３は３番目に大きい見出し</h3>
<h4>ｈ４は４番目に大きい見出し</h4>
<h5>ｈ５は５番目に大きい見出し</h5>
<h6>ｈ６は１番小さい見出し</h6>

おしゃれな見出しデザインを見てみたい！といった人は、「【html&css】コピペだけ！おしゃれな見出し（ラベル）デザイン37選」を一読ください。

また、SEOの観点から見出しタグを理解したい人は「【html】見出しタグの使い方：h1~h6の使い分けとデザイン例」を一読ください。

【CSS】コピペだけ！おしゃれな見出し（ラベル）デザイン37選

【HTML/CSS】hタグ（見出し）の使い方とh1・h2・h3のデザイン例

<p>タグ：段落タグ

pタグ<p>~</p>は最もよく使われます。

<p>タグは段落を表し、ブログなどの文章では何度も使います。

<p>ここに文章を書きます。</p>

pタグの使い方を詳しく知りたい人は「【HTML】pタグの使い方：divやbrとの違い・改行やCSS装飾」を一読ください。

HTMLのpタグとは？divやbrとの違い・改行やCSS装飾

<img>タグ：画像タグ

<img>タグは画像を貼るために使います。

少し書き方が特殊なので注意が必要です。

imgでは終了タグは使いません。

また、imgで貼ることができるのは、JPG/PNG/GIF/SVG/webpなどの画像形式だけです。

PDFデータや動画データを貼ることはできません。（GIFアニメーションは貼れます。）

imgタグの中には様々な属性が書けます。

<img src="https://su-gi-rx.com/wp-content/uploads/2026/02/code-stock-top-hero.png" alt="メインビジュアル" />

src=" "の中には画像のファイル名とURLを記述します。

ページが開かれた時、srcに書かれた画像が読み込まれます。

alt=" "の中には代替テキストといったものを記述します。

こ画像が読み込めなかった時に代替するテキストを表示する文になります。

最後のスラッシュ/は「終了タグ」を短縮したものです。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
<img src="https://su-gi-rx.com/wp-content/uploads/2026/02/code-stock-top-hero.png" alt="メインビジュアル" />
</body>
</html>

imgタグの使い方を詳しく知りたい人は「【HTML】imgタグの使い方：src・altの使い分けや画像リサイズ・中央寄せ」を一読ください。

HTMLのimgタグの使い方！src・alt属性の意味と画像リサイズ

<a>タグ：リンクタグ

<a href="リンク先のURL">文字を書くことや別タグをaタグで囲うことも可能です。</a>

リンクを作るには<a>の中にhref="リンク先のURL"を記述します。

aタグで挟んだものはリンクボタンになります。

ここでは、テキストリンクを作ってみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
<a href="https://su-gi-rx.com/">Code Stock｜UIコピペサイトはこちら！</a>
</body>
</html>

実際にリンクをクリックすると、本サイトへ遷移することができます。

<a>タグの詳細な使い方とデザインを確認したい人は以下の記事を一読ください。

【CSS】aタグ（リンク）のおしゃれなデザイン装飾とリセット方法

<ul> / <ol> / <li>タグ：箇条書きタグ

HTMLでは箇条書き用コードが用意されています。

<ul>と<li>のペア、もしくは<ol>と<li>のペアで使用します。

<ul>
<li>ひとつめの項目</li>
<li>ふたつめの項目</li>
<li>みっつめの項目</li>
</ul>

ulの代わりにolを使うと、番号型の箇条書きになります。

<ol>
<li>ひとつめの項目</li>
<li>ふたつめの項目</li>
<li>みっつめの項目</li>
</ol>

<li>タグの数は増やすことができます。

記載したい箇条書きの数だけ<li>~</li>を増やせます。

ul・ol・liの使い分けやリストデザインを知りたい人は、以下の記事を一読ください。

【HTML/CSS】ul・li・olの使い方とおしゃれなリストデザイン

<br>タグ：改行タグ

HTMLコードでは、Enterを押して改行を追加してもブラウザに表示される文で改行が反映されません。

pタグなどを使えばその前後で改行が入りますが、もし改行を挿入したい場合は<br>タグを使いましょう。

<br>には終了タグは必要ありません。

<p>これは例です</p>
<p>ここで<br>改行しています。</p>

brタグの使い方を詳しく知りたい人は「【HTML】brタグ（改行）の使い方：pタグとの違いや効かない時の対策」を一読ください。

HTMLのbrタグ(改行)とは？pタグとの違いや効かない時の対策

<!–>タグ：コメントアウトタグ

HTMLコード内でで挟んだコードはブラウザ上で非表示になります。

これはコメントアウトと呼ばれ、コード内にメモ書きをする時に便利です。

コメントアウトはWebページに訪れた人が読むことはありません。

ただし、ブラウザ機能であるデベロッパーツールを開き、HTMLコードを確認するとコメントアウトが確認できてしまうためWebサイトをリリースする際は削除するとよいでしょう。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
<p>これは例です。</p>
<!-- コメントアウトタグで囲まれた箇所は非表示です。 -->
<p>コメントアウトの部分はブラウザ上で非表示になります。</p>
</body>
</html>

上記の画像のように、コメントアウトの部分はブラウザ上に表示されていないことが分かります。

なお、コメントアウトタグで囲めば、タグごと非表示にすることも可能です。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
<p>これは例です。</p>
<!-- コメントアウトタグで囲まれた箇所は非表示です。
<p>コメントアウトの部分はブラウザ上で非表示になります。</p>
-->
</body>
</html>

HTMLコード上のコメントアウトのTipsを知りたい人は「【HTML】コメントの書き方：1行・複数行・ショートカット・入れ子の使い方」を一読ください。

HTMLコメントアウトの書き方！複数行・入れ子・ショートカット

<button>タグ：ボタンタグ

Webサイトにおいて、ユーザーがアクションを起こす要素が「<button>タグ（ボタン）」です。

<button>タグは、フォームの送信やJavaScriptを用いたポップアップ開閉など、ページ内で何らかの処理を実行する際に使用します。

※クリックした瞬間（:active状態）に、box-shadow（影）を消して、transformで下方向に移動させています。

HTMLコード表示

<div class="hdbt3-wrapper">
  <div class="hdbt3-demo-area">
    <div class="hdbt3-box">
      
      <button class="hdbt3-ui-3d-btn">購入画面へ進む</button>
      
      <p class="hdbt3-note">※クリックした瞬間（:active状態）に、box-shadow（影）を消して、transformで下方向に移動させています。</p>
    </div>
  </div>
</div>

CSSコード表示

.hdbt3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hdbt3-demo-area {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 50px 20px;
  display: flex;
  justify-content: center;
  text-align: center;
}
.hdbt3-box { width: 100%; max-width: 400px; }

/* 3Dボタンの強力なCSS */
.hdbt3-ui-3d-btn {
  all: unset !important;
  display: inline-block !important;
  background-color: #ff9800 !important; /* オレンジの背景 */
  color: white !important;
  font-size: 18px !important;
  font-weight: bold !important;
  padding: 15px 40px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  /* 影を使って立体感を出す魔法（下に5pxの濃いオレンジの影） */
  box-shadow: 0 5px 0 #e65100 !important;
  transition: all 0.1s ease !important; /* スピードを速めにするとリアル */
  position: relative !important;
  top: 0 !important;
}

/* マウスオーバー時（少し明るくする） */
.hdbt3-ui-3d-btn:hover {
  background-color: #ffa726 !important;
}

/* クリック時（沈み込むエフェクト） */
.hdbt3-ui-3d-btn:active {
  box-shadow: 0 0 0 transparent !important; /* 影を消す */
  top: 5px !important; /* 影の分だけ下に移動させる */
}

.hdbt3-note {
  margin-top: 30px;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  border-top: 1px dashed #ccc;
  padding-top: 15px;
}

ボタンタグの使い方や装飾方法・設定など詳しく知りたい人は「【HTML】<button>タグの使い方：リンク・CSS装飾・無効化」を一読ください。

HTMLでbutton（ボタン）をリンクにする方法！使い方とCSS装飾

タグ内のclassとidについて

classとidは開始タグ内に書く属性（プロパティ）の1つです。

<p id="example"> や<h2 class="name"> といった記述ができます。

classとidについて

classとidの書き方
classとidの違い
classとidはどんなタグにも付与できる
classとidを付与するとCSSでデザインも付与できる

classとidの書き方

classとidは、他の属性と同じようにタグ名の後に半角スペースを空けて記述します。

管理名であるclassとidは自身で決められます。

<タグ名 class=”好きな管理名”>～<タグ名>
<タグ名 id=”好きな管理名”>～<タグ名>
<タグ名 class=”好きな管理名” id=”好きな管理名”>～<タグ名>

両方を挿入することも可能です。

日本語のclassやidをつけるのはやめましょう。

classとidは英数字にしましょう。

先頭に数字を書くのはNGであり、アルファベットから始まるclass/idにしましょう。

classとidの違い

classとidの違いは以下になります。

classとidの違い

class：同じclassを利用可能
id：1つのHTML文書内で同じidは使えない

利用すると分かりますが、classを使い回すことで特定ボタンをHTML内に何度も使う場面が発生します。

その際に、CSSはひとつのclassのみで全てに反映させることができます。

また、idは一つに指定されていないとアンカーテキストなどでエラーが発生するために一意に決まることになります。

現時点では理解できなくても、使っていくうちにclassとidの違いが体感できると思うので問題ありません。

classとidはどんなタグにも付与できる

ここでは、<h1>タグにclass="heading-1"付与します。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1 class="heading-1">ゼロからWebデザインを勉強しよう！</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>

なお、classとidはどのタグにも書くことができます。

classとidを付与するとCSSでデザインも付与できる

ここでは、<h1>タグにclass="heading-1"が付与できているため、CSSによるデザインを施します。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <style>
    .heading-1 {
      position: relative;
      margin: 0 0 25px 9px;
      padding: .5em .8em;
      background-color: #2589d0;
      color: #ffffff;
    }
    
    .heading-1::before {
      position: absolute;
      top: 0;
      left: -9px;
      z-index: 1;
      width: 5px;
      height: 135%;
      border-radius: 3px;
      background-color: #660000;
      content: '';
    }
    
    .heading-1 span::before,
    .heading-1 span::after {
      position: absolute;
      left: -9px;
      width: 20px;
      height: 3px;
      border-radius: 3px;
      background-color: #c99; /* 紐の色は固定 */
      content: '';
    }
    
    .heading-1 span::before {
      top: 44%;
      transform: rotate(-25deg);
    }
    
    .heading-1 span::after {
      top: 54%;
      transform: rotate(25deg);
    }
  </style>
</head>
<body>
  <h1 class="heading-1">ゼロからWebデザインを勉強しよう！</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>

classやidを付与することでCSSを適用できます。

<div>タグと<span>タグについて

<div>タグと<span>タグの考え方を理解すれば、HTMLの基本は勉強できた状態だと言えるでしょう。

<div>タグと<span>タグのついて

<div>タグと<span>タグの違い
<div>タグと<span>タグはまとまりを作る
まとまりごとにWebデザインを変更可能

<div>タグと<span>タグの違い

<div>タグと<span>タグの違いは以下になります。

<div>タグは前後に改行が追加される
<span>タグは前後に改行が追加されない

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
<p>これは<div>例文</div>です。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
<p>これは<span>例文</span>です。</p>
</body>
</html>

<span>タグのように前後の改行が入らないタグをインライン要素、<div>タグのように前後に改行の入るタグをブロック要素と呼びます。

これは、displayといった属性（プロパティ）であり、とても奥が深いためここでは解説を割愛します。

displayプロパティの使い方を詳しく知りたい人は「【html&css】displayの種類は？flexやinline-blockの違い」を一読ください。

【CSS】display: blockとは？inlineやflexとの違いと種類

<div>タグと<span>タグはまとまりを作る

<div>~</div>や<span>~</span>はコードにまとまりを作るコードです。

例えば、<div>タグで複数コードを２つのまとまりに分けてみましょう。

classを”area-one”、”area-two”とします。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
</head>
<body>
<div class="area-one">
  <p>これは例文１です。</p>
  <p>これは例文２です。</p>
</div>
<div class="area-two">
  <p>これは例文３です。</p>
  <p>これは例文４です。</p>
</div>
</body>
</html>

まとまりを作っただけなのでブラウザで見ても変化はありません。

divタグの使い方を詳しく知りたい人は「【HTML】divタグの使い方：横並びや中央寄せ・CSS装飾」を一読ください。

また、spanタグの使い方を詳しく知りたい人は「【HTML】spanタグの使い方：divとの違いやCSS装飾・幅が効かない時の対策」を一読ください。

HTMLのdivタグとは？横並び・左右分割の使い方とCSS装飾

【HTML】spanタグの使い方：divとの違いやCSS装飾・幅が効かない時の対策

まとまりごとにWebデザインを変更可能

では、各classに対してbackgroundといったCSSをそれぞれ付与してみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>CODE STOCK</title>
  <meta charset="UTF-8">
  <style>
    .area-one {
      background: red;
    }
    .area-two {
      background: blue;
    }
  </style>
</head>
<body>
<div class="area-one">
  <p>これは例文１です。</p>
  <p>これは例文２です。</p>
</div>
<div class="area-two">
  <p>これは例文３です。</p>
  <p>これは例文４です。</p>
</div>
</body>
</html>