HTMLでホームページを作る入門ガイド｜業者がそのまま使う実コード集と現代モダンの書き方
takeyandesusoyHTMLでホームページを作りたい方向けに、制作会社の中の人が業者が実案件で使っている実コード・現代モダンの書き方・初心者がつまずく9ポイントを公開します。コピペで動くテンプレを多数掲載しているので、本記事を読みながら最初の1ページが公開できる構成にしました。業者として「ここはこう書くと現代的」というポイントも本音で共有します。
業者目線：HTMLを学ぶ意味と限界
業界の中の人として正直に申し上げますが、現代のホームページ制作で「HTMLだけ」で作るケースは実は少数派です。それでも業者として、HTMLを学ぶ意味は大きく3つあります。
- 1. Web技術の土台になる：WordPress・SaaS（wix/jimdo）でも、細かいカスタマイズにはHTML知識が必須
- 2. SEO設計の理解が深まる：構造化データ・セマンティックタグの理解は業界の必須スキル
- 3. トラブル対応ができる：レイアウト崩れの原因特定が自分でできる
逆に「HTMLだけで本格的なホームページを作ろう」と思うと、業者として正直、現代では効率が悪いです。WordPress＋有料テーマのほうが圧倒的に短時間で同等品質に到達できます。本記事は「HTMLを学んで、最終的にはWordPress等でカスタマイズできるようになる」という業界標準のキャリアパスを想定しています。
業者がそのまま使う最小HTML（コピペで動く）
まず、業者が実案件のスタート時に使う最小限のHTMLテンプレを公開します。テキストエディタ（VS Code推奨）に貼り付けて「index.html」というファイル名で保存し、ブラウザで開くと表示されます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>サイトタイトル｜キャッチコピー</title> <meta name="description" content="100-160字程度のサイト説明文をここに"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>サイトタイトル</h1> <nav> <ul> <li><a href="/">ホーム</a></li> <li><a href="/services/">サービス</a></li> <li><a href="/contact/">お問い合わせ</a></li> </ul> </nav> </header> <main> <article> <h2>メインコンテンツのタイトル</h2> <p>本文をここに書きます。</p> </article> </main> <footer> <p>© 2026 サイト名</p> </footer> </body> </html>
業者として、このテンプレで現代モダンに必要な5要素を全て含めています。①UTF-8文字コード、②モバイル対応のviewport設定、③SEO用のtitle/description、④セマンティックタグ（header/nav/main/article/footer）、⑤外部CSSの読み込み。これより少ないHTMLは現代の業界では「不完全」と判断されます。
業者が現代モダンで使う10のタグ
業者として現代モダンで使うHTMLタグ10種を、用途別に整理します。これだけ覚えれば、業界標準の基本サイトが作れます。
| タグ | 用途 | 業者目線のポイント |
|---|---|---|
| <h1>〜<h6> | 見出し | h1は1ページに1つだけが業界標準 |
| <p> | 段落 | テキストの基本単位 |
| <a> | リンク | target="_blank"は外部リンクのみ |
| <img> | 画像 | alt属性は必須（SEO・アクセシビリティ） |
| <ul>/<li> | 箇条書き | 順序が関係ある時は<ol> |
| <header> | ページ上部 | セマンティック化で必須 |
| <nav> | ナビゲーション | メニューはこの中に |
| <main> | 本文領域 | 1ページ1つ |
| <article>/<section> | 区切り | 意味のあるまとまりに |
| <footer> | ページ下部 | コピーライト・連絡先 |
業界の中の人として、この10タグだけ覚えれば「業者基準のHTML」は書けます。<div>や<span>も使いますが、現代のセマンティックHTMLでは「とりあえず<div>で囲む」スタイルは業界では避けられる傾向です。意味のあるタグを優先するのが業者の標準です。
業者が新人に教えるCSS最小構成
HTMLだけでは見た目が地味なので、CSSで装飾します。業者が新人に最初に教えるCSS最小構成をそのまま公開します。先ほどのindex.htmlと同じフォルダに「style.css」というファイル名で保存してください。
/* リセット＋基本設定 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Helvetica Neue', sans-serif;
line-height: 1.7;
color: #333;
background: #fafafa;
}
/* レイアウト */
header, main, footer { max-width: 960px; margin: 0 auto; padding: 24px; }
/* 見出し */
h1 { color: #1a3a5c; font-size: 28px; margin-bottom: 16px; }
h2 { color: #1a3a5c; font-size: 22px; border-bottom: 3px solid #1a3a5c; padding-bottom: 8px; margin: 24px 0 16px; }
/* ナビゲーション */
nav ul { list-style: none; display: flex; gap: 16px; }
nav a { color: #1a3a5c; text-decoration: none; padding: 8px 16px; }
nav a:hover { background: #1a3a5c; color: #fff; border-radius: 4px; }
/* 段落 */
p { margin-bottom: 16px; }
/* リンク */
a { color: #c45a00; }
/* フッター */
footer { text-align: center; color: #666; font-size: 14px; }
業者として、この最小構成だけで「最低限見られる」サイトが完成します。実機検証で約30分で動作確認できます。配色は3色（メインカラー#1a3a5c、アクセント#c45a00、テキスト#333）に絞っているのが業界標準のセオリーです。
業者が現代モダンで使うCSS Grid・Flexbox（実コード）
業界の中の人として、現代モダンのレイアウトには「CSS Grid」と「Flexbox」が必須です。当社の新人にも最初の1ヶ月で必ず習得させています。業者がそのまま使うパターンを公開します。
Flexbox：横並びレイアウト（業界の定番）
.container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
CSS Grid：2次元グリッドレイアウト
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* スマホ対応 */
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
}
業者として実案件で頻出するのが「カードを3列で並べる」レイアウト。上記のGridコードでPCは3列、スマホは1列になります。これは業界の現代モダン標準パターンで、当社のサイトでも多用しています。
業者目線で必須のSEO設定（HTMLレベル）
業者として、HTMLでサイトを公開するなら絶対に外せないSEO設定を整理します。これらは業界標準で、当社の全案件で必ず設定しています。
必須meta設定
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ページタイトル｜サイト名</title> <meta name="description" content="100-160字でページ内容を要約"> <meta property="og:title" content="SNS共有時のタイトル"> <meta property="og:description" content="SNS共有時の説明"> <meta property="og:image" content="https://example.com/og.jpg"> <link rel="canonical" href="https://example.com/page/">
業者として、これら全てを設定して初めて「公開可能」と判断します。特にOGP（og:）はSNS共有時の見た目に直結するため、業界では必須化されています。
初心者がつまずく9ポイント（業者として何百件と見てきた）
業者として、HTML自作の方からよく相談される失敗パターンを共有します。事前に知っているだけで挫折率が大きく下がります。
- 1. 文字化け：<meta charset="UTF-8">の設定漏れ。最初に必ず
- 2. スマホで崩れる：viewport設定とCSS Mediaクエリの両方が必要
- 3. リンクが効かない：相対パス・絶対パスの違いで詰まる
- 4. 画像が表示されない：ファイルパス・拡張子の大文字小文字
- 5. CSSが反映されない：<link>タグのpathが間違い
- 6. レイアウトが崩れる：box-sizing未設定が原因の場合が多い
- 7. 余白が思い通りにならない：margin/paddingの違い理解
- 8. SEO設定を忘れる：title/description設定なしで公開
- 9. FTPでアップロードできない：FileZillaの接続設定で詰まる
これらは業界の中の人として「初心者の9割が一度は詰まる」典型パターンです。当社の新人にも最初の1ヶ月で必ず経験させ、解決方法をマスターさせています。本記事のテンプレを使えば1〜5は最初から回避できます。
業者目線：HTMLサイトを公開する10ステップ
- VS Codeをインストール（無料）：業界標準のテキストエディタ
- フォルダ作成：「mywebsite」など分かりやすい名前で
- index.html作成：本記事のテンプレをコピペ
- style.css作成：CSS最小構成をコピペ
- images/フォルダ作成：画像素材をここに
- テキスト・画像を差し替え：自分のサイト内容に
- ブラウザでローカル確認：index.htmlをブラウザで開く
- レンタルサーバー契約：エックスサーバー等
- FTPでアップロード：FileZilla無料ソフト使用
- 独自ドメイン取得＆SSL設定：公開
業者として、初心者がこの10ステップを踏めば、約20〜40時間で1ページサイトが公開できます。詳しい全体像はホームページの作成方法完全解説に書きました。
業者目線：HTML自作の限界とWordPressへの移行タイミング
業者として正直に申し上げますが、HTML自作には限界があります。次のいずれかに該当したら、WordPress等のCMSへの移行を検討すべきタイミングです。
- ページ数が10超：HTMLだけでメニュー・フッターの一括更新が大変
- ブログ・お知らせを定期更新：CMS化したほうが圧倒的に楽
- 複数人で更新：HTMLは1人運用が限界
- EC・予約・会員機能が必要：HTMLだけでは実装困難
- SEO対策を細かく行いたい：プラグインで一気に対応可能
業界の体感として、HTML自作で運用できるのは「5ページ以下・更新頻度が低い・1人で運用」のサイトまでです。それ以上はWordPressへの移行が業界標準。当社のSaaS乗り換えプラン¥148,000〜でHTML→WordPressへの移行も承っています。
業者が新人に勧める無料学習リソース
当社で新人スタッフに勧めている、HTML学習の無料リソースを公開します。業界の体感で「ここから始めれば挫折しにくい」と評価できるもを厳選しました。
- Progate：対話型学習。HTML/CSS初級は無料、応用は月¥1,078
- ドットインストール：3分動画。HTML/CSS基礎は無料
- MDN Web Docs：Mozilla公式リファレンス。網羅的で業界標準
- HTML5 UP：無料テンプレ配布。商用OKで学習素材に最適
- CodePen：他人のコードを見て学ぶ。業界のトレンド把握に
業界の中の人として、独学なら2〜3ヶ月で基本サイトが作れるレベルになります。詳しい学習ロードマップはプログラミング学習ロードマップに書きました。
よくある質問（業者の本音回答）
Q1. HTMLだけでホームページは完成しますか？
表示はできますが、見た目が地味なのでCSSは事実上必須。動きを付けたい場合はJavaScriptも必要です。業界の現代モダンでは「HTML＋CSS＋JavaScript」が最小構成です。
Q2. HTML学習にかかる期間は？
業界の体感で、基本だけなら1週間、実用的なサイトを作れるレベルまでなら2〜3ヶ月、本格的な制作スキルなら半年〜1年が目安です。当社の新人も最初の3ヶ月で基本サイトが作れるレベルになります。
Q3. HTMLとWordPressどちらを先に学ぶべき？
業者としては「まずwix・jimdoでWebの全体像を体感→HTML基礎→WordPress」という順序を新人にも教えています。HTMLから始めると挫折率が高めなので、SaaSから入って徐々に技術を深めるのが業界の現代的なアプローチです。
Q4. HTMLサイトはGoogle検索に出ますか？
出ます。むしろSEO的にはHTMLサイトのほうが軽量で速いため、適切に書けばWordPressより評価が高いケースもあります。ただし、コンテンツ更新の手間がWordPressより圧倒的に大きいため、長期運用での効率では負ける、というのが業界の現実です。
Q5. プログラミング初心者でも独学できますか？
HTMLは「マークアップ言語」でプログラミング言語ではないため、論理的思考よりも文字の書き分けが中心です。業界の中の人として、初心者にも取り組みやすい部類です。CSSが入ってくると一気に難易度が上がるので、HTML基礎を固めてから進むのが業者の推奨順序です。
Q6. 業者依頼ならHTMLは不要ですか？
業者依頼すれば直接書く必要はありませんが、「業者の見積もりを判断する」「業者の納品物の品質を見抜く」スキルとして、HTML基礎を知っているお客様は業界では非常に少数派で、業者から見ても「やりやすい」依頼者になります。
まとめ：本記事のテンプレで「最初の1ページ」を公開する
HTMLでホームページを作るなら、本記事の業者標準テンプレ・CSS最小構成・10タグ・SEO設定をそのまま使えば、業者基準の最初の1ページが公開できます。学習目的なら最初はHTML自作、運用効率なら最終的にWordPressへ移行する、というのが業界標準のキャリアパスです。途中で詰まったら、業者の無料相談でお気軽にご相談ください。当社のサービス概要と料金プランもご参考に。
HTML学習に詰まったらお気軽にご相談ください
途中まで自作したサイトの引継ぎ・完成代行、HTMLからWordPressへの移行も承ります。無料相談からどうぞ。
