【CSS,JSコード解説】ポートフォリオサイト作成（3/3）

シンプルなポートフォリオサイトのコード解説（CSS、JavaScript）
1. CSSコードの概要
2. JavaScriptコードの概要
styles.cssの解説
script.jsの解説
まとめ
1. CSSコードの特徴
2. JavaScriptコードの特徴

シンプルなポートフォリオサイトのコード解説（CSS、JavaScript）

前回作成したポートフォリオサイトのコード解説（CSS、JavaScript）です。

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

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

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...

CSSコードの概要

CSSカスタムプロパティを活用したモダンなウェブデザインの実装方法
レスポンシブデザインとセマンティックHTMLを考慮したCSSコーディング手法
ユーザーエクスペリエンスを向上させるインタラクティブな要素の実現方法

JavaScriptコードの概要

モダンなウェブ開発のためのJavaScriptコード構造と実装方法
ユーザーエクスペリエンスを向上させるインタラクティブな機能の実現
DOMContentLoadedイベントを活用した安全なコード実行の手法

styles.cssの解説

カスタムプロパティ（変数）の定義

:root {
    --primary-color: #6c5ce7;
    --secondary-color: #a29bfe;
    --accent-color: #fd79a8;
    --text-color: #2d3436;
    --background-color: #f9f9f9;
    --card-background: #ffffff;
}

:root セレクタを使用して、グローバル変数を定義
色を変数として設定し、後で再利用可能に

この部分では、CSSカスタムプロパティ（変数）を定義しています。:rootは文書のルート要素（通常は<html>タグ）を選択するセレクタです。ここで定義された変数は、文書全体で使用できます。各変数は--で始まり、その後に変数名が続きます。これにより、色やその他の値を一箇所で管理し、必要に応じて簡単に変更できるようになります。

リセットとボックスサイジング

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

すべての要素（*）に適用されるリセット
box-sizing: border-box でパディングとボーダーを幅と高さに含める
マージンとパディングをゼロにリセット

このセクションは、ブラウザのデフォルトスタイルをリセットし、一貫したレイアウトを確保するために重要です。box-sizing: border-boxを使用すると、要素の幅と高さにパディングとボーダーが含まれるようになり、レイアウトの計算が簡単になります。また、すべての要素のマージンとパディングを0に設定することで、予期しない空白を防ぎます。

基本的なボディスタイル

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
    text-align: center;
}

body要素全体のスタイルを設定
フォント、行間、色、背景色を指定
テキストを中央揃えに

このセクションでは、ウェブページの基本的なスタイルを設定しています。font-familyでPoppinsフォントを指定し、それが利用できない場合はsans-serifフォントを使用します。line-heightで行間を設定し、読みやすさを向上させています。colorとbackground-colorには、先ほど定義したカスタムプロパティを使用しています。text-align: centerで、デフォルトですべてのテキストを中央揃えにしています。

コンテナのスタイル

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

.containerクラスを持つ要素のスタイルを定義
最大幅を1200pxに制限
左右のマージンを自動で設定し、中央揃えに
左右に20pxのパディングを追加

このクラスは、ページコンテンツを適切に配置するために使用されます。max-widthを設定することで、大きな画面でもコンテンツが広がりすぎないようにしています。margin: 0 autoは上下のマージンを0に、左右のマージンを自動で設定し、要素を中央に配置します。パディングは、コンテンツが画面の端に接触しないようにするために追加されています。

ヘッダーのスタイル

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;
}

header要素のスタイルを設定
背景色、文字色、パディングを指定
h1とp要素に特別なスタイルを適用

ヘッダーセクションは、ウェブサイトの最上部に位置し、通常サイトのタイトルや簡単な説明を含みます。ここでは、背景色に--primary-color変数を使用し、文字色を白に設定しています。paddingで上下に余白を追加し、見やすさを向上させています。h1要素（通常はサイトのタイトル）は大きなフォントサイズで表示され、p要素（説明文など）はやや小さめのフォントサイズで、透明度を下げて表示されます。

ナビゲーションのスタイル

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

