HTML、CSS、JavaScriptWEBサイト

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

ポートフォリオサイト作成のアイキャッチ画像01 HTML、CSS、JavaScript

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

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

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

  • WEBサイトのURL
  • GitHubのURL

サイトの特徴

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

VSCodeで作ってみよう!

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

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

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

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

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

必要なファイル
  • index.html
  • styles.css
  • script.js

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

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

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

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

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)

/* カスタムプロパティ(変数)の定義 */
: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)

// 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();
});

コピペが終わったら左上の「ファイル」のメニューから「すべて保存」を押してください。

※Ctrlを押しながらKを押して、キーを離してSを押すとショートカットキーですべてのファイルを保存できます。

最後に右下の「Go Live」をクリックするとブラウザが立ち上がりプログラムが実行されます。

以下のようにブラウザが立ち上がります。

まとめ

サイトの特徴

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

コメント

タイトルとURLをコピーしました