// 変数の宣言
let name = "田中太郎";
const age = 25;

// データ型
let string = "文字列";
let number = 42;
let boolean = true;
let array = [1, 2, 3, 4, 5];
let object = { name: "田中", age: 25 };

// テンプレートリテラル
let message = `こんにちは、${name}さん！`;

// 基本的な関数
function greet(name) {
    return `こんにちは、${name}さん！`;
}

// アロー関数（ES6）
const greetArrow = (name) => {
    return `こんにちは、${name}さん！`;
};

// 関数の呼び出し
let greeting = greet("田中");

console.log(greeting);  // 出力：こんにちは、田中さん！

// if文
let age = 20;
if (age >= 18) {
    console.log("成人です");
} else {
    console.log("未成年です");
}

// for文
for (let i = 0; i < 5; i++) {
    console.log(`カウント: ${i}`);
}

// forEach（配列）
let fruits = ["りんご", "バナナ", "オレンジ"];
fruits.forEach((fruit, index) => {
    console.log(`${index}: ${fruit}`);
});

// IDで要素を選択
let header = document.getElementById("header");

// クラスで要素を選択
let buttons = document.querySelectorAll(".button");

// CSSセレクターで要素を選択
let firstButton = document.querySelector(".button");

// 新しい要素を作成
let newDiv = document.createElement("div");
newDiv.textContent = "新しい要素";
newDiv.className = "new-element";

// 要素を追加
let container = document.querySelector(".container");
container.appendChild(newDiv);

// テキストコンテンツ
let element = document.querySelector(".content");
element.textContent = "新しいテキスト";

// 属性の操作
let link = document.querySelector("a");
link.setAttribute("href", "https://example.com");

// クラスの操作
let button = document.querySelector(".button");
button.classList.add("active");
button.classList.remove("inactive");

// 基本的なイベントリスナー
let button = document.querySelector(".button");
button.addEventListener("click", function(event) {
    console.log("ボタンがクリックされました");
});

// 複数のイベントリスナー
button.addEventListener("mouseover", function() {
    this.style.backgroundColor = "blue";
});

button.addEventListener("mouseout", function() {
    this.style.backgroundColor = "red";
});

button.addEventListener("click", function(event) {
    // イベントの種類
    console.log(event.type);

    // ターゲット要素
    console.log(event.target);

    // デフォルト動作の防止
    event.preventDefault();
});

function validateForm() {
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const message = document.getElementById('message').value;

    let isValid = true;
    let errors = [];

    // 名前のバリデーション
    if (name.trim().length < 2) {
        errors.push('名前は2文字以上で入力してください');
        isValid = false;
    }

    // メールアドレスのバリデーション
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;  // 「正規表現」によるチェック
    if (!emailRegex.test(email)) {
        errors.push('有効なメールアドレスを入力してください');
        isValid = false;
    }

    // メッセージのバリデーション
    if (message.trim().length < 10) {
        errors.push('メッセージは10文字以上で入力してください');
        isValid = false;
    }

    displayErrors(errors);
    return isValid;
}

function displayErrors(errors) {
    // 既存のエラーメッセージを削除
    const existingErrors = document.querySelectorAll('.error-message');
    existingErrors.forEach(error => error.remove());

    // 新しいエラーメッセージを表示
    errors.forEach(error => {
        const errorDiv = document.createElement('div');
        errorDiv.className = 'error-message';
        errorDiv.textContent = error;
        errorDiv.style.color = 'red';
        errorDiv.style.fontSize = '14px';
        errorDiv.style.marginTop = '5px';

        document.querySelector('#contact form').appendChild(errorDiv);
    });
}

// スムーズスクロール
document.addEventListener('DOMContentLoaded', function() {
    // navタグ内の「#」を含んだリンクを持つaタグをすべて取得
    const navLinks = document.querySelectorAll('nav a[href^="#"]');

    // navLinksとして取得できたすべてのaタグにスムーズスクロールを設定
    navLinks.forEach(link => {
        link.addEventListener('click', function(event) {
            event.preventDefault();

            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);

            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
});

// ハンバーガーメニュー
document.addEventListener('DOMContentLoaded', function() {
    const hamburger = document.querySelector('.hamburger');
    const navMenu = document.querySelector('nav ul');

    hamburger.addEventListener('click', function() {
        navMenu.classList.toggle('active');
        hamburger.classList.toggle('active');
    });
});

// スクロールアニメーション
document.addEventListener('DOMContentLoaded', function() {
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-in');
            }
        });
    }, observerOptions);

    // アニメーション対象の要素を監視
    const animateElements = document.querySelectorAll('.animate-on-scroll');
    animateElements.forEach(element => {
        observer.observe(element);
    });
});

    <!-- フッター -->
    <footer>
        <p>© 2024 田中太郎. All rights reserved.</p>
        <nav>
            <ul>
                <li><a href="https://github.com">GitHub</a></li>
                <li><a href="https://twitter.com">Twitter</a></li>
            </ul>
        </nav>
    </footer>
    <script src="./script.js"></script>
</body>
</html>