ナビゲーションバーのスタイルを定義
フレックスボックスを使用してリンクを中央揃えに
リンクのスタイルとホバー効果を設定

このセクションでは、ナビゲーションバーのスタイルを定義しています。nav要素に背景色を設定し、内部のul要素にフレックスボックスを適用してリンクを水平に配置します。各li要素（リンクを含む）には左右のマージンを設定し、適切な間隔を確保しています。リンク（a要素）自体には、文字色、フォントの太さ、そしてホバー時の色変更のためのトランジション効果を設定しています。:hover擬似クラスを使用して、マウスオーバー時のリンクの色を変更しています。

セクションの共通スタイル

section {
    margin: 4rem 0;
}

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

すべてのsection要素に上下のマージンを追加
h2見出しのフォントサイズ、マージン、色を設定

このコードは、ページ内の各セクションに共通のスタイルを適用します。section要素には上下に大きなマージンを設定し、セクション間の区切りを明確にしています。h2要素（通常はセクションのタイトル）には大きなフォントサイズを設定し、下部にマージンを追加して本文との間隔を確保しています。色には--primary-color変数を使用し、視覚的な一貫性を保っています。

スキルとプロジェクトのグリッドレイアウト

.skills-grid, .project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    list-style-type: none;
}

スキルとプロジェクトの表示にCSS Gridを使用
自動的に列数を調整するレスポンシブなレイアウトを作成
グリッドアイテム間に間隔を設定

このセクションでは、スキルとプロジェクトを表示するためのグリッドレイアウトを定義しています。display: gridでグリッドレイアウトを有効にし、grid-template-columnsプロパティを使用して列の幅を設定しています。repeat(auto-fit, minmax(250px, 1fr))は、利用可能なスペースに基づいて自動的に列数を調整し、各列の最小幅を250pxに設定します。これにより、画面サイズに応じて柔軟にレイアウトが変更されるレスポンシブなデザインが実現します。gapプロパティはグリッドアイテム間の間隔を設定し、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;
}

カードのスタイルを定義（背景色、角丸、影など）
ホバー効果でカードを少し上に移動
カード内の見出しのスタイルを設定

このコードは、スキルとプロジェクトを表示するカードのスタイルを定義しています。各カードには背景色、角丸、パディング、そして影が適用され、視覚的に浮き上がって見えるようになっています。transitionプロパティにより、ホバー時のアニメーション効果が滑らかになります。:hover擬似クラスを使用して、マウスオーバー時にカードが少し上に移動する効果を追加しています。カード内のh3要素（通常はスキルやプロジェクトの名前）には、プライマリカラーを適用し、下部にマージンを設定しています。

プロジェクト詳細のスタイル

.project-summary {
    font-weight: 600;
    margin-bottom: 1rem;
}

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

プロジェクトの概要と詳細のスタイルを設定
概要テキストを太字に
詳細テキストのサイズと透明度を調整

このセクションでは、プロジェクトカード内の特定の要素のスタイルを定義しています。.project-summaryクラスは、プロジェクトの短い説明や主要ポイントを表示するために使用され、太字で表示されます。.project-detailsクラスは、より詳細な情報を表示するために使用され、やや小さめのフォントサイズと低い不透明度で表示されます。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);
}

ボタンの基本スタイルを設定
ホバー時の見た目を変更（背景色を透明に、ボーダーを追加）
トランジション効果でスムーズな変化を実現

このコードは、ボタンのスタイルを定義しています。.btnクラスは、背景色、文字色、パディング、角丸を設定し、リンクのデフォルトの下線を削除します。transitionプロパティにより、ホバー時のスタイル変更がスムーズに行われます。margin-top: autoを使用することで、フレックスボックス内でボタンが下部に配置されます。:hover擬似クラスでは、マウスオーバー時にボタンの背景を透明にし、テキストの色を変更、そしてボーダーを追加しています。これにより、ユーザーのインタラクションに対する視覚的なフィードバックが提供されます。

フォームのスタイル

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

フォーム全体を縦方向のフレックスボックスとして設定
入力フィールド、テキストエリア、ボタンの基本スタイルを定義
送信ボタンにホバー効果を追加

