Open21日前にコメント追加6

お勉強第1 ~ 2週目

nguyen

Visual Studio Codeのインストール: 開発で主に使用するエディタを準備する
Zen.devのアカウント作成: 学習記録を残すためのプラットフォームを準備する
自己紹介ページの作成: AIに練習問題を出してもらいながら、HTMLとCSSを使って自己紹介ページを作成する（コピー＆ペーストではなく、手で打ち込む「写経」を行う）
~~Webページの公開: 作成したページを「Vercel」というサービスを利用してインターネット上に公開する (2週目の目標)~~ ※3週目移行に持ち越し

Coji Mizoguchi

がんばろう！

nguyen

今日のサマリー

早速、写経を行おうとおもったが、そもそもVS Codeの使い方が分からなかった
とりあえずClaudeに使い方を質問し、提案された手順の通りに設定を行った
その後出された3つの練習問題を写経してブラウザで見てみた

今日やったこと

1. Extensionsから「Japanese Language Pack」をインストール.

英語で利用するか迷った
しかし、全く分からない状態だったので学習コストが高意図感じた
それによってそもそも使えないとなると本末顛倒なのでとりあえず慣れるために日本語で触ってみる (慣れてから英語に戻せば良い)

2. プロジェクトの作成

作業フォルダを作る

- デスクトップに「my-portfolio」という新規フォルダを作成
- VS Codeを起動
- メニューから「ファイル」> 「フォルダーを開く」
- 作成した「my-portfolio」フォルダを選択

HTMLファイルを作成

- VS Codeの左側のエクスプローラーで「my-portfolio」を選択
- 「新しいファイル」を選択
- ファイル名を「index.html」と入力してEnter

3. 練習問題1を写経する

基本的なHTML構造

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>こんにちは！私の名前はグエン福康です</h1>
    <p>プログラミング学習を始めました。</p>
    <h2>好きなことやもの</h2>
    <ul>
        <li>サッカーのプレミアリーグを観ること</li>
        <li>映画鑑賞</li>
        <li>コーヒー</li>
    </ul>
</body>
</html>

4. 練習問題2を写経する

CSSを追加: 同じHTMLファイルの<head>内に以下のスタイルを追加する

<style>
        body {
            font-family:"Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        h1 {
            color: "#2c3e50";
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }

        h2 {
            color: #34495e;
            margin-top: 30px;
        }

        ul {
            background-color: #f8f9fa;
            padding: 20px 40px;
            border-radius: 5px;
        }
    </style>

5. 練習問題1と2をブラウザで見てみる

file:///Users/nguyen/Desktop/my-portfolio/index.html

6. 練習問題3を写経する

