初心者向け：HTMLとCSSを使った簡単なホームページの作り方

  • 投稿日
  • 更新日
  • 著者 NT CREATION
  • カテゴリー お役立ち情報

ホームページを作ってみたいけれど、どこから始めればいいのかわからない…そんな方のために、この記事ではHTMLとCSSを使ったシンプルなホームページの作り方を解説します。専門的な知識がなくても、基本的な仕組みを理解すれば、自分のオリジナルサイトを作れるようになります。

1. HTMLとCSSとは？

HTML（HyperText Markup Language）
ホームページの「骨組み」を作る言語です。テキストや画像、リンクなどの要素を配置します。

CSS（Cascading Style Sheets）
ホームページの「見た目」を整える言語です。文字の色や背景、レイアウトを調整します。

2. 必要な準備

用意するもの:

  • テキストエディタ（コードを書くソフト）
    • Windows: メモ帳 or VS Code（推奨）
    • Mac: テキストエディット or VS Code（推奨）
  • ウェブブラウザ（Chrome, Firefox, Edgeなど）

3. ホームページの基本構造を作る（HTML編）

まずは、ホームページの基本となるHTMLファイルを作成します。

手順:

  1. テキストエディタを開く（VS Code推奨）
  2. 以下のコードをコピーして、新しいファイルに貼り付ける
  3. index.html という名前で保存する
htmlコピーする編集する<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>私のホームページ</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>私のホームページへようこそ</h1>
        <nav>
            <ul>
                <li><a href="#">ホーム</a></li>
                <li><a href="#">サービス</a></li>
                <li><a href="#">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>サービス紹介</h2>
            <p>私たちは、Web制作・デザインを提供しています。</p>
        </section>

        <section>
            <h2>お問い合わせ</h2>
            <p>質問があれば、お気軽にお問い合わせください。</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 私のホームページ</p>
    </footer>
</body>
</html>

ポイント:

  • <head> 内でサイトのタイトルとCSSファイルの読み込みを設定
  • <body> 内でページのコンテンツを作成（ヘッダー、メイン、フッター）
  • <nav> を使ってメニューを作成

4. 見た目を整える（CSS編）

次に、サイトのデザインを設定します。

手順:

  1. 新しいテキストファイルを作成し、以下のコードをコピー
  2. style.css という名前で保存
cssコピーする編集するbody {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    text-align: center;
}

header {
    background: #333;
    color: white;
    padding: 15px;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

main {
    padding: 20px;
}

section {
    background: white;
    margin: 20px auto;
    padding: 15px;
    width: 80%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

footer {
    background: #333;
    color: white;
    padding: 10px;
    margin-top: 20px;
}

ポイント:

  • body: 背景色とフォントを設定
  • header: ヘッダーのデザイン（背景色・文字色）を指定
  • nav ul li: メニューのレイアウトを横並びに調整
  • section: コンテンツ部分のスタイルを設定

5. 作成したホームページをブラウザで確認する

  1. index.html をダブルクリックして、ブラウザで開く
  2. ちゃんと表示されるか確認
  3. CSSのスタイルが適用されているかチェック

6. より見栄えを良くする（画像・カスタマイズ）

画像を追加する
<img> タグを使って画像を追加できます。

htmlコピーする編集する<section>
    <h2>私たちのサービス</h2>
    <img src="service.jpg" alt="サービスのイメージ" width="300">
    <p>プロのデザインでホームページを作成します。</p>
</section>

ボタンを追加する
CSSでボタン風のデザインを作れます。

htmlコピーする編集する<a href="contact.html" class="btn">お問い合わせ</a>

cssコピーする編集する.btn {
    display: inline-block;
    padding: 10px 20px;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}
.btn:hover {
    background: #0056b3;
}

7. サーバーにアップロードして公開する

ローカル環境で作ったホームページをインターネット上に公開するには、サーバーにアップロードする必要があります。

方法:

  1. 無料で使えるサーバーを選ぶ（例：Netlify、GitHub Pages）
  2. FTPソフト（FileZilla）を使ってレンタルサーバーにアップロード
  3. ドメインを取得してサイトURLを設定

8. まとめ

  1. HTMLでページの構造を作成
  2. CSSでデザインを整える
  3. 画像やボタンを追加してカスタマイズ
  4. ブラウザで表示を確認
  5. サーバーにアップロードして公開

初心者でも、この手順を踏めば簡単なホームページを作ることができます。まずは基本を押さえ、自分の好みに合わせてカスタマイズしてみましょう！

お問い合わせはこちら