// ポートフォリオサイトのJavaScript
document.addEventListener('DOMContentLoaded', function() {

    // 1. スムーズスクロール
    const navLinks = document.querySelectorAll('nav a[href^="#"]');
    navLinks.forEach(link => {
        link.addEventListener('click', function(event) {
            event.preventDefault();
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);

            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });

    // 2. フォームバリデーション
    const contactForm = document.querySelector('#contact form');
    if (contactForm) {
        contactForm.addEventListener('submit', function(event) {
            event.preventDefault();

            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const message = document.getElementById('message').value;

            let isValid = true;
            let errors = [];

            // バリデーション
            if (name.trim().length < 2) {
                errors.push('名前は2文字以上で入力してください');
                isValid = false;
            }

            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                errors.push('有効なメールアドレスを入力してください');
                isValid = false;
            }

            if (message.trim().length < 10) {
                errors.push('メッセージは10文字以上で入力してください');
                isValid = false;
            }

            // エラー表示
            displayFormErrors(errors);

            if (isValid) {
                showSuccessMessage('お問い合わせを送信しました。ありがとうございます。');
                contactForm.reset();
            }
        });
    }

    function displayFormErrors(errors) {
        // 既存のエラーメッセージを削除
        const existingErrors = document.querySelectorAll('.form-error');
        existingErrors.forEach(error => error.remove());

        // 新しいエラーメッセージを表示
        errors.forEach(error => {
            const errorDiv = document.createElement('div');
            errorDiv.className = 'form-error';
            errorDiv.textContent = error;
            errorDiv.style.color = 'red';
            errorDiv.style.fontSize = '14px';
            errorDiv.style.marginTop = '5px';

            contactForm.appendChild(errorDiv);
        });
    }

    function showSuccessMessage(message) {
        const successDiv = document.createElement('div');
        successDiv.className = 'success-message';
        successDiv.textContent = message;
        successDiv.style.color = 'green';
        successDiv.style.backgroundColor = '#d4edda';
        successDiv.style.border = '1px solid #c3e6cb';
        successDiv.style.padding = '10px';
        successDiv.style.borderRadius = '5px';
        successDiv.style.marginTop = '10px';

        contactForm.appendChild(successDiv);

        setTimeout(() => {
            successDiv.remove();
        }, 3000);
    }
});

/* コンテンツに基づくブレークポイント */

/* ナビゲーションが崩れるポイント */
@media (min-width: 768px) {
    nav ul {
        flex-direction: row;
    }
}

/* カードが横並びになるポイント */
@media (min-width: 600px) {
    #works {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3列レイアウトになるポイント */
@media (min-width: 900px) {
    #works {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* デバイス別の最適化 */

/* スマートフォン */
@media (max-width: 767px) {
    body {
        padding: 1rem;
    }

    nav ul {
        flex-direction: column;
    }

    #home h1 {
        font-size: 2rem;
    }
}

/* タブレット */
@media (min-width: 768px) and (max-width: 1023px) {
    body {
        padding: 2rem;
    }

    #home h1 {
        font-size: 2.5rem;
    }
}

/* デスクトップ */
@media (min-width: 1024px) {
    body {
        padding: 3rem;
        max-width: 1200px;
        margin: 0 auto;
    }

    #home h1 {
        font-size: 3.5rem;
    }
}

/* モバイルファーストのFlexboxレイアウト */

/* 基本（モバイル） */
#about {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

#about article,
#about aside {
    flex: 1;
    min-height: 200px;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 1rem;
}

/* タブレット */
@media (min-width: 768px) {
    #about {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
        padding: 2rem;
    }

    #about article,
    #about aside {
        flex: 1 1 calc(50% - 1rem);
    }
}

/* デスクトップ */
@media (min-width: 1024px) {
    #about {
        max-width: 1200px;
        margin: 0 auto;
        padding: 3rem;
    }

    #about article,
    #about aside {
        flex: 1 1 calc(33.333% - 1.33rem);
    }
}

/* モバイルファーストのGridレイアウト */

/* 基本（モバイル） */
#skills ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
}

#skills li {
    background: #f0f0f0;
    border-radius: 8px;
    padding: 1rem;
    min-height: 200px;
    text-align: center;
}

/* タブレット */
@media (min-width: 768px) {
    #skills ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        padding: 2rem;
    }
}

/* デスクトップ */
@media (min-width: 1024px) {
    #skills ul {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1200px;
        margin: 0 auto;
        padding: 3rem;
    }
}

