事務局の視点から、SNSやお知らせでは
伝えきれない
スクールの情報や
魅力を発信しています。
2025.10.29
初めてホームページを作ろうと考えたとき、「どんな手順で進めればいいのか」「専門用語が多くて難しそう」と感じる方も多いのではないでしょうか。
実際、HTMLはホームページ制作の基礎となる技術ですが、ポイントを押さえれば初心者でも十分に学びながら形にできます。本記事では、HTMLで簡単なホームページを作るための手順から基本構造、デザインを整えるCSS、公開方法までをわかりやすく解説します。
目次
HTMLで簡易的なホームページを作る手順は次の通りです。
初めて学ぶ人にとっては専門用語が多く、難しく感じるかもしれません。しかし、手順を分けて一つずつ進めていけば理解しやすくなります。独学でコーディングを身につけたいと考えている方は、ぜひ以下の記事も参考にしてください。
関連記事：コーディングは独学で身につくのか？学び方・つまずくポイント・適性を解説
HTMLでホームページを作るには、まず編集環境を整えることが大切です。必要なのは、表示確認用のブラウザとコードを書くためのテキストエディタです。
ブラウザとしてはGoogle Chromeやbingなどを活用すると良いでしょう。
エディタには無料で使えるVisual Studio Code、CursorやNotepad++、Sublime Textなどがあり、初心者にはVS Codeがおすすめです。プログラミングの各要素にハイライトがついていたり、自動補完、ライブプレビューなどが搭載され、効率よく学習できます。
使用する際は、公式サイトからダウンロードしてインストールするだけで簡単。必要に応じて拡張機能を追加するとより便利です。
HTMLはホームページの構造を記述するマークアップ言語で、見出しや段落、リンクや画像などをタグで指定してページを組み立てます。まずデータ名の拡張子を「.html」として保存し、基本構造である <!DOCTYPE html>、<html>、<head>、<body> を押さえることが大切です。データ名は基本英語にしてください。
文字化けを防ぐために <meta charset=”UTF-8″> を指定し、タグは開始と終了を正しく書き、入れ子を意識します。よく使うタグには <h1>〜 <h6>見出し、<p> 段落、<a href=””> リンク、<img> 画像表示などがあります。
サイトの表示には関係ないですが、インデントや改行で読みやすく整理することも管理する上で重要です。
CSSはHTMLにデザインを与えるマークアップ言語です。文字色や背景色、余白やレイアウトを指定し、ページを見やすく整えます。
記述方法は主に3つあり、最も一般的なのは外部ファイルとして読み込む「外部CSS」で、大規模なサイト管理に適しています。小規模な場合はHTML内に直接書く「内部CSS」、一部要素だけ装飾するなら「インラインスタイル」も利用可能です。
基本構文は「セレクタ{プロパティ:値;}」で表し、例えばh1要素の文字色を青にするには 「h1 { color: blue; }」 と書きます。セレクタの種類や記述順によって優先順位が変わる点にも注意が必要です。
作成したHTMLやCSSが正しく表示されないときは、ブラウザに標準搭載されている開発者ツール（DevTools）でデバッグします。ChromeやFirefoxでは右クリックから「検証」を選ぶか、F12キーで起動できます。
要素タブではHTMLの構造を確認・編集でき、スタイルパネルで適用中のCSSをリアルタイムに変更可能です。計算済みスタイルを使えばmarginやpaddingなどボックスモデルの状態も把握できます。
変更は即時反映されますがファイルには保存されないため、修正箇所を特定して実際のコードに反映させることが大切です。
作成したHTMLやCSSを他の人が閲覧できるようにするには「公開」が必要です。一般的にはレンタルサーバーを契約し、取得したドメインを設定してからFTPソフトでサーバーの公開用フォルダにファイルをアップロードします。
ブラウザでアクセスして表示されれば公開成功です。最近はSSL化（HTTPS対応）も必須となっており、無料の証明書を使える場合もあります。
また、手軽に試したいならGitHub Pagesなどの無料ホスティングサービスを使う方法もあり、リポジトリにHTMLを置くだけで公開できます。
HTMLには基本となる構造があります。ホームページを作成する際は、まず以下のような基本構造を理解し、正しく記述することが大切です。
<!DOCTYPE html>
<html lang=”ja”>
<head>~</head>
<body>~</body>
</html>
初心者にとっては専門用語や聞き慣れない言葉も多く、覚えるのが大変に感じるかもしれません。しかし、この基本構造をしっかり押さえることで、サイトを正しく表示させることができます。ホームページ制作を学ぶ第一歩として、まずは上記の構造を身につけましょう。
関連記事：コーディングが難しいと感じる6つの理由！難しいと感じたときの勉強法も紹介！
HTML文書の最初には必ず <!DOCTYPE html> と書きます。この宣言は、ブラウザに対して「この文書はHTML Living Standardで書かれており、標準モード（Standards Mode）でレンダリングすべきものだ」と指示する役割を持ちます。
<!DOCTYPE html>の記載がない場合、ブラウザは互換モード（Quirks Mode）で解釈し、古い仕様に近い挙動をすることがあり、レイアウトやCSSの解釈で想定外の崩れが起きることがあります。
<html lang=”ja”>~</html> はHTML文書全体を囲むルート要素で、必ず1つだけ記述します。ここに lang=”ja” を指定すると、そのページが日本語で書かれていることをブラウザや検索エンジン、スクリーンリーダーに伝えられます。
見た目には影響しませんが、SEOやユーザー補助の観点で重要です。例えば翻訳機能や音声読み上げが正しく働き、検索エンジンも適切に言語を認識できます。
<head>~</head> はHTML文書の設定や情報をまとめる部分で、ブラウザや検索エンジンにページの性質を伝える役割があります。見た目には表示されませんが、非常に重要です。
主に <head> 内に記述する要素の例は次の通りです。
| 要素 | 役割 |
|---|---|
| <title> | ブラウザのタブ名や検索結果のタイトルとして使われる文言 |
| <meta> | 文字コード指定（例：<meta charset=”UTF-8″>説明文（description）、ビューポート設定など） |
| <link> | 外部 CSS ファイルの読み込み、ファビコン設定など |
| <head> | JavaScriptの読み込みや動作設定を記述することも可能 |
<body>~</body> はHTML文書でユーザーに表示される内容を記述する箇所です。見出しや文章、画像、リンク、フォームなど、ページを構成する要素はすべてここに含まれます。
HTML文書には必ず1つだけ存在し、<head> の後ろに配置されます。id や class といったグローバル属性を指定でき、JavaScriptの onload などのイベント属性も利用可能です。
なお、以前はbgcolorやtextなどで背景色や文字色を指定していましたが、現在は非推奨であり、CSSでスタイルを設定するのが標準的な方法です。
HTMLテンプレートを利用すれば、誰でも手軽に素早くWebサイトを作成できます。特に初心者の方は、以下で紹介する無料配布サイトのテンプレートを活用すると、効率的にサイト作りを始められるでしょう。
| サイト名 | 特徴 |
|---|---|
| 無料ホームページテンプレート.com | ・商用利用可能 ・数百種類以上の豊富なデザイン ・レスポンシブ対応でスマホ最適化済み ・クレジット表記が必要 |
| Template Party | ・商用利用無料、1,000点以上のテンプレート ・老舗サイトでジャンル別に探しやすい ・部品パーツ単位でも配布（ヘッダーやフッターなど） ・カスタマイズ性が高い |
| TEMPLATE GATE | ・登録不要で利用可能 ・商用利用OK、制約は少なめ ・ビジネス向けの落ち着いたデザイン中心 ・カラー・レイアウト別にカテゴリ分けあり |
学び始めたばかりのうちは、まず上記のようなHTMLテンプレートを活用し、慣れてきたら少しずつオリジナルのカスタマイズに挑戦することも効果的な学習方法の一つです。
ホームページの作り方を勉強するためには、下記のようにいくつか方法があります。
ホームページの作り方を勉強する目的や、何をいつまでに学習するかという目標設定によって、最適な勉強方法は異なります。まずは、独学で勉強してみて難しいと感じたら、nests Digital Creative Academyが開校しているようなプログラミングスクールに通うことも一つの手です。
https://nests.jp/course/web//basic-frontend/
小倉 仁
事業会社にインハウスデザイナーとして勤務。Webデザインとコーディングの両方を行っており、特にコーディングを主に担当。
nestsアドバンスコース卒業生。
関連記事
各コースの詳細はもちろん、
特待生制度のことや、業界についての質問等、
個別で対応させて頂きます。
入学をご検討中の方はお気軽にご予約ください。