このセクションでは、コンタクトフォームのスタイルを定義しています。form要素自体はフレックスボックスとして設定され、子要素が縦方向に配置されます。max-widthとmargin: 0 autoの組み合わせにより、フォームが中央に配置されます。

入力フィールド、テキストエリア、ボタンには共通のスタイル（マージン、パディング、ボーダー、角丸）が適用されます。入力フィールドとテキストエリアには薄いグレーの背景色が設定されています。

送信ボタンにはプライマリカラーが使用され、ホバー時にアクセントカラーに変更されます。cursor: pointerでボタンにマウスを合わせたときにカーソルが変化し、クリック可能であることを示します。

フッターのスタイル

footer {
    background-color: var(--primary-color);
    color: #fff;
    padding: 1rem 0;
    margin-top: 4rem;
}

フッターの背景色と文字色を設定
パディングで内部の余白を追加
上部に大きなマージンを設定してコンテンツと分離

このコードはウェブページのフッターのスタイルを定義しています。背景色にはプライマリカラーを使用し、文字色を白に設定しています。paddingでフッター内のコンテンツに適切な余白を与え、margin-topで本文コンテンツとフッターの間に大きな空間を作っています。これにより、フッターがページの他の部分から視覚的に分離され、ページの終わりを明確に示します。

レスポンシブデザイン

@media (max-width: 768px) {
    .skills-grid, .project-grid {
        grid-template-columns: 1fr;
    }
}

画面幅が768px以下の場合にスタイルを変更
スキルとプロジェクトのグリッドを1列に変更

このセクションはメディアクエリを使用して、小さな画面サイズ（通常はタブレットや携帯電話）に対応するレスポンシブデザインを実装しています。画面幅が768px以下になると、スキルとプロジェクトのグリッドレイアウトが1列に変更されます。これにより、小さな画面でもコンテンツが見やすく、使いやすくなります。

script.jsの解説

DOMContentLoaded イベントリスナー

document.addEventListener('DOMContentLoaded', () => {
    // ... (ここに他のコードが入ります)
});

DOMContentLoadedイベントを監視
イベント発生時に無名関数（アロー関数）を実行

このコードは、HTMLドキュメントの読み込みが完了し、DOMツリーの構築が終わった時点で実行されます。これにより、JavaScriptがHTML要素を操作する前に、確実にそれらの要素が存在することを保証します。addEventListenerメソッドを使用して、'DOMContentLoaded'イベントにリスナーを追加しています。

要素の取得

const contactForm = document.getElementById('contact-form');
const currentYearSpan = document.getElementById('current-year');

getElementByIdメソッドを使用して特定のHTML要素を取得
取得した要素を定数に格納

このコードでは、HTMLドキュメント内の特定の要素をJavaScriptから操作できるようにしています。contactFormにはid="contact-form"を持つ要素が、currentYearSpanにはid="current-year"を持つ要素（年を表示するための要素）が格納されます。

フォーム送信処理

contactForm.addEventListener('submit', (e) => {
    e.preventDefault();
    alert('お問い合わせありがとうございます。');
    contactForm.reset();
});

フォームのsubmitイベントにリスナーを追加
デフォルトの送信動作を防止
アラートを表示
フォームをリセット

このコードは、フォームが送信されたときの動作を定義しています。e.preventDefault()でフォームのデフォルトの送信動作（ページのリロードなど）を防止し、代わりにカスタムの処理を行います。ここでは単純にアラートを表示し、その後reset()メソッドでフォームの入力内容をクリアしています。実際のアプリケーションでは、ここでバリデーションやサーバーへのデータ送信などを行うことが多いです。

スムーズスクロール機能

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

ページ内リンク（#で始まるhref属性を持つa要素）を全て取得
各リンクにクリックイベントリスナーを追加
クリック時にデフォルトの動作を防止し、スムーズスクロールを実行

このコードは、ページ内リンク（例：目次から各セクションへのリンク）をクリックした際に、ページがスムーズにスクロールする機能を実装しています。querySelectorAllで該当するすべてのリンクを取得し、それぞれにイベントリスナーを設定します。クリック時にはscrollIntoViewメソッドを使用して、リンク先の要素までスムーズにスクロールします。