/* 大画面 */
@media (min-width: 1440px) {
    #skills ul {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* レスポンシブナビゲーション */

/* モバイル用ナビゲーション */
header {
    position: relative;
}

nav ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul.active {
    display: block;
}

nav ul li {
    border-bottom: 1px solid #eee;
}

nav ul a {
    display: block;
    padding: 1rem;
    color: #333;
    text-decoration: none;
}

.hamburger {
    display: block;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

/* デスクトップ用ナビゲーション */
@media (min-width: 768px) {
    .hamburger {
        display: none;
    }

    nav ul {
        display: flex;
        position: static;
        background: none;
        box-shadow: none;
        width: auto;
    }

    nav ul li {
        border-bottom: none;
    }

    nav ul a {
        padding: 0.5rem 1rem;
        color: white;
    }
}

<!-- レスポンシブ画像 -->
<picture>
    <source media="(min-width: 1024px)" srcset="large.jpg">
    <source media="(min-width: 768px)" srcset="medium.jpg">
    <img src="small.jpg" alt="レスポンシブ画像">
</picture>

/* CSSでのレスポンシブ画像 */
img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* アスペクト比を保持 */
.image-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9のアスペクト比 */
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

<!-- 遅延読み込み（HTML5標準） -->
<img src="placeholder.jpg" 
     alt="遅延読み込み画像"
     loading="lazy">

<!-- WebP画像の対応 -->
<picture>
    <source type="image/webp" srcset="image.webp">
    <img src="image.jpg" alt="WebP対応画像">
</picture>

/* レスポンシブデザイン */
/* タブレット対応 */
@media (max-width: 768px) {
    .navigation {
        margin: 0 1rem;
        border-radius: 0;
    }
    
    .nav-menu {
        gap: 15px;
    }
    
    .nav-menu a {
        padding: 10px 15px;
        font-size: 0.9rem;
    }
    
    section {
        padding: 3rem 1rem;
    }
    
    #home h1 {
        font-size: 2.5rem;
    }
    
    #home h2 {
        font-size: 1.2rem;
    }
    
    #home p {
        font-size: 1rem;
    }
    
    #about {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    #about h2 {
        font-size: 2rem;
    }
    
    #about article h3 {
        font-size: 1.3rem;
    }
    
    #about article p {
        font-size: 1rem;
    }
    
    #skills h2 {
        font-size: 2rem;
    }
    
    #skills ul {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
    }
    
    #skills li {
        padding: 1.5rem;
        font-size: 1.1rem;
    }
    
    #works h2 {
        font-size: 2rem;
    }
    
    #works article h3 {
        font-size: 1.3rem;
    }
    
    #contact h2 {
        font-size: 2rem;
    }
    
    #contact form {
        padding: 1.5rem;
    }
}

/* スマートフォン対応 */
@media (max-width: 480px) {
    header {
        position: relative;
        transform: none;
        left: auto;
    }
    
    .navigation {
        margin: 0;
        border-radius: 0;
        padding: 15px 0;
    }
    
    .nav-menu {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    
    .nav-menu a {
        padding: 8px 20px;
        font-size: 0.9rem;
        width: 80%;
        text-align: center;
    }
    
    main {
        margin-top: 0;
    }
    
    section {
        padding: 2rem 1rem;
    }
    
    #home {
        min-height: 80vh;
    }
    
    #home h1 {
        font-size: 2rem;
    }
    
    #home h2 {
        font-size: 1rem;
    }
    
    #home p {
        font-size: 0.9rem;
    }
    
    #about h2 {
        font-size: 1.8rem;
    }
    
    #about article h3 {
        font-size: 1.2rem;
    }
    
    #about article p {
        font-size: 0.9rem;
    }
    
    #about aside {
        padding: 1.5rem;
    }
    
    #skills h2 {
        font-size: 1.8rem;
    }
    
    #skills ul {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    #skills li {
        padding: 1rem;
        font-size: 1rem;
    }
    
    #works h2 {
        font-size: 1.8rem;
    }
    
    #works article h3 {
        font-size: 1.2rem;
    }
    
    #works article p {
        font-size: 0.9rem;
    }
    
    #contact h2 {
        font-size: 1.8rem;
    }
    
    #contact form {
        padding: 1rem;
    }
    
    #contact form input,
    #contact form textarea,
    #contact form select {
        padding: 0.5rem;
        font-size: 0.9rem;
    }
    
    #contact form button {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
    
    footer {
        padding: 1.5rem 1rem;
    }
    
    footer nav ul {
        flex-direction: column;
        gap: 1rem;
    }
}

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Webデザイナー田中太郎のポートフォリオサイトです。HTML、CSS、JavaScriptを使ったWeb制作の作品を紹介しています。">
    <meta name="keywords" content="Webデザイン,ポートフォリオ,HTML,CSS,JavaScript">
    <title>田中太郎 - Webデザイナー</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- ヘッダー -->
    <header>
        <nav class="navigation">
            <ul class="nav-menu">
                <li><a href="#home">ホーム</a></li>
                <li><a href="#about">自己紹介</a></li>
                <li><a href="#skills">スキル</a></li>
                <li><a href="#works">作品</a></li>
                <li><a href="#contact">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>

    <!-- メインコンテンツ -->
    <main>
        <!-- ホームセクション -->
        <section id="home">
            <h1>田中太郎</h1>
            <h2>Webデザイナー</h2>
            <p>美しいWebサイトを作ることを心がけています</p>
        </section>

        <!-- 自己紹介セクション -->
        <section id="about">
            <h2>自己紹介</h2>
            <article>
                <h3>経歴</h3>
                <p>Web制作に興味を持ち、独学でHTMLとCSSを勉強しています。</p>
                <p>現在はJavaScriptも学習中で、インタラクティブなWebサイトの制作に挑戦しています。</p>
            </article>

            <aside>
                <h3>趣味</h3>
                <ul>
                    <li>写真撮影</li>
                    <li>読書</li>
                    <li>旅行</li>
                </ul>
            </aside>
        </section>

        <!-- スキルセクション -->
        <section id="skills">
            <h2>スキル</h2>
            <ul>
                <li>HTML5</li>
                <li>CSS3</li>
                <li>JavaScript（学習中）</li>
                <li>Photoshop</li>
            </ul>
        </section>

        <!-- 作品セクション -->
        <section id="works">
            <h2>作品</h2>
            <article>
                <h3>コーポレートサイト</h3>
                <p>企業のブランディングを重視したデザイン</p>
                <img src="work1.jpg" alt="コーポレートサイトのスクリーンショット">
            </article>

            <article>
                <h3>ECサイト</h3>
                <p>ユーザビリティを重視したショッピングサイト</p>
                <img src="work2.jpg" alt="ECサイトのスクリーンショット">
            </article>
        </section>

        <!-- お問い合わせセクション -->
        <section id="contact">
            <h2>お問い合わせ</h2>
            <form action="/submit" method="POST">
                <div>
                    <label for="name">お名前：</label>
                    <input type="text" id="name" name="name" required>
                </div>

                <div>
                    <label for="email">メールアドレス：</label>
                    <input type="email" id="email" name="email" required>
                </div>

                <div>
                    <label for="category">お問い合わせ種別：</label>
                    <select id="category" name="category" required>
                        <option value="">選択してください</option>
                        <option value="project">プロジェクトの依頼</option>
                        <option value="question">技術的な質問</option>
                        <option value="other">その他</option>
                    </select>
                </div>

                <div>
                    <label for="message">メッセージ：</label>
                    <textarea id="message" name="message" rows="5" required></textarea>
                </div>

                <button type="submit">送信</button>
            </form>
        </section>
    </main>

    <!-- フッター -->
    <footer>
        <p>© 2024 田中太郎. All rights reserved.</p>
        <nav>
            <ul>
                <li><a href="https://github.com">GitHub</a></li>
                <li><a href="https://twitter.com">Twitter</a></li>
            </ul>
        </nav>
    </footer>
