ゼロから学ぶホームページの作り方｜初心者向けにHTMLとCSSの基本からサーバー公開までを徹底解説

2025年9月4日

Webサイト制作は本当に必要？🤔
そのメリットと目的を明確にしよう

今やビジネスにWebサイトは必須です。しかし、なぜ必要なのでしょうか？目的をはっきりさせることで、作るべきサイトの形が見えてきます。例えば、お店の認知度を上げたい、商品をオンラインで販売したい、会社の信頼性を示したいなど、目的によってデザインや機能は大きく変わるのです。

ホームページ作成は、正しい手順で進めれば決して難しくありません。ここでは、企画から公開までの大きな流れを4つのステップでご紹介します。この流れを頭に入れておけば、途中で迷子になることはありません。

LPで何を達成したいのか（商品の購入、問い合わせ、資料請求など）を明確にします。

LPに掲載する文章、画像、ロゴなどの素材を用意します。

見た目のデザインを作成し、HTMLやCSSでページを構築します。

作成したファイルをブラウザで確認し、サーバーに公開します。

ホームページは、主に「HTML」と「CSS」という2つの言語でできています。まずはこの2つの役割を理解することから始めましょう。例えるなら、HTMLが家の骨組み、CSSが壁紙や家具などのインテリアです。両方があって初めて、快適な家（Webページ）が完成します。

HTML (HyperText Markup Language) は、テキストや画像などのコンテンツに「見出し」「段落」といった意味付けをするための言語です。`<h1>` や `<p>` といった「タグ」でコンテンツを囲むことで、コンピューターがページの構造を理解できるようになります。

<h1>これは一番大きな見出しです</h1>
<p>これは段落の文章です。</p>
<a href="https://...">これはリンクです</a>
<img src="..." alt="画像の説明">

CSS (Cascading Style Sheets) は、HTMLで作った構造に対して、色やサイズ、配置などのデザインを指定するための言語です。「どの部分（セレクタ）」の「何を（プロパティ）」を「どうするか（値）」という形で記述します。

/* h1タグの文字を赤色に、サイズを32pxにする */
h1 {
  color: red;
  font-size: 32px;
}

作成したホームページは、サーバーにアップロードして初めて世界中の人が見られるようになります。「サーバー」はWebサイトのデータを保管しておく土地、「ドメイン」はその土地の住所だと考えると分かりやすいでしょう。

サーバー

Webサイトのファイル（HTML, CSS, 画像など）を置いておくためのコンピューター。通常は「レンタルサーバー」を契約して利用します。

ドメイン

「https://example.com」のようなインターネット上の住所。覚えやすいオリジナルの「独自ドメイン」を取得するのが一般的です。

自分で作る時間がない、もっとクオリティの高いサイトが欲しい。そんな時はプロの制作会社に依頼するのも一つの手です。目的や予算に合わせて、最適なプランを提案してくれます。

ホームページ制作プラン: 165,000円
オリジナルのWordPressサイトを制作。3ヶ月のブログ更新サポート付き。
飲食店向け BASEショップ制作プラン: 165,000円
お店の味を全国へ届けるECサイトを制作。物販の第一歩をサポート。
個人事業主向け BASEショップ制作プラン（レッスン付）: 200,000円
自分で更新できるようになる3ヶ月レッスン付き。占い師、作家、ハンドメイド作家の方に。
楽天市場出店サポートプラン: 165,000円
審査から店舗ページ構築まで、楽天市場への出店をフルサポート。