フッターの年を自動更新

currentYearSpan.textContent = new Date().getFullYear();

現在の年を取得
特定の要素のテキスト内容を更新

このシンプルなコードは、フッターなどに表示される著作権表示の年を自動的に更新するために使用されます。new Date().getFullYear()で現在の年を取得し、それをcurrentYearSpan要素のテキスト内容として設定します。これにより、毎年手動でHTMLを更新する必要がなくなります。

イベントリスナーの終了

});

DOMContentLoadedイベントリスナーの終了括弧

この閉じ括弧は、document.addEventListener('DOMContentLoaded', () => { ... })で開始された関数の終わりを示します。この構造により、すべてのコードがDOM読み込み完了後に実行されることが保証されます。

全体の構造

document.addEventListener('DOMContentLoaded', () => {
    // ここに全てのコードが含まれる
});

ドキュメントの読み込み完了を待つ
すべてのJavaScriptコードをこの中に配置

この構造は、JavaScriptコード全体をカプセル化する役割を果たします。DOMContentLoadedイベントを使用することで、HTMLドキュメントが完全に読み込まれ、解析された後にコードが実行されることを保証します。これにより、JavaScriptが操作しようとする要素が確実にDOMに存在することが保証され、エラーを防ぐことができます。

まとめ

CSSコードの特徴

カスタムプロパティを使用したカラーパレットの定義と管理
Flexboxとグリッドレイアウトを活用した柔軟なデザイン構築
メディアクエリによるモバイルフレンドリーな対応
カードデザインやホバーエフェクトなどの現代的なUI要素の実装
セマンティックなHTML構造を想定したセレクタの使用

このCSSコードは、現代のウェブデザインの原則に基づいて作成されたポートフォリオサイト向けのスタイルシートです。カスタムプロパティを活用することで、全体的な色調の一貫性を保ちつつ、簡単にテーマの変更が可能となっています。レスポンシブデザインを採用し、様々なデバイスでの表示に対応しながら、Flexboxやグリッドレイアウトを使用して複雑なレイアウトを簡潔に実現しています。

カードデザインやホバーエフェクトなどのインタラクティブな要素を取り入れることで、ユーザーエクスペリエンスの向上を図っています。また、セマンティックなHTML構造と組み合わせることで、アクセシビリティにも配慮したデザインを実現しています。

全体として、このCSSは保守性が高く、拡張性のあるコードとなっており、モダンなウェブサイトの構築に適しています。カスタムプロパティの活用により、デザインシステムの構築やテーマの切り替えも容易に実装できる、柔軟性の高いスタイルシートとなっています。

JavaScriptコードの特徴

DOMContentLoadedイベントを使用した安全なコード実行
フォーム送信のカスタム処理機能
スムーズスクロール機能の実装
年の自動更新機能による保守性の向上
モジュール化された構造による可読性と拡張性の確保
イベントリスナーとアロー関数を活用したモダンな記法

このJavaScriptコードは、モダンなウェブサイトに必要なインタラクティブな機能を実装するための包括的なソリューションを提供しています。DOMContentLoadedイベントを使用することで、HTMLドキュメントの完全な読み込みを待ってからスクリプトを実行し、潜在的なエラーを防いでいます。

コードはフォーム送信の処理、スムーズスクロール、年の自動更新など、ユーザーエクスペリエンスを向上させる重要な機能を実装しています。これらの機能はモジュール化されており、各機能が明確に分離されているため、理解しやすく、保守性が高くなっています。

イベントリスナーやアロー関数などのモダンなJavaScriptの機能を活用しており、コードの簡潔さと効率性を実現しています。また、このコード構造は拡張性が高く、新しい機能を追加する際にも既存のコードに影響を与えることなく実装できます。

初心者の開発者にとっては、このコードはDOM操作、イベント処理、関数の構造化などの重要な概念を学ぶ良い例となります。段階的に理解を深め、自身のプロジェクトに適用していくことで、モダンなウェブ開発のスキルを効果的に向上させることができるでしょう。

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