より詳細な自己紹介ページを作成する

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>グエン福康のポートフォリオ</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body {
                font-family: "Hiragino Sans", "Meiryo", sans-serif;
                line-height: 1.7;
                color: #2c3e50;
                background-color: #ecf0f1;
            }

            .container {
                max-width: 900px;
                margin: 0 auto;
                padding: 40px 20px;
            }

            header {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                padding: 60px 20px;
                text-align: center;
                border-radius: 10px;
                margin-bottom: 40px;
            }

            header h1 {
                font-size: 2.5em;
                margin-bottom: 10px;
            }

            .tagline {
                font-size: 1.2em;
                opacity: 0.9;
            }

            .section {
                background: white;
                padding: 30px;
                margin-bottom: 30px;
                border-radius: 10px;
                box-shadow: 0 2px 10px rgba(0,0,0,0,1)
            }

            .section h2 {
                color: #667eea;
                margin-bottom: 20px;
                font-size: 1.8em;
            }

            .skill-tag {
                background-color: #667eea;
                color: white;
                padding: 5px 15px;
                border-radius: 20px;
                font-size: 0.9em;
            }

            .contact {
                text-align: center;
                padding: 20px;
            }

            .contact a {
                color: #667eea;
                text-decoration: none;
                font-weight: bold;
            }

            .contact a:hover {
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <header>
                <h1>グエン福康のポートフォリオ</h1>
                <p class="tagline">エンジニアリングの世界への第一歩</p>
            </header>

            <div class="section">
                <h2>自己紹介</h2>
                <p>
                    はじめまして。グエン福康と申します。
                    現在、承地開発の基礎を学習中です。
                    HTMLとCSSから始めて、将来的には自分で1からプロダクトをつくれるエンジニアを目指しています。
                </p>
            </div>

            <div class="section">
                <h2>学習中のスキル</h2>
                <div class="skill-list">
                    <span class="skill-tag">HTML</span>
                    <span class="skill-tag">CSS</span>
                    <span class="skill-tag">Git</span>
                    <span class="skill-tag">Vercel</span>
                </div>
            </div>

            <div class="section">
                <h2>目標</h2>
                <p>
                    生成AIなどを活用して現在の業務を効率化し、
                    将来的には自分自身で新しいプロダクト開発をすることが目標です。
                </p>
            </div>

            <div class="section contact">
                <h2>連絡先</h2>
                <p>お気軽にご連絡ください</p>
                <p>
                    <a href="mailto:your-email@example.com">your-email@example.com</a>
                </p>
            </div>
        </div>
    </body>
</html>

7. 練習問題3をブラウザで見てみる

file:///Users/nguyen/Desktop/my-portfolio/practice3/practice3/index.html

nguyen

今日のサマリー

引き続き練習問題をclaudeに出してもらい「写経」を行った
途中と最後でコードがずれていることに気がついたが、修正箇所を見つけるのにかなり時間がかかった
コードの量が多い時は間違いがないか、こまめに確認しながら進めた方が良さそうだと思った

今日やったこと

1. 練習問題4を写経する

レスポンシブデザインの導入

- Grid レイアウトの使い方
- メディアクエリによるレスポンシブ対応
- 擬似要素（::before, ::after）の活用
- プログレスバーの実装

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width", initial-scale="1.0">
    <title>グエン福康のポートフォリオ - レスポンシブ版</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Hiragino Sans", "Meiryo", sans-serif;
            line-height: 1.7;
            color: #2c3e50;
            background-color: #f7f8fa;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 80px 20px;
            text-align: center;
            border-radius: 15px;
            margin-bottom: 40px;
            position: relative;
            overflow: hidden;
        }

        header::before {
            content: "";
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255, 255, 255, 0.1);
            transform: rotate(45deg);
        }

        header h1 {
            font-size: 3em;
            margin-bottom: 15px;
            position: relative;
            z-index: 1;
        }

        .tagline {
            font-size: 1.3em;
            opacity: 0.95;
            position: relative;
            z-index: 1;
        }

        .content-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }

        .main-content {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .sidebar {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .card {
            background: white;
            padding: 35px;
            border-radius: 15px;
            box-shadow: 0.4px 15px rgba(0,0,0,0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform:  translateY(-5px);
            box-shadow: 0.6px 20px rgba(0,0,0,0.12);
        }

        .card h2 {
            color: #667eea;
            margin-bottom: 20px;
            font-size: 1.8em;
            border-bottom: 2px solid #e8e8e8;
            padding-bottom: 10px;
        }

        .progress-bar {
            background-color: #e8e8e8;
            height: 10px;
            border-radius: 5px;
            overflow: hidden;
            margin: 10px 0;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 5px;
            transition: width 1s ease;
        }

        .skill-item {
            margin-bottom: 20px;
        }

        .skill-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }

        .timeline {
            position: relative;
            padding-left: 30px;
        }

        .timeline::before {
            content: "";
            position: absolute;
            left: 8px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #667eea;
            border: 3px solid white;
            box-shadow: 0.2px 5px rgba(0,0,0,0.2);
        }

        .timeline-date {
            color: #667eea;
            font-weight: bold;
            margin-bottom: 5px;
        }

        footer {
            background: #2c3e50;
            color: white;
            text-align: center;
            padding: 30px;
            border-radius: 15px;
        }

        .social-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }

        .social-link {
            display: inline-block;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            line-height: 40px;
            color: white;
            text-decoration: none;
            transition: background 0.3s sase;
        }

        .social-link:hover {
            background: #667eea;
        }

        /* タブレット対応 */
        @media (max-width: 768px) {
            header h1 {
                font-size: 2em;
            }

            .content-grid {
                grid-template-columns: 2em;
            }

            .card {
                padding: 25px;
            }
        }

        /* スマートフォン対応 */
        @media (max-width: 480px) {
            header {
                padding: 50px 15px;
            }

        header h1 {
            font-size: 1em;
        }

        .tagline {
            font-size: 1em;
        }

        .card {
            padding: 20px;
        }

        .card h2 {
            font-size: 1.4em;
        }

    }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1> グエン福康のポートフォリオ</h1>
            <p class="tagline">一人前のエンジニアを目指して</p>
        </header>

        <div class="content-grid">
            <div class="main-content">
                <div class="card">    
                    <h2>自己紹介</h2>
                    <p>
                        こんにちは。グエンと申します。現在Web開発の世界に足を踏み入れたばかりの初心者エンジニアです。
                        毎日少しずつですが、コードを書く練習をしています。
                    </p>
                    <p>
                        将来的に自分でプロダクトを作るために、プログラミングを学習中です。
                        この自己紹介ページは、学習の一環として作成しています。
                    </p>
                </div>
                
                <div class="card">
                    <h2>スキルセット</h2>
                    <div class="skill-item">
                        <div class="skill-header">
                            <span>HTML</span>
                            <span>70%</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: 70%;"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-header">
                            <span>CSS</span>
                            <span>60%</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill" style="width:  60%;"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-header">
                            <span>JavaScript</span>
                            <span>30%</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: 30%;"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-header">
                            <span>Git</span>
                            <span>40%</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: 40%;"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="sidebar">
                <div class="card">
                    <h2>学習計画</h2>
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-date">現在</div>
                            <div>HTML/CSS基礎</div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-date">1ヶ月後</div>
                            <div>JavaScript入門</div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-date">3ヶ月後</div>
                            <div>React基礎</div>
                        </div>
                        <div class="timeline-item">
                            <div class="timeline-date">6ヶ月後</div>
                            <div>フルスタック開発</div>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <h2>趣味</h2>
                    <p>📚読書</p>
                    <p>🎬映画鑑賞</p>
                    <p>☕️カフェ巡り</p>
                    <p>💻プログラミング学習</p>
                </div>
            </div>
        </div>
        
        <footer>
            <h2>Contact</h2>
            <p>お気軽にご連絡ください</p>
            <div class="social-links">
                <a href="#" class="social-link">📧</a>
                <a href="#" class="social-link">💼</a>
                <a href="#" class="social-link">🐦</a>
            </div>
        </footer>
    </div>
</body>
</html>

2. 練習問題4をブラウザで見てみる

file:///Users/nguyen/Desktop/my-portfolio/practice4/index.html

Coji Mizoguchi

すごい。ハイペース！

nguyen

ありがとうございます！

練習問題4終わったあとに、コードのどの部分が実際にどこに反映されているのか、構造的にちゃんと理解できるようになりたいなと思ったので、次はそこに少し時間を使って見たいなと思っています！