</body>
</html>

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 2px solid #333;
    margin: 10px;
    box-sizing: border-box;
}

/* ブロック要素 */
.block {
    display: block;
}

/* インライン要素 */
.inline {
    display: inline;
}

/* インラインブロック */
.inline-block {
    display: inline-block;
}

/* Flexbox */
.flex {
    display: flex;
}

/* Grid */
.grid {
    display: grid;
}

<!-- サンプルHTML -->
<div class="container">
    <div class="box block">ブロック要素1</div>
    <div class="box block">ブロック要素2</div>

    <span class="box inline">インライン要素1</span>
    <span class="box inline">インライン要素2</span>

    <div class="box inline-block">インラインブロック1</div>
    <div class="box inline-block">インラインブロック2</div>

    <div class="flex-container">
        <div class="box">Flexアイテム1</div>
        <div class="box">Flexアイテム2</div>
        <div class="box">Flexアイテム3</div>
    </div>
</div>

/* 基本的なスタイル */
.container {
    margin: 20px;
    border: 2px solid #333;
    padding: 10px;
}

.box {
    background-color: #007bff;
    color: white;
    padding: 10px;
    margin: 5px;
    border: 1px solid #0056b3;
}

/* displayプロパティの違い */
.block {
    display: block;
    /* ブロック要素：幅いっぱいに広がり、改行される */
}

.inline {
    display: inline;
    /* インライン要素：内容の幅だけ取り、横並びになる */
    /* width、height、margin-top/bottomは効かない */
}

.inline-block {
    display: inline-block;
    /* インラインブロック：横並びになりつつ、ブロック要素の特性も持つ */
}

/* Flexboxの例 */
.flex-container {
    display: flex;
    justify-content: space-between;
    background-color: #f8f9fa;
    padding: 10px;
    margin-top: 20px;
}

.flex-container .box {
    background-color: #28a745;
    border-color: #1e7e34;
}

.container {
    display: flex;
    flex-direction: row; /* 横並び（デフォルト） */
    justify-content: center; /* 主軸方向の配置 */
    align-items: center; /* 交差軸方向の配置 */
    flex-wrap: wrap; /* 折り返し */
}

.flex-row {
    flex-direction: row; /* 左から右（デフォルト） */
}

.flex-column {
    flex-direction: column; /* 上から下 */
}

.flex-row-reverse {
    flex-direction: row-reverse; /* 右から左 */
}

.flex-column-reverse {
    flex-direction: column-reverse; /* 下から上 */
}

.flex-start {
    justify-content: flex-start; /* 開始位置 */
}

.flex-end {
    justify-content: flex-end; /* 終了位置 */
}

.center {
    justify-content: center; /* 中央 */
}

.space-between {
    justify-content: space-between; /* 両端揃え */
}

.space-around {
    justify-content: space-around; /* 均等配置 */
}

.space-evenly {
    justify-content: space-evenly; /* 完全均等配置 */
}

.stretch {
    align-items: stretch; /* 伸縮（デフォルト） */
}

.flex-start {
    align-items: flex-start; /* 開始位置 */
}

.flex-end {
    align-items: flex-end; /* 終了位置 */
}

.center {
    align-items: center; /* 中央 */
}

.baseline {
    align-items: baseline; /* ベースライン */
}

<nav class="navigation">
    <ul class="nav-menu">
        <li><a href="#home">ホーム</a></li>
        <li><a href="#about">自己紹介</a></li>
        <li><a href="#works">作品</a></li>
        <li><a href="#contact">お問い合わせ</a></li>
    </ul>
</nav>

