初心者向け｜HTMLとCSSで簡単なWebページを作ろう！

「Webページを作ってみたいけど、何から始めればいいかわからない…」という方に向けて、HTMLとCSSを使ったシンプルなWebページの作り方を解説します！✨
この記事では、基本的なHTMLとCSSを使って、簡単なプロフィールページを作るので、初心者でもすぐに挑戦できます！

1. 必要な準備
2. HTMLの基本構造
3. CSSでデザインを整える
4. Webページを表示してみよう！
1. ① ローカルで開く方法
2. ② Webに公開する方法
5. 追加でできるカスタマイズ
まとめ

1. 必要な準備

Webページを作るには、以下のツールを用意しましょう。

✅ テキストエディタ（VSCode推奨）
✅ Webブラウザ（Google Chrome推奨）

VSCodeの環境構築がまだの方は、VSCodeのインストール方法をチェック！

2. HTMLの基本構造

まず、HTMLの基本的な骨組みを作ります。index.html という名前で新しいファイルを作成し、以下のコードを書いてみましょう。

htmlCopy<!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>
    </header>

    <section class="profile">
        <img src="profile.jpg" alt="プロフィール画像">
        <h2>山田 太郎</h2>
        <p>Webデザイナー | フロントエンドエンジニア</p>
    </section>

    <section class="about">
        <h2>自己紹介</h2>
        <p>こんにちは！私はWebデザインとフロントエンド開発が大好きです。HTMLとCSSを使ってシンプルで美しいWebページを作るのが得意です。</p>
    </section>

    <footer>
        <p>&copy; 2024 山田 太郎</p>
    </footer>
</body>
</html>

🔹 コードのポイント
✅ <!DOCTYPE html> はHTMLのバージョンを指定（HTML5）。
✅ <head> にはページのタイトルやCSSのリンクを設定。
✅ <body> に実際に表示するコンテンツを記述。

3. CSSでデザインを整える

次に、style.css というファイルを作成し、以下のCSSコードを書きましょう。

cssCopy/* 全体のリセット */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #f4f4f4;
}

/* ヘッダーのデザイン */
header {
    background-color: #333;
    color: white;
    padding: 20px;
    font-size: 24px;
}

/* プロフィールセクション */
.profile {
    margin: 30px auto;
    padding: 20px;
    background-color: white;
    width: 300px;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.profile img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

/* 自己紹介セクション */
.about {
    margin: 30px;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

/* フッター */
footer {
    background-color: #333;
    color: white;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

🔹 デザインのポイント
✅ body { text-align: center; } で中央揃え。
✅ プロフィール部分をボックス化 して見やすく。
✅ 影（box-shadow） を使って立体感を演出。
✅ フッターを固定表示 してページの統一感を出す。

4. Webページを表示してみよう！

コードを書いたら、実際にブラウザで開いて確認しましょう。

① ローカルで開く方法

作成すいたフォルダにある　index.html 　をダブルクリック → ブラウザで表示されます。
もしくは、VSCodeのLive Server 拡張機能を使うと、変更をすぐに反映できます。

② Webに公開する方法

作ったページをWeb上に公開するには、GitHub PagesやNetlify などの無料サービスを利用するのがおすすめです。

5. 追加でできるカスタマイズ

✅ 色やフォントを変更する

background-color を好きな色に変更
font-family をGoogle Fontsでおしゃれに

✅ レスポンシブデザイン対応

@media を使ってスマホ対応にする

✅ ボタンやリンクの追加

<a href="https://example.com">こちら</a> を入れて外部リンクを設置

まとめ

これで、HTMLとCSSを使った簡単なWebページが作れました！💻✨

✅ HTMLの基本構造を理解した
✅ CSSでデザインを整えた
✅ ブラウザで表示して確認した

少しずつコードをカスタマイズして、自分だけのオリジナルWebページを作ってみましょう！🚀