【2026年8月最新】HTMLの書き方とは？初心者向けに基本ルールを解説｜自分で書かなくてもClaude CodeでWebページが作れる方法
aikanri-admin
「ホームページを自分でも作れるようになりたい」「HTMLってよく聞くけど、結局何なのか分からない」——そんな理由でこの記事にたどり着いた方も多いのではないでしょうか。
HTMLは、Webページの見た目や構造を作るための言語です。難しそうに聞こえますが、基本的な考え方はシンプルで、非エンジニアの方でも仕組みを理解すること自体は十分可能です。「タグを100個暗記する」ようなイメージを持たれがちですが、実際に必要なのはごく一部の基本パターンの理解だけです。
この記事では、HTMLの基本構造・書き方のルール・よく使うタグまでを非エンジニア向けに整理します。さらに記事の後半では、「HTMLを自分で書けなくても、Claude Codeに任せればWebページやLPが作れる」という、今の時代ならではの選択肢についても解説します。
代表菅澤
AI鬼管理山崎
この記事を最後まで読むと、次のことが分かります。
01 WHAT IS HTML そもそもHTMLとは何か 「文章に印をつけて意味を持たせる」ための言語
HTMLは「HyperText Markup Language」の略で、文章に「印（マークアップ）」をつけることで、見出し・リンク・画像・表といった役割を与える言語です。プログラミング言語というより、「文章の構造を指定するためのルール」という理解の方が実態に近いです。
📚 用語解説
HTML（HyperText Markup Language）：Webページの構造を作るための言語。文章の各部分に「これは見出し」「これはリンク」といった役割（タグ）を付けていくことで、ブラウザが正しくレイアウトして表示できるようにします。
例えば、ただの文字列である「お問い合わせ」に対して、HTMLで「これはリンクです」という印をつけると、ブラウザ上でクリックできるリンクとして表示されます。この「印をつける」という考え方が、HTMLの本質です。プログラミング言語のように複雑な計算処理をするわけではないため、他のプログラミング言語と比べると、学習のハードル自体はそれほど高くありません。
1-1. HTMLファイルが表示される仕組み
HTMLファイルは、テキストエディタで書かれた文字の羅列を、拡張子「.html」で保存したファイルです。それをブラウザ（Chrome・Safariなど）で開くと、ブラウザがHTMLのルールに従って解釈し、見出しは大きく、リンクは色付きで、といった具合に整形して表示してくれます。
テキストエディタで
HTMLを記述
.html形式で
保存
ブラウザで
開く
ブラウザが解釈し
整形して表示
AI鬼管理山崎
02 3 RULES HTMLの書き方3つのルール 「要素」「タグ」「属性」を押さえれば全体像が見える
HTMLには100種類以上のタグがありますが、暗記する必要はありません。まずは全体を貫く3つの基本ルールを理解しておけば、初めて見るタグでも読み解けるようになります。
2-1. 要素（Element）：HTMLの基本単位
要素とは、HTMLを構成する1つ1つの部品のことです。見出し・段落・リンク・画像など、Webページ上のあらゆるパーツが「要素」として扱われます。
📚 用語解説
要素（Element）：HTML文書を構成する基本単位。見出し・段落・画像・リンクなど、Webページ上のあらゆる部品を指します。1つの要素は、通常「開始タグ」「中身」「終了タグ」の3つで構成されます。
2-2. タグ（Tag）：要素の始まりと終わりを示す印
タグは、「ここから要素が始まる」「ここで要素が終わる」を示す印です。多くのタグは、<p>（開始タグ）と</p>（終了タグ、スラッシュ付き）のペアで、中身を挟み込む形で使われます。
📚 用語解説
タグ（Tag）：要素の開始・終了を示すマーク。< と > で囲まれた記号で表現され、開始タグ（例：<p>）と終了タグ（例：</p>、スラッシュ付き）がペアで使われるのが基本です。中身を挟み込むことで、その範囲が「その要素である」と定義されます。
2-3. 属性（Attribute）：タグに追加情報を与える
属性は、タグに追加の情報を与える仕組みです。例えばリンクを作るタグ<a>には、「どこにリンクするか」を指定するhrefという属性を付け加えます。
📚 用語解説
属性（Attribute）：タグに付け加える追加情報。「属性名="値"」の形式で、開始タグの中に記述します。リンク先を指定するhref、画像の場所を指定するsrcなど、タグの種類によって使える属性が決まっています。
<!-- 要素・タグ・属性の関係 -->
<a href="https://example.com">リンクの文字</a>
<!--
<a ...>...</a> ← これが「要素」
<a> と </a> ← これが「タグ」（開始・終了）
href="..." ← これが「属性」
-->「要素＝パーツ全体」「タグ＝始まりと終わりの印」「属性＝タグへの追加情報」という関係さえ押さえれば、初めて見るタグでも構造を推測できるようになります。
代表菅澤
2-4. 「入れ子構造」と「閉じ忘れ」に注意する
HTMLでは、要素の中に別の要素を入れる入れ子構造（ネスト）が頻繁に使われます。例えば段落の中の一部だけを太字にしたい場合、<p>タグの中に<strong>タグを入れ子にして使います。
📚 用語解説
入れ子構造（ネスト）：要素の中に別の要素を入れる構造。外側のタグと内側のタグの開始・終了の順序を正しく対応させる必要があり、これが崩れるとレイアウトが意図せず崩れる原因になります。
<!-- 正しい入れ子構造 -->
<p>この文章の<strong>ここだけ</strong>太字にする</p>
<!-- 誤った例：閉じる順序が逆 -->
<p>この文章の<strong>ここだけ</p>太字にする</strong>手作業でHTMLを書く場合、タグの閉じ忘れや順序の間違いは初心者が最もつまずきやすいポイントです。1つのタグを閉じ忘れただけで、ページ全体のレイアウトが崩れることもあります。Claude Codeに生成を任せれば、こうした基本的なミスはまず発生しません。
03 BASIC TAGS よく使う基本タグ一覧 まずはこれだけ覚えれば読み書きの土台ができる
HTMLファイルの基本的な骨格と、頻出するタグを一覧で紹介します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
<body>
<h1>大見出し</h1>
<p>本文の段落です。</p>
<a href="https://example.com">リンク</a>
<img src="photo.jpg" alt="説明文">
</body>
</html>| タグ | 役割 |
|---|---|
| <!DOCTYPE html> | HTML5で書かれた文書であることの宣言（お約束の一文） |
| <html> | HTML文書全体を囲む、最も大きな要素 |
| <head> | 画面には表示されないが、タイトルや設定情報を記述する部分 |
| <body> | 画面に実際に表示される、ページのメイン部分 |
| <p> | 段落（文章のまとまり）を表す |
| <h1>〜<h6> | 見出し。数字が小さいほど重要度が高い見出しになる |
| <a> | リンクを作る（href属性でリンク先を指定） |
| <img> | 画像を表示する（src属性で画像の場所を指定） |
この基本骨格さえ理解していれば、Webページの構造の8割は読み解けます。<head>に「舞台裏の設定」、<body>に「実際に見える中身」が入るという役割分担を押さえておきましょう。
3-1. 意味を持たせる「セマンティックタグ」
HTMLには、単に見た目を作るだけでなく、「ここはページのヘッダーです」「ここはナビゲーションメニューです」というように、その部分の意味そのものを示すタグも用意されています。これをセマンティックタグと呼びます。
📚 用語解説
セマンティックタグ：「意味を持つタグ」という意味。<header>（ヘッダー）、<nav>（ナビゲーション）、<footer>（フッター）のように、その部分が何であるかをタグ自体が表現します。検索エンジンやスクリーンリーダー（視覚障がい者向け読み上げソフト）がページの構造を正しく理解する助けになります。
| セマンティックタグ | 意味 |
|---|---|
| <header> | ページやセクションの導入部分（ロゴ・タイトルなど） |
| <nav> | ナビゲーションメニュー（サイト内の主要リンク集） |
| <main> | ページの主要なコンテンツ部分 |
| <section> | 章・節のようなまとまりのある区画 |
| <footer> | ページやセクションの末尾部分（著作権表示・連絡先など） |
ただ見た目をまとめたいだけならdiv、その部分に明確な意味（ヘッダーである、ナビゲーションであるなど）があるならセマンティックタグを使う、という使い分けが基本です。SEOの観点からも、意味のある部分にはセマンティックタグを使う方が望ましいとされています。
代表菅澤
04 ADVANCED TAGS 応用タグと、見た目を整えるための仕組み デザインに関わるタグ・属性の考え方
4-1. meta・titleタグ：検索エンジンへの見え方を左右する
<head>の中に書く<title>タグは、検索結果やブラウザのタブに表示されるタイトルを決めます。<meta>タグは、文字コードの指定や検索結果に表示される説明文（ディスクリプション）など、画面には見えない重要な情報を担います。
📚 用語解説
meta タグ：ページの「見えない設定情報」を記述するタグ。文字コード指定・検索結果での説明文・SNSでシェアされた際の表示情報など、ページ自体には表示されないが重要な役割を持ちます。
4-2. class・id属性：見た目を整えるための「目印」
class属性とid属性は、特定の要素に「名前」を付ける仕組みです。この名前をCSS（後述）から指定することで、色・大きさ・配置などの見た目を細かくコントロールできます。
| 属性 | 特徴 | 使い分け |
|---|---|---|
| class | 同じ名前を複数の要素に使い回せる | 同じデザインを適用したい複数箇所に |
| id | ページ内で1回しか使えない、一意の名前 | そのページ特有の1箇所だけを指定したいときに |
4-3. div・spanタグ：範囲を囲んでまとめる
<div>は、複数の要素をひとまとまりのブロックとして囲むためのタグです。<span>は、文章の一部分だけを囲んで、そこだけ色を変えるといった細かい装飾に使われます。
divは「大きな箱」、spanは「小さな下線マーカー」のようなイメージで捉えると分かりやすいです。段落やセクション全体を囲みたいならdiv、文章中の一部だけを装飾したいならspanを使います。
4-4. margin・footer：余白と末尾情報
CSSで指定するmargin（マージン）は、要素と要素の間の余白を作るための指定です。HTMLタグそのものではありませんが、divやspanと組み合わせて使われることが多いため、あわせて紹介します。<footer>タグは、ページ末尾に著作権表示や連絡先など、共通して表示したい情報をまとめる役割を持ちます。
| 要素・指定 | 役割 |
|---|---|
| margin（CSS） | 要素の外側に余白を作り、要素同士がくっつきすぎないよう調整する |
| <footer> | ページ末尾の著作権表示・会社情報・SNSリンクなどをまとめる |
AI鬼管理山崎
05 HTML VS CSS VS JS HTML・CSS・JavaScriptの役割の違い 初心者が混同しがちな3つの言語を整理する
Web制作を調べていると、HTMLと一緒に必ず登場するのがCSSとJavaScriptです。この3つの役割を混同してしまう初心者は非常に多いため、ここで明確に整理しておきます。
📚 用語解説
CSS（Cascading Style Sheets）：HTMLで作った構造に対して、色・フォント・余白・配置などの「見た目」を指定する言語。HTMLが「骨組み」だとすると、CSSは「内装・装飾」の役割を担います。
📚 用語解説
JavaScript：Webページに「動き」や「機能」を加えるプログラミング言語。ボタンを押したら表示が切り替わる、フォームの入力内容をチェックする、といった動的な処理を担当します。
| 言語 | 役割 | 例えるなら |
|---|---|---|
| HTML | ページの構造・意味づけ | 家の骨組み・部屋の配置 |
| CSS | ページの見た目・装飾 | 内装・壁紙・家具の配置 |
| JavaScript | ページの動き・機能 | 照明のスイッチ・自動ドア |
HTMLだけでもWebページは表示されますが、装飾のないシンプルな見た目になります。CSSを組み合わせることで見た目が整い、JavaScriptを組み合わせることでボタンやフォームなどの「動き」が加わります。この3層構造を理解しておくと、「なぜこのページはこう動くのか」が説明できるようになります。
「HTMLでボタンの動きも作れる」と誤解されがちですが、HTMLはあくまで構造の定義までです。クリックしたときの動作（アニメーション・画面遷移など）は基本的にJavaScriptの領域になります。
5-1. レスポンシブデザインという考え方
スマホ・タブレット・PCなど、画面サイズの異なる端末それぞれで見やすく表示を切り替える設計をレスポンシブデザインと呼びます。現在のWeb制作では標準的に求められる要件で、CSSの中で「画面幅が◯◯px以下ならこのレイアウトに切り替える」というルールを指定することで実現します。
📚 用語解説
レスポンシブデザイン：1つのHTML・CSSで、PC・タブレット・スマホなど画面サイズの異なる端末それぞれに最適な見た目を自動的に切り替える設計手法。スマホで見たときに文字が小さすぎたり、横スクロールが必要になったりする問題を防ぎます。
今の時代、Webページの多くのアクセスはスマホ経由です。レスポンシブデザインに対応していないページは、スマホでの見づらさから離脱率が大きく上がる原因になります。Claude Codeに依頼する際も「スマホでも見やすく」と一言添えることを忘れないようにしましょう。
AI鬼管理山崎
06 NO-CODE APPROACH 【独自】コードを書かずにClaude CodeでWebページを作る方法 HTMLタグを「知らなくても」同じ成果物は作れる
ここまでHTMLの基礎を解説してきましたが、正直なところ、非エンジニアの経営者・担当者がHTMLタグを1つずつ覚える必要は、もはやありません。Claude CodeのようなAIエージェントに、作りたいページのイメージを日本語で伝えるだけで、コードごと生成してくれる時代だからです。
6-1. Claude Codeへの指示例
例えば、会社の紹介ページを作りたいとします。従来であれば「HTMLタグを覚えて、CSSでデザインして…」という手順が必要でしたが、Claude Codeであれば以下のように話しかけるだけで完結します。
「会社紹介ページを作って。上から会社名、キャッチコピー、サービス紹介3つ、お問い合わせボタンの順番で。色は赤を基調に、スマホでも見やすいデザインで」——これだけで、HTML・CSSを含んだページ一式が生成されます。
裏側でどんなタグが使われているかを意識する必要はありません。Claude Codeが目的を理解し、適切なHTML構造・CSSデザインを自分で組み立てて実行してくれます。
作りたいページを
日本語で伝える
Claude Codeが
構成を設計
HTML・CSSを
自動生成
ブラウザで
確認・修正依頼
6-2. 「学ぶ」か「任せる」かは目的で決める
もちろん、HTMLの基本構造を理解しておくこと自体には価値があります。AIが作ったページの構造をチェックしたり、簡単な修正を自分で行えたりするメリットがあります。一方で、「とにかく早くページを完成させたい」という目的であれば、タグを覚えるより、AIに任せる方が圧倒的に近道です。
| 選択肢 | 向いている人 | メリット | デメリット |
|---|---|---|---|
| HTMLを学ぶ | Web制作を専門にしたい人、仕組みを理解したい人 | 細かい修正を自分でできる、応用が効く | 習得に数週間〜数ヶ月かかる |
| Claude Codeに任せる | 早くページを完成させたい経営者・担当者 | 当日から使える、学習コストゼロ | 複雑な要件は繰り返し指示のすり合わせが必要 |
Claude Codeに作成を任せる場合も、公開前に実際の見た目・スマホでの表示崩れがないかなど、最低限の目視確認は行ってください。「任せる」と「確認せず公開する」は別の話です。
07 GENAI CASE STUDY 【独自】GENAI社内でのWeb制作自動化の実例 Claude Codeを全社運用する弊社の実践知見
弊社（株式会社GENAI）では、Claude Max 20xプラン（月額$200・約30,000円）を全社契約し、経営・営業・広告・開発・記事制作まで幅広い業務でClaude Codeを活用しています。この章では、Webページ制作に関わる実務での活用例を紹介します。
7-1. LP（ランディングページ）制作での活用
📚 用語解説
LP（ランディングページ）：広告やSNSのリンクをクリックした際に最初に表示される、1ページ完結型のWebページ。商品・サービスの魅力を伝え、問い合わせや購入につなげることを目的に作られます。会社紹介ページとは異なり、1つの訴求に絞って構成されるのが特徴です。
広告用のLPを新しく作る際、以前は外部のデザイナー・エンジニアに発注するか、社内のエンジニアが工数をかけて対応する必要がありました。現在は、Claude Codeに「訴求ポイントはこれで、こういう構成のLPを作って」と指示するだけで、HTML・CSSを含んだページ一式のたたき台が数十分で完成するようになりました。
| 業務領域 | 主な用途 | 概算削減時間 |
|---|---|---|
| LP・Web制作 | 広告用LP・紹介ページの構成設計から実装まで | 都度数時間〜数日を大幅短縮 |
| ブログ記事 | SEO記事の構成設計・執筆・内部リンク最適化 | 1本8時間 → 1本1時間 |
| 営業 | 提案書・見積・顧客別資料の自動生成 | 週20時間 → 週2時間 |
上記は弊社の肌感ベースの数値であり、業種・業態・担当者のスキルによって変動します。参考情報としてご覧ください。
7-2. 「専門知識ゼロから使い始められる」という実感
弊社のメンバーにも、HTMLを一度も書いたことがない人が複数在籍しています。それでも、Claude Codeを使ったWebページの調整・作成は特に問題なく進んでいます。理由はシンプルで、「どんなページにしたいか」さえ明確に伝えられれば、実装の部分はAIが引き受けてくれるからです。
代表菅澤
特に効果を感じているのが、「思いついたらすぐ試せる」というスピード感です。以前であれば「LPを1つ作るのに外注して1〜2週間待つ」という進め方が当たり前でしたが、今は思いついたその日のうちにたたき台を確認し、翌日には公開できる水準まで仕上げることも珍しくありません。このスピード感は、広告運用のようにスピードが成果に直結する業務では特に大きな武器になります。
7-3. 小さな修正依頼を積み重ねて理想のページに近づける
Claude Codeでのページ作成は、一度で完璧な仕上がりを目指す必要はありません。「ボタンの色をもう少し明るく」「スマホで見たとき文字が小さいので大きく」というように、小さな修正依頼を繰り返すことで、対話しながら理想の形に近づけていくのが実践的な進め方です。この進め方は、HTMLタグの知識がなくても、見た目の感想を言葉にできれば誰でも実践できます。
作ってもらう
大まかな構成を
指示
確認する
ブラウザで
実際に表示
言葉にする
「もっと明るく」
など具体的に
近づける
繰り返して
完成度を上げる
7-4. ブログ・LPだけでなく社内ツールにも応用できる
Web制作の自動化は、外部公開するLPやブログだけの話ではありません。弊社では、社内の進捗確認用の簡易ダッシュボードや、日報を一覧できる社内ページなど、外部に公開しない「社内専用ツール」もClaude Codeで作成しています。外注するほどの規模ではないが、Excelでは管理しづらい、という業務のすき間を埋める使い方です。
AI鬼管理山崎
08 CONCLUSION まとめ ── 仕組みを知る道と、任せる道の両方を持つ HTMLは「知らなくてもページは作れる」時代の象徴
この記事では、HTMLの基本構造から書き方のルール、よく使うタグ、CSS・JavaScriptとの役割の違い、そしてコードを書かずにClaude CodeでWebページを作る方法までを解説してきました。最後にポイントを振り返ります。
特に中小企業やスタートアップにとって、この選択肢の広がりは大きな意味を持ちます。以前であれば「Web担当者を採用するか、制作会社に高額で発注するか」という二択に近かった業務が、今は経営者自身やバックオフィスの担当者が、AIと対話しながら当日中に形にできる時代になっています。この記事で紹介したHTMLの基本知識も、AIが作ったものを理解し、より的確な指示を出すための土台として役立てていただければ幸いです。
最後にお伝えしたいのは、「HTMLタグを覚えること」自体がゴールではないということです。本当のゴールは、必要なタイミングで、必要なWebページを形にできる状態を作ることです。その手段として、コードを書く道と、AIに任せる道の両方が今は存在します。自分の状況に合わせて、無理なく使いやすい方を選んでください。
代表菅澤
コードを書かずに、Webページ制作を業務に組み込みませんか
HTMLの学習コストをかけずに、Claude CodeでLP・紹介ページ制作を進める。
弊社の実践知見をもとに、貴社の業務に合わせた導入設計をご提案します。
AI鬼管理山崎
ここから先の進め方は、大きく2つあります。
自社で回せるようになりたい方は、AI鬼管理でClaude Code／Codexの使い方から業務設計・社内定着まで伴走を受けながら、社内に仕組みを作る道があります。
覚えるより任せたい方は、AI社員AIKATAでこの記事のような定型業務を丸ごと預ける道があります。料金は月30万円の月額定額、追加費用は0円です。
どちらが合うかは、業務量と社内体制次第です。無料相談・無料適合診断で、貴社の場合はどちらが向くかからご相談いただけます。
NEXT STEP
この記事の内容を、あなたのビジネスで
実践してみませんか？
よくある質問
Q. HTMLとCSSはどちらを先に学ぶべきですか？
A. 一般的にはHTMLを先に学びます。HTMLで「構造」を作ってから、CSSで「見た目」を整えるという順番が自然なためです。ただし本文でも触れた通り、両方を自分で学ばなくても、Claude Codeに任せれば同等の成果物は作成できます。
Q. HTMLの知識がまったくなくても、この記事の内容は理解できますか？
A. はい、理解できるように書いています。コード部分は「こういう構造になっている」という参考程度に見ていただければ十分で、実際にコードを書けるようになる必要はありません。
Q. Claude CodeでWebページを作ると、HTMLタグの知識はまったく不要になりますか？
A. 基本的には不要です。ただし、AIが作ったページの構造を大まかに理解できると、修正依頼がより的確に出せるようになります。仕組みを知っておくと、AIとのやり取りがスムーズになるという副次的なメリットがあります。
Q. HTMLだけでおしゃれなWebページは作れますか？
A. HTMLだけでは装飾のないシンプルな見た目になります。色・フォント・余白などの装飾にはCSSが必要です。Claude Codeに任せる場合は、HTMLとCSSをセットで生成してくれるため、この違いを意識する必要はありません。
Q. Claude CodeでWebページを作る場合、費用はどのくらいかかりますか？
A. Claude Codeは、Pro以上のClaudeプラン（月額$20〜）に追加料金なしで含まれています。外部のデザイナー・エンジニアに発注する費用と比べると、大幅にコストを抑えられるケースが多くなっています。
Q. 非エンジニアの社員が多い会社でも、AIによるWeb制作の内製化は導入できますか？
A. 導入できます。むしろ専門知識がない状態からのスタートが前提のケースがほとんどです。弊社でも専門知識ゼロのメンバーがClaude CodeでLP制作を運用しています。まずは1つの簡単なページから試すことをおすすめします。
Claude Codeで業務自動化を90日で叩き込む
経営者向けの伴走型パーソナルトレーニング
AI鬼管理／AI社員AIKATAへのお問い合わせ
この記事を読んで気になった方へ。
専門スタッフが、御社に最適な
業務自動化・業務代行プランを無料でご提案します。
- AI業務自動化サービス「AI鬼管理」を運営 — Claude Code を活用し、経営者の業務を「AIエージェントに任せる仕組み」へ転換するパーソナルトレーニングを 伴走構築 で提供。日報・採用・問い合わせ対応・経費精算・議事録・データ集計・営業リスト等の定型業務を、AIに代行させる体制を経営者と一緒に作り込む
- Claude Code 実装ノウハウを 経営者・法人クライアント に直接指導。生成AIを「便利ツール」ではなく 「業務を任せる存在」 として運用する手法を体系化
- 「やらせ切る管理」メソッドの開発者。シンゲキ株式会社（2021年設立・鬼管理専門塾運営）にて累計3,000名以上の学習者を志望校合格に導いた管理メソッドを、AI × 経営者支援 に転用
- 著書『3カ月で志望大学に合格できる鬼管理』(幻冬舎)、『親の過干渉こそ、最強の大学受験対策である。』(講談社)
- メディア出演: REAL VALUE / カンニング竹山のイチバン研究所 / ええじゃないかBiz 他
- 明治大学政治経済学部卒