.navigation {
    background: linear-gradient(135deg, #2c5aa0 0%, #4a90e2 100%);
    padding: 20px 0;
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.nav-menu a:hover {
    background-color: rgba(255,255,255,0.2);
    transform: translateY(-2px);
}

<div class="card-container">
    <div class="card">
        <h3>HTML5</h3>
        <p>セマンティックなマークアップ</p>
    </div>
    <div class="card">
        <h3>CSS3</h3>
        <p>モダンなスタイリング</p>
    </div>
    <div class="card">
        <h3>JavaScript</h3>
        <p>インタラクティブな機能</p>
    </div>
</div>

.card-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.card {
    flex: 1;
    min-width: 150px;
    max-width: 300px;
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-align: center;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3列 */
    grid-template-rows: auto auto; /* 2行 */
    gap: 20px; /* グリッド間の余白 */
}

/* 固定幅 */
.grid-1 {
    grid-template-columns: 200px 200px 200px;
}

/* フラクション単位 */
.grid-2 {
    grid-template-columns: 1fr 2fr 1fr;
}

/* パーセント */
.grid-3 {
    grid-template-columns: 33% 33% 34%;
}

/* repeat関数 */
.grid-4 {
    grid-template-columns: repeat(3, 1fr);
}

/* minmax関数 */
.grid-5 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-container {
    grid-template-rows: 100px 200px auto;
}

.grid-container {
    gap: 20px; /* 行と列の両方 */
    row-gap: 20px; /* 行のみ */
    column-gap: 30px; /* 列のみ */
}

.grid-container {
    display: grid;
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto 1fr auto;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

<div class="portfolio-grid">
    <div class="portfolio-item">
        <img src="https://picsum.photos/400/300?random=1" alt="コーポレートサイトのサンプル画像">
        <h3>コーポレートサイト</h3>
    </div>
    <div class="portfolio-item">
        <img src="https://picsum.photos/400/300?random=2" alt="ECサイトのサンプル画像">
        <h3>ECサイト</h3>
    </div>
    <div class="portfolio-item">
        <img src="https://picsum.photos/400/300?random=3" alt="ランディングページのサンプル画像">
        <h3>ランディングページ</h3>
    </div>
    <div class="portfolio-item">
        <img src="https://picsum.photos/400/300?random=4" alt="ブログサイトのサンプル画像">
        <h3>ブログサイト</h3>
    </div>
</div>

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 20px;
}

.portfolio-item {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.portfolio-item:hover {
    transform: translateY(-5px);
}

.portfolio-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.portfolio-item h3 {
    padding: 15px;
    margin: 0;
    text-align: center;
}

/* ヘッダーの詳細スタイリング */
header {
    top: 0;
    left: 50%;
    z-index: 1000;
    position: fixed;
    transform: translateX(-50%);
    margin-bottom: 30px;
    width: 100%;
}

.navigation {
    background: linear-gradient(135deg, #2c5aa0 0%, #4a90e2 100%);
    padding: 20px 0;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    max-width: 1200px;
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.nav-menu li {
    margin: 0;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 25px;
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
}

.nav-menu a:hover {
    background-color: rgba(255,255,255,0.2);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.nav-menu a:active {
    transform: translateY(0);
}

/* ホームセクションの詳細スタイリング */
#home {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

#home h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    animation: fadeInUp 1s ease-out;
}

#home h2 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    animation: fadeInUp 1s ease-out 0.2s both;
}

#home p {
    animation: fadeInUp 1s ease-out 0.4s both;
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 自己紹介セクションの詳細スタイリング */
#about {
    background: white;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: start;
}

#about h2 {
    color: #2c5aa0;
    margin-bottom: 2rem;
    font-size: 2.5rem;
    position: relative;
    padding-bottom: 10px;
}

#about h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: #2c5aa0;
}

#about article {
    margin-bottom: 2rem;
}

#about article h3 {
    color: #2c5aa0;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

#about article p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    line-height: 1.8;
}

#about aside {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
    border-left: 4px solid #2c5aa0;
    position: relative;
    overflow: hidden;
}

#about aside::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #2c5aa0, #4a90e2);
}

#about aside h3 {
    color: #2c5aa0;
    margin-bottom: 1rem;
}

#about aside ul {
    list-style: none;
    padding: 0;
}

#about aside li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e9ecef;
}

.about-sidebar li:last-child {
    border-bottom: none;
}

/* スキルセクションの詳細スタイリング */
#skills {
    background: #f8f9fa;
}

#skills h2 {
    color: #2c5aa0;
    margin-bottom: 2rem;
    font-size: 2.5rem;
    text-align: center;
}

#skills ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

#skills li {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
    font-size: 1.2rem;
    font-weight: 500;
    color: #2c5aa0;
    transition: all 0.3s ease;
}

#skills li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(135deg, #2c5aa0, #4a90e2);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

#skills li:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

#skills li:hover::before {
    transform: scaleX(1);
}

/* 作品セクションの詳細スタイリング */
#works {
    background: white;
}

#works h2 {
    color: #2c5aa0;
    margin-bottom: 2rem;
    font-size: 2.5rem;
    text-align: center;
}

#works article {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    position: relative;
    transition: all 0.3s ease;
    margin-bottom: 2rem;
}

#works article:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

#works article h3 {
    color: #2c5aa0;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    padding: 1rem;
    margin: 0;
}

#works article p {
    color: #666;
    line-height: 1.6;
    padding: 0 1rem 1rem;
}

#works article img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

#works article:hover img {
    transform: scale(1.05);
}

.work-item h3 {
    padding: 1rem;
    margin: 0;
    color: #2c5aa0;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.work-item p {
    padding: 0 1rem 1rem;
    color: #666;
    line-height: 1.6;
}

/* お問い合わせフォームの詳細スタイリング */
#contact {
    background: #f8f9fa;
}

#contact h2 {
    color: #2c5aa0;
    margin-bottom: 2rem;
    font-size: 2.5rem;
    text-align: center;
}

