【HTML,CSS,JS】ポートフォリオサイト作成（1/3）

シンプルなポートフォリオサイト作成
1. サイトの特徴
VSCodeで作ってみよう！
まとめ
1. サイトの特徴

シンプルなポートフォリオサイト作成

今回は、HTML、CSS、JavaScriptを使用して簡単な シンプルなポートフォリオサイトを作成します。

ポートフォリオサイト（1/3）
ポートフォリオサイト（2/3）
ポートフォリオサイト（3/3）

https://www.programming-make-and-learn.tech/portfolio-site-part1

今回は、サイト1ページのシンプルなポートフォリオサイトを作ります。以下の4枚の画像が完成したサイトです。画像はクリックすると拡大されます。

WEBサイトのURL
GitHubのURL

GitHubのPagesで公開しているのでポートフォリオサイトを確認できます。

個人ポートフォリオ

GitHubでソースコードを公開しています。

GitHub - make-and-learn/sample-portfolio: This is a sample portfolio site.

This is a sample portfolio site. Contribute to make-and-learn/sample-portfolio development by creating an account on Git...

サイトの特徴

レスポンシブデザイン
モダンでクリーンなレイアウト
カスタマイズ可能なセクション（自己紹介、スキル、プロジェクト、お問い合わせ）
スムーズスクロール機能
フォーム送信の基本的な処理

VSCodeのインストールがまだの方はこちらをご覧ください。

VSCodeで作ってみよう！

作成手順

「MyPortfolio」という名前の新しいフォルダを作成
必要なファイル（index.html、styles.css、script.js）を作成
各ファイルに対応するコードをコピーペースト
「Go Live」でブラウザを立ち上げ実行

まず「VSCode」を起動します。

左上の「ファイル」をクリックして「フォルダを開く」を選択します。

エクスプローラー内で作りたい場所を決め、「新しいフォルダー」をクリックして新規フォルダ「MyPortfolio」を作成します。

ポップが出ますが、自分で作成したフォルダなので「はい、作成者を信頼します」をクリックします。

必要なファイル

index.html
styles.css
script.js

「MyPortfolio」の横にあるの新規ファイルのマークをクリックして、フォルダ内に以下のファイルを作成してください。

ファイルが作成出来たら、以下の完成コードを対応するファイルにコピペしてください。

コードの細かい解説は次のページで行いますのでとりあえず動かしてみましょう。

ファイル名の箇所をクリックすると各コードが表示されます。
コードの右上にコピーマークがあります。

HTML (index.html)

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>個人ポートフォリオ</title>
    <!-- 外部CSSファイルのリンク -->
    <link rel="stylesheet" href="styles.css">
    <!-- Google Fontsの読み込み -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
</head>
<body>
    <!-- ヘッダーセクション -->
    <header>
        <h1>あなたの名前</h1>
        <p>職種 | スキル | 趣味</p>
    </header>

    <!-- ナビゲーションメニュー -->
    <nav>
        <ul>
            <li><a href="#about">自己紹介</a></li>
            <li><a href="#skills">スキル</a></li>
            <li><a href="#projects">プロジェクト</a></li>
            <li><a href="#contact">お問い合わせ</a></li>
        </ul>
    </nav>

    <!-- メインコンテンツ -->
    <main class="container">
        <!-- 自己紹介セクション -->
        <section id="about">
            <h2>自己紹介</h2>
            <p>ここに自己紹介文を記載します。あなたのバックグラウンドや興味について書いてください。</p>
        </section>

        <!-- スキルセクション -->
        <section id="skills">
            <h2>スキル</h2>
            <ul class="skills-grid">
                <!-- 各スキルカード -->
                <li class="skill-card">
                    <h3>HTML</h3>
                    <p>基本的なHTML5構造の理解と、セマンティックなタグの適切な使用ができます。</p>
                </li>
                <li class="skill-card">
                    <h3>CSS</h3>
                    <p>レスポンシブデザインの基本とFlexboxを使用したレイアウト作成ができます。</p>
                </li>
                <li class="skill-card">
                    <h3>JavaScript</h3>
                    <p>DOM操作、イベントハンドリング、基本的な非同期処理（Fetch API）の使用経験があります。</p>
                </li>
                <li class="skill-card">
                    <h3>React基礎</h3>
                    <p>コンポーネントの作成、プロップスとステートの基本的な使用ができます。</p>
                </li>
            </ul>
        </section>

        <!-- プロジェクトセクション -->
        <section id="projects">
            <h2>プロジェクト</h2>
            <div class="project-grid">
                <!-- 各プロジェクトカード -->
                <article class="project-card">
                    <h3>タスク管理アプリ</h3>
                    <p class="project-summary">シンプルなToDo管理アプリケーション</p>
                    <p class="project-details">HTML、CSS、JavaScriptを使用して、タスクの追加、削除、完了のマークができる基本的なタスク管理アプリを作成しました。ローカルストレージを使用してデータを保存する機能も実装しています。</p>
                    <a href="https://github.com/yourusername/todo-app" target="_blank" class="btn github-btn">GitHubで見る</a>
                </article>
                <article class="project-card">
                    <h3>天気予報ウィジェット</h3>
                    <p class="project-summary">現在の天気と簡単な予報を表示するウィジェット</p>
                    <p class="project-details">OpenWeatherMap APIを利用し、ユーザーの位置情報に基づいて現在の天気と3日間の簡単な予報を表示するウィジェットを開発しました。JavaScriptのFetch APIを使用してデータを取得し、動的にDOMを更新しています。</p>
                    <a href="https://github.com/yourusername/weather-widget" target="_blank" class="btn github-btn">GitHubで見る</a>
                </article>
                <article class="project-card">
                    <h3>シンプルなブログサイト</h3>
                    <p class="project-summary">静的なブログサイトのデザインと実装</p>
                    <p class="project-details">HTML、CSS、少量のJavaScriptを使用して、レスポンシブデザインのブログサイトを作成しました。記事一覧ページと個別記事ページのレイアウトを実装し、モバイルファーストのアプローチでデザインしています。</p>
                    <a href="https://github.com/yourusername/simple-blog" target="_blank" class="btn github-btn">GitHubで見る</a>
                </article>
            </div>
        </section>

        <!-- お問い合わせセクション -->
        <section id="contact">
            <h2>お問い合わせ</h2>
            <form id="contact-form">
                <input type="text" placeholder="お名前" required>
                <input type="email" placeholder="メールアドレス" required>
                <textarea placeholder="メッセージ" required></textarea>
                <button type="submit">送信</button>
            </form>
        </section>
    </main>

    <!-- フッター -->
    <footer>
        <p>© <span id="current-year"></span> あなたの名前 | All Rights Reserved.</p>
    </footer>

    <!-- JavaScriptファイルの読み込み -->
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

