第20回 HTMLプロジェクトを作成しよう – ウェブサイトを作成する

INDEX

はじめに
プロジェクトの構成
基本的なHTML構造
スタイルの設定
プロジェクトの動作確認
さらなる拡張
まとめ

はじめに

これまでの講座で学んだHTMLやCSSの基礎をもとに、実際にプロジェクトを作成してみましょう。HTMLプロジェクトは、学んだ知識を応用し、ウェブサイトやウェブページを作る第一歩です。今回は、シンプルなポートフォリオサイトを作成する手順を紹介し、基本的なレイアウト、スタイル設定、リンクや画像の挿入などを実践します。

プロジェクトの構成

今回作成するプロジェクトでは、次の要素を含むシンプルなポートフォリオサイトを構築します。

ヘッダーにウェブサイトのタイトルとナビゲーションメニュー
自己紹介のセクション
プロジェクトや作品のギャラリー
お問い合わせフォーム
フッターに著作権情報とソーシャルリンク

基本的なHTML構造

まず、基本的なHTMLの構造を設定します。<header>、<section>、<footer> などのセマンティックなタグを使用し、各セクションの構造を明確にしましょう。

<!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="styles.css">
</head>
<body>
    <header>
        <h1>私のポートフォリオ</h1>
        <nav>
            <ul>
                <li><a href="#about">自己紹介</a></li>
                <li><a href="#projects">プロジェクト</a></li>
                <li><a href="#contact">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>

    <section id="about">
        <h2>自己紹介</h2>
        <p>こんにちは！私はウェブ開発者です。</p>
    </section>

    <section id="projects">
        <h2>プロジェクト</h2>
        <div class="gallery">
            <div class="project">
                <img src="project1.jpg" alt="プロジェクト1">
                <p>プロジェクト1の説明</p>
            </div>
            <div class="project">
                <img src="project2.jpg" alt="プロジェクト2">
                <p>プロジェクト2の説明</p>
            </div>
        </div>
    </section>

    <section id="contact">
        <h2>お問い合わせ</h2>
        <form action="#" method="post">
            <label for="name">お名前:</label>
            <input type="text" id="name" name="name">
            <label for="email">メールアドレス:</label>
            <input type="email" id="email" name="email">
            <label for="message">メッセージ:</label>
            <textarea id="message" name="message"></textarea>
            <button type="submit">送信</button>
        </form>
    </section>

    <footer>
        <p>© 2024 私のポートフォリオ</p>
        <div>
            <a href="https://twitter.com" target="_blank">Twitter</a> |
            <a href="https://github.com" target="_blank">GitHub</a>
        </div>
    </footer>
</body>
</html>

スタイルの設定

次に、CSSを使用してページのスタイルを設定します。基本的なレイアウト、フォント、色をカスタマイズし、ページ全体のデザインを整えます。以下は、シンプルなスタイルシートの例です。

/* リセットスタイル */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f0f0f0;
}

header {
    background-color: #333;
    color: white;
    padding: 10px 0;
    text-align: center;
}

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

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

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

section {
    margin: 20px 0;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
}

.gallery {
    display: flex;
    justify-content: space-around;
}

.project {
    text-align: center;
}

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

footer a {
    color: white;
    margin: 0 5px;
    text-decoration: none;
}

このスタイルシートでは、ヘッダーやフッターの背景色、ナビゲーションメニューのレイアウト、ギャラリーの配置など、ページ全体のスタイルを設定しています。

プロジェクトの動作確認

コードを書き終えたら、ブラウザでプロジェクトが正しく表示されるか確認しましょう。作成したHTMLファイルをブラウザで開き、デザインやレイアウトが期待通りに表示されるかチェックします。また、異なるデバイスや画面サイズでもレイアウトが崩れていないか確認することも重要です。レスポンシブデザインが適用されている場合、デスクトップ、タブレット、スマートフォンでも適切に表示されます。

さらなる拡張

このプロジェクトでは、基本的なポートフォリオサイトを作成しましたが、ここからさらに拡張することが可能です。以下のアイデアをもとに、自分のプロジェクトをカスタマイズしてみましょう。

プロジェクトギャラリーにアニメーションやホバーエフェクトを追加
フォームに入力チェック（バリデーション）機能を追加
レスポンシブデザインを強化して、モバイル向けに最適化
CSSフレームワーク（Bootstrapなど）を使ってデザインを洗練

まとめ

今回は、HTMLとCSSを使ってシンプルなポートフォリオサイトを作成するプロジェクトを通して、学んだ知識を応用しました。実際にプロジェクトを作成することで、ウェブ開発の基礎を深く理解でき、さらに自分のウェブサイトをカスタマイズしていく力が身につきます。今後はJavaScriptやSEOの知識を取り入れて、より機能的で検索エンジンに最適化されたサイトを作成していきましょう！

HTML入門講座

1. HTMLとは？基礎と概要

2. HTMLの基本構造と要素

3. テキストの装飾とフォーマット

4. リンクを作成する: ハイパーリンクの基礎