#contact form {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

#contact form div {
    margin-bottom: 1.5rem;
}

#contact form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #333;
}

#contact form input,
#contact form textarea,
#contact form select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e9ecef;
    border-radius: 5px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

#contact form input:focus,
#contact form textarea:focus,
#contact form select:focus {
    outline: none;
    border-color: #2c5aa0;
    box-shadow: 0 0 0 3px rgba(44, 90, 160, 0.1);
}

#contact form button {
    background: linear-gradient(135deg, #2c5aa0 0%, #4a90e2 100%);
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

#contact form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

#contact form button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

#contact form button:hover::before {
    left: 100%;
}

/* フッターの詳細スタイリング */
footer {
    background: #2c5aa0;
    color: white;
    padding: 2rem;
    text-align: center;
}

footer nav {
    margin-top: 1rem;
}

footer nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

footer nav a {
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.footer-nav a:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

.footer-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: white;
    transition: width 0.3s ease;
}

.footer-nav a:hover::after {
    width: 100%;
}

<!DOCTYPE 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="styles.css">
</head>
<body>
    <!-- ここにページの内容が入ります -->
</body>
</html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Webデザイナー田中太郎のポートフォリオサイトです">
    <meta name="keywords" content="Webデザイン,ポートフォリオ,HTML,CSS">
    <title>田中太郎 - Webデザイナー</title>
</head>

<div class="header">
    <div class="nav">
        <ul>
            <li><a href="#home">ホーム</a></li>
            <li><a href="#about">自己紹介</a></li>
        </ul>
    </div>
</div>

<header>
    <nav>
        <ul>
            <li><a href="#home">ホーム</a></li>
            <li><a href="#about">自己紹介</a></li>
        </ul>
    </nav>
</header>

<header>
    <h1>田中太郎</h1>
    <p>Webデザイナー</p>
</header>

<nav>
    <ul>
        <li><a href="#home">ホーム</a></li>
        <li><a href="#about">自己紹介</a></li>
        <li><a href="#works">作品</a></li>
        <li><a href="#contact">お問い合わせ</a></li>
    </ul>
</nav>

<main>
    <!-- ページの主要な内容 -->
</main>

<section id="about">
    <h2>自己紹介</h2>
    <p>Web制作に興味があります...</p>
</section>

<article>
    <h2>最新の作品</h2>
    <p>コーポレートサイトを制作しました...</p>
</article>

<aside>
    <h3>関連リンク</h3>
    <ul>
        <li><a href="#">GitHub</a></li>
        <li><a href="#">Twitter</a></li>
    </ul>
</aside>

<footer>
    <p>© 2024 田中太郎. All rights reserved.</p>
</footer>

<form action="/submit" method="POST">
    <label for="name">お名前：</label>
    <input type="text" id="name" name="name" required>

    <label for="email">メールアドレス：</label>
    <input type="email" id="email" name="email" required>

    <label for="message">メッセージ：</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <button type="submit">送信</button>
</form>

<!-- 通常のテキスト -->
<input type="text" id="name" name="name" placeholder="お名前を入力">

<!-- パスワード -->
<input type="password" id="password" name="password">

<!-- メールアドレス -->
<input type="email" id="email" name="email">

<!-- 数字 -->
<input type="number" id="age" name="age" min="0" max="120">

<textarea id="message" name="message" rows="5" cols="50" placeholder="メッセージを入力してください"></textarea>

<label for="category">カテゴリー：</label>
<select id="category" name="category">
    <option value="">選択してください</option>
    <option value="web">Webサイト制作</option>
    <option value="design">デザイン</option>
    <option value="other">その他</option>
</select>

<label>
    <input type="checkbox" name="newsletter" value="yes">
    ニュースレターを受け取る
</label>

<fieldset>
    <legend>性別</legend>
    <label>
        <input type="radio" name="gender" value="male">
        男性
    </label>
    <label>
        <input type="radio" name="gender" value="female">
        女性
    </label>
    <label>
        <input type="radio" name="gender" value="other">
        その他
    </label>
</fieldset>

<input type="text" 
       id="name" 
       name="name" 
       required 
       minlength="2" 
       maxlength="50" 
       pattern="[A-Za-z\u3040-\u309F\u30A0-\u30FF\s]+"
       title="2文字以上50文字以下で、文字のみ入力してください">

<label for="name">お名前：</label>
<input type="text" id="name" name="name">