styles.css

/* カスタムプロパティ（変数）の定義 */
:root {
    --primary-color: #6c5ce7;
    --secondary-color: #a29bfe;
    --accent-color: #fd79a8;
    --text-color: #2d3436;
    --background-color: #f9f9f9;
    --card-background: #ffffff;
}

/* 全要素に対するリセットとボックスサイジングの設定 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 基本的なボディスタイル */
body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
    text-align: center;
}

/* コンテナのスタイル */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ヘッダーのスタイル */
header {
    background-color: var(--primary-color);
    color: #fff;
    padding: 3rem 0;
}

header h1 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

header p {
    font-size: 1.2rem;
    opacity: 0.8;
}

/* ナビゲーションのスタイル */
nav {
    background-color: var(--secondary-color);
    padding: 1rem 0;
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
}

nav ul li {
    margin: 0 1rem;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: var(--accent-color);
}

/* セクションの共通スタイル */
section {
    margin: 4rem 0;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: var(--primary-color);
}

/* スキルとプロジェクトのグリッドレイアウト */
.skills-grid, .project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    list-style-type: none;
}

/* スキルカードとプロジェクトカードの共通スタイル */
.skill-card, .project-card {
    background-color: var(--card-background);
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.skill-card:hover, .project-card:hover {
    transform: translateY(-5px);
}

.skill-card h3, .project-card h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

/* プロジェクト詳細のスタイル */
.project-summary {
    font-weight: 600;
    margin-bottom: 1rem;
}

.project-details {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 1rem;
    flex-grow: 1;
}

/* ボタンのスタイル */
.btn {
    background-color: var(--primary-color);
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    display: inline-block;
    margin-top: auto;
}

.btn:hover {
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

/* フォームのスタイル */
form {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    margin: 0 auto;
}

input, textarea, button {
    margin: 0.5rem 0;
    padding: 1rem;
    border: none;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
}

input, textarea {
    background-color: #f0f0f0;
}

button {
    background-color: var(--primary-color);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: var(--accent-color);
}

/* フッターのスタイル */
footer {
    background-color: var(--primary-color);
    color: #fff;
    padding: 1rem 0;
    margin-top: 4rem;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    .skills-grid, .project-grid {
        grid-template-columns: 1fr;
    }
}

JavaScript (script.js)

script.js

// DOMが完全に読み込まれた後に実行
document.addEventListener('DOMContentLoaded', () => {
    // 必要な要素の取得
    const contactForm = document.getElementById('contact-form');
    const currentYearSpan = document.getElementById('current-year');

    // フォーム送信処理
    contactForm.addEventListener('submit', (e) => {
        e.preventDefault(); // デフォルトの送信動作を防止
        // ここにフォーム送信のロジックを実装
        // 例: サーバーへのデータ送信、バリデーションなど
        alert('お問い合わせありがとうございます。');
        contactForm.reset(); // フォームをリセット
    });

    // スムーズスクロール機能
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault(); // デフォルトのリンク動作を防止
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth' // スムーズスクロールを有効化
            });
        });
    });

    // フッターの年を自動更新
    currentYearSpan.textContent = new Date().getFullYear();
});