<span>お名前：</span>
<input type="text" name="name">

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Webデザイナー田中太郎のポートフォリオサイトです。HTML、CSS、JavaScriptを使ったWeb制作の作品を紹介しています。">
    <meta name="keywords" content="Webデザイン,ポートフォリオ,HTML,CSS,JavaScript">
    <title>田中太郎 - Webデザイナー</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- ヘッダー -->
    <header>
        <nav class="navigation">
            <ul class="nav-menu">
                <li><a href="#home">ホーム</a></li>
                <li><a href="#about">自己紹介</a></li>
                <li><a href="#skills">スキル</a></li>
                <li><a href="#works">作品</a></li>
                <li><a href="#contact">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>

    <!-- メインコンテンツ -->
    <main>
        <!-- ホームセクション -->
        <section id="home">
            <h1>田中太郎</h1>
            <h2>Webデザイナー</h2>
            <p>美しいWebサイトを作ることを心がけています</p>
        </section>

        <!-- 自己紹介セクション -->
        <section id="about">
            <h2>自己紹介</h2>
            <article>
                <h3>経歴</h3>
                <p>Web制作に興味を持ち、独学でHTMLとCSSを勉強しています。</p>
                <p>現在はJavaScriptも学習中で、インタラクティブなWebサイトの制作に挑戦しています。</p>
            </article>

            <aside>
                <h3>趣味</h3>
                <ul>
                    <li>写真撮影</li>
                    <li>読書</li>
                    <li>旅行</li>
                </ul>
            </aside>
        </section>

        <!-- スキルセクション -->
        <section id="skills">
            <h2>スキル</h2>
            <ul>
                <li>HTML5</li>
                <li>CSS3</li>
                <li>JavaScript（学習中）</li>
                <li>Photoshop</li>
            </ul>
        </section>

        <!-- 作品セクション -->
        <section id="works">
            <h2>作品</h2>
            <article>
                <h3>コーポレートサイト</h3>
                <p>企業のブランディングを重視したデザイン</p>
                <img src="work1.jpg" alt="コーポレートサイトのスクリーンショット">
            </article>

            <article>
                <h3>ECサイト</h3>
                <p>ユーザビリティを重視したショッピングサイト</p>
                <img src="work2.jpg" alt="ECサイトのスクリーンショット">
            </article>
        </section>

        <!-- お問い合わせセクション -->
        <section id="contact">
            <h2>お問い合わせ</h2>
            <form action="/submit" method="POST">
                <div>
                    <label for="name">お名前：</label>
                    <input type="text" id="name" name="name" required>
                </div>

                <div>
                    <label for="email">メールアドレス：</label>
                    <input type="email" id="email" name="email" required>
                </div>

                <div>
                    <label for="category">お問い合わせ種別：</label>
                    <select id="category" name="category" required>
                        <option value="">選択してください</option>
                        <option value="project">プロジェクトの依頼</option>
                        <option value="question">技術的な質問</option>
                        <option value="other">その他</option>
                    </select>
                </div>

                <div>
                    <label for="message">メッセージ：</label>
                    <textarea id="message" name="message" rows="5" required></textarea>
                </div>

                <button type="submit">送信</button>
            </form>
        </section>
    </main>

    <!-- フッター -->
    <footer>
        <p>© 2024 田中太郎. All rights reserved.</p>
        <nav>
            <ul>
                <li><a href="https://github.com">GitHub</a></li>
                <li><a href="https://twitter.com">Twitter</a></li>
            </ul>
        </nav>
    </footer>
</body>
</html>

body {
    background-color: #e8f4f8;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

h1 {
    color: #2c5aa0;
    font-size: 36px;
    margin-bottom: 10px;
    text-align: center;
    border-bottom: 3px solid #2c5aa0;
    padding-bottom: 10px;
}

h2 {
    color: #4a90e2;
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

h3 {
    color: #7bb3e6;
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: 10px;
    border-left: 4px solid #7bb3e6;
    padding-left: 15px;
}

p {
    color: #2c3e50;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
}

<!DOCTYPE html>
<html>
<head>
    <title>私のポートフォリオ</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- ナビゲーション -->
    <nav class="navigation">
        <ul class="nav-menu">
            <li><a href="#home">ホーム</a></li>
            <li><a href="#about">自己紹介</a></li>
            <li><a href="#skills">スキル</a></li>
            <li><a href="#works">作品</a></li>
            <li><a href="#contact">お問い合わせ</a></li>
        </ul>
    </nav>

    <h1>田中太郎</h1>
    <h2>Webデザイナー</h2>

    <h3>自己紹介</h3>
    <p>Web制作に興味があります。</p>
    <p>HTMLとCSSを勉強中です。</p>

    <h3>趣味</h3>
    <p>写真撮影</p>
    <p>読書</p>
    <p>旅行</p>

    <h3>目標</h3>
    <p>美しいWebサイトを作れるようになりたいです。</p>
</body>
</html>

body {
    background-color: #e8f4f8;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

/* ナビゲーション */
.navigation {
    background-color: #2c5aa0;
    padding: 15px 0;
    margin-bottom: 30px;
    border-radius: 5px;
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.nav-menu li {
    margin: 0;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 3px;
    transition: background-color 0.3s;
}

h1 {
    color: #2c5aa0;
    font-size: 36px;
    margin-bottom: 10px;
    text-align: center;
    border-bottom: 3px solid #2c5aa0;
    padding-bottom: 10px;
}

h2 {
    color: #4a90e2;
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

h3 {
    color: #7bb3e6;
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: 10px;
    border-left: 4px solid #7bb3e6;
    padding-left: 15px;
}

p {
    color: #2c3e50;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 3px;
    transition: background-color 0.3s, color 0.3s;
}

.nav-menu a:hover {
    background-color: #4a90e2;
    color: white;
}

/* ナビゲーション */
.navigation {
    background: linear-gradient(135deg, #2c5aa0 0%, #4a90e2 100%);
    padding: 20px 0;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.nav-menu li {
    margin: 0;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 25px;
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
}

.nav-menu a:hover {
    background-color: rgba(255,255,255,0.2);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.nav-menu a:active {
    transform: translateY(0);
}

/* カスタマイズ例：緑系のテーマ */
.navigation {
    background: linear-gradient(135deg, #2d5016 0%, #4a7c59 100%);
    padding: 20px 0;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 25px;
    transition: all 0.3s ease;
    font-weight: 500;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.nav-menu a:hover {
    background-color: rgba(255,255,255,0.2);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

<!DOCTYPE html>
<html>
<head>
    <title>私のポートフォリオ</title>
</head>
<body>
    <h1>田中太郎</h1>
    <h2>Webデザイナー</h2>

    <h3>自己紹介</h3>
    <p>Web制作に興味があります。</p>
    <p>HTMLとCSSを勉強中です。</p>

    <h3>趣味</h3>
    <p>写真撮影</p>
    <p>読書</p>
    <p>旅行</p>

    <h3>目標</h3>
    <p>美しいWebサイトを作れるようになりたいです。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>私のポートフォリオ</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>田中太郎</h1>
    <h2>Webデザイナー</h2>

    <h3>自己紹介</h3>
    <p>Web制作に興味があります。</p>
    <p>HTMLとCSSを勉強中です。</p>

    <h3>趣味</h3>
    <p>写真撮影</p>
    <p>読書</p>
    <p>旅行</p>

    <h3>目標</h3>
    <p>美しいWebサイトを作れるようになりたいです。</p>
</body>
</html>

body {
    background-color: #e8f4f8;
}

h1 {
    color: #2c5aa0;
}

h2 {
    color: #4a90e2;
}

h3 {
    color: #7bb3e6;
}

p {
    color: #2c3e50;
}

body {
    background-color: #e8f4f8;
    font-family: Arial, sans-serif;
}

h1 {
    color: #2c5aa0;
    font-size: 36px;
}

h2 {
    color: #4a90e2;
    font-size: 24px;
}

h3 {
    color: #7bb3e6;
    font-size: 18px;
}

p {
    color: #2c3e50;
    font-size: 16px;
    line-height: 1.6;
}

body {
    background-color: #e8f4f8;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

h1 {
    color: #2c5aa0;
    font-size: 36px;
    margin-bottom: 10px;
}

h2 {
    color: #4a90e2;
    font-size: 24px;
    margin-bottom: 20px;
}

h3 {
    color: #7bb3e6;
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: 10px;
}

p {
    color: #2c3e50;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
}

body {
    background-color: #e8f4f8;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

h1 {
    color: #2c5aa0;
    font-size: 36px;
    margin-bottom: 10px;
    text-align: center;
    border-bottom: 3px solid #2c5aa0;
    padding-bottom: 10px;
}

h2 {
    color: #4a90e2;
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

h3 {
    color: #7bb3e6;
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: 10px;
    border-left: 4px solid #7bb3e6;
    padding-left: 15px;
}

p {
    color: #2c3e50;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* 緑系のテーマカラー */
body {
    background-color: #f0f8f0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

h1 {
    color: #2d5016;
    font-size: 36px;
    margin-bottom: 10px;
    text-align: center;
    border-bottom: 3px solid #4a7c59;
    padding-bottom: 10px;
}

h2 {
    color: #4a7c59;
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

h3 {
    color: #6b8e23;
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: 10px;
    border-left: 4px solid #6b8e23;
    padding-left: 15px;
}

p {
    color: #2c3e50;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
}

<!DOCTYPE html>
<html>
<head>
    <title>私のポートフォリオ</title>
</head>
<body>
    <h1>田中太郎</h1>
    <h2>Webデザイナー</h2>
    <p>Web制作に興味があります。</p>
    <p>HTMLとCSSを勉強中です。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>私のポートフォリオ</title>
</head>
<body>
    <h1>田中太郎</h1>
    <h2>Webデザイナー</h2>

    <h3>自己紹介</h3>
    <p>Web制作に興味があります。</p>
    <p>HTMLとCSSを勉強中です。</p>

    <h3>趣味</h3>
    <p>写真撮影</p>
    <p>読書</p>
    <p>旅行</p>

    <h3>目標</h3>
    <p>美しいWebサイトを作れるようになりたいです。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>私のポートフォリオ</title>
</head>
<body>
    <h1>田中太郎</h1>
    <h2>Webデザイナー</h2>

    <h3>自己紹介</h3>
    <p>Web制作に興味があります。</p>
    <p>HTMLとCSSを勉強中です。</p>

    <h3>趣味</h3>
    <p>写真撮影</p>
    <p>読書</p>
    <p>旅行</p>

    <h3>目標</h3>
    <p>美しいWebサイトを作れるようになりたいです。</p>

    <h3>リンク</h3>
    <p><a href="https://www.google.com">Google</a></p>
    <p><a href="https://github.com">GitHub</a></p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>私の自己紹介</title>
</head>
<body>
    <h1>山田花子</h1>
    <h2>フロントエンドエンジニア</h2>

    <h3>自己紹介</h3>
    <p>プログラミングが好きで、特にWeb制作に興味があります。</p>
    <p>現在はHTML、CSS、JavaScriptを勉強中です。</p>

    <h3>スキル</h3>
    <p>HTML: 基礎レベル</p>
    <p>CSS: 勉強中</p>
    <p>JavaScript: これから学習予定</p>

    <h3>目標</h3>
    <p>ユーザーに使いやすいWebサイトを作れるようになりたいです。</p>

    <h3>参考サイト</h3>
    <p><a href="https://developer.mozilla.org/ja/">MDN Web Docs</a></p>
    <p><a href="https://www.w3schools.com/">W3Schools</a></p>
</body>
</html>