シンプルなポートフォリオサイトのコード解説（HTML）
前回作成したポートフォリオサイトのコード解説（HTML）です。
- ポートフォリオサイト（1/3）
- ポートフォリオサイト（2/3）
- ポートフォリオサイト（3/3）
- WEBサイトのURL
- GitHubのURL
GitHubのPagesで公開しているのでポートフォリオサイトを確認できます。
コードの概要
- レスポンシブデザインに対応した構造
- セマンティックHTML5タグの使用
- Google Fontsの統合
- 4つの主要セクション: 自己紹介、スキル、プロジェクト、お問い合わせ
HTMLファイル (index.html)の解説
DOCTYPE宣言とHTML開始タグ
<!DOCTYPE html>
<html lang="ja"><!DOCTYPE html>: HTML5文書であることを宣言<html lang="ja">: HTML文書の開始タグ、日本語サイトであることを指定
この部分は、ブラウザに対してこの文書がHTML5で書かれていることを伝え、さらに文書の主要言語が日本語であることを示しています。lang="ja"属性は、検索エンジンや音声読み上げソフトなどに言語情報を提供する重要な役割を果たします。
head要素
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>個人ポートフォリオ</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
</head><meta charset="UTF-8">: 文字エンコーディングをUTF-8に指定<meta name="viewport" ...>: モバイルデバイス向けのビューポート設定<title>: ページのタイトルを指定<link rel="stylesheet" ...>: 外部CSSファイルの読み込み<link href="https://fonts.googleapis.com ...>: Google Fontsの読み込み
head要素には、ページのメタ情報が含まれます。文字コードの指定、ビューポートの設定、ページタイトル、外部リソース（CSSやフォント）の読み込みなどが行われています。特にviewportの設定はレスポンシブデザインを実現する上で重要です。
body開始タグ
<body><body>: ページの本文を含む要素の開始
body要素は、ウェブページの実際の内容を含む部分です。ここから下に、ユーザーに表示される全ての要素が配置されます。
ヘッダーセクション
<header>
<h1>あなたの名前</h1>
<p>職種 | スキル | 趣味</p>
</header><header>: ページのヘッダー部分を定義<h1>: ページの主要な見出し<p>: 簡単な自己紹介や肩書き
header要素は、ページの導入部分や最上部に表示される内容を含みます。ここでは、ポートフォリオの所有者の名前と簡単な自己紹介が含まれています。<h1>タグはページ全体で最も重要な見出しを示し、SEOの観点からも重要です。
ナビゲーションメニュー
<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><nav>: ナビゲーションメニューを定義<ul>: 順序なしリストを作成<li>: リストの各項目<a href="#">: ページ内リンク
nav要素は、サイト内の主要なナビゲーションリンクを含みます。ここでは、ページ内の各セクションへのリンクが設定されています。href属性の#で始まる値は、同じページ内の特定のID要素へのリンクを示します。これにより、ユーザーは簡単にページ内を移動できます。
メインコンテンツ開始
<main class="container"><main>: ページの主要コンテンツを囲むclass="container": CSSスタイリングのためのクラス
main要素は、ページの主要なコンテンツを囲む要素です。この要素は、ページごとに一度だけ使用されるべきで、サイドバーやナビゲーションなど、ページ全体で繰り返される内容は含めません。containerクラスは、コンテンツの幅や配置を制御するためのCSSクラスです。
自己紹介セクション
<section id="about">
<h2>自己紹介</h2>
<p>ここに自己紹介文を記載します。あなたのバックグラウンドや興味について書いてください。</p>
</section><section>: コンテンツの意味的なセクションを定義id="about": セクションの一意の識別子<h2>: セクションの見出し<p>: 段落テキスト
section要素は、文書の独立した部分を表します。ここでは自己紹介のセクションを作成しています。id属性は、ナビゲーションからこのセクションにリンクするために使用されます。<h2>タグはセクションの主見出しを示し、文書構造の階層を明確にします。
スキルセクション
<section id="skills">
<h2>スキル</h2>
<ul class="skills-grid">
<li class="skill-card">
<h3>HTML</h3>
<p>基本的なHTML5構造の理解と、セマンティックなタグの適切な使用ができます。</p>
</li>
<!-- 他のスキルカード -->
</ul>
</section><ul class="skills-grid">: スキルリストをグリッドレイアウトで表示<li class="skill-card">: 各スキルを表すカード形式の項目<h3>: 各スキルの名前<p>: スキルの詳細説明
このセクションでは、保有するスキルをリスト形式で表示しています。skills-gridクラスは、おそらくCSSグリッドレイアウトを適用するために使用されます。各スキルはskill-cardクラスを持つ<li>要素で表現され、カード形式のデザインを意図しています。
プロジェクトセクション
<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>
<!-- 他のプロジェクトカード -->
</div>
</section><div class="project-grid">: プロジェクトをグリッドレイアウトで表示<article class="project-card">: 各プロジェクトを表す記事<h3>: プロジェクト名<p class="project-summary">: プロジェクトの簡単な概要<p class="project-details">: プロジェクトの詳細説明<a href="..." target="_blank" class="btn github-btn">: GitHubリンクボタン
プロジェクトセクションでは、完成したプロジェクトの詳細を表示しています。各プロジェクトはarticle要素で囲まれ、独立したコンテンツとして扱われています。target="_blank"属性は、リンクを新しいタブで開くように指定しています。
お問い合わせセクション
<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><form id="contact-form">: お問い合わせフォーム<input>: テキスト入力フィールド（名前とメールアドレス用）<textarea>: 複数行のテキスト入力エリア（メッセージ用）<button type="submit">: フォーム送信ボタン
お問い合わせセクションには、訪問者がメッセージを送信できるフォームが含まれています。required属性は、フォームの送信前に必須フィールドの入力を確認します。このフォームの実際の送信処理は、サーバーサイドのスクリプトまたはJavaScriptで実装する必要があります。
フッター
<footer>
<p>© <span id="current-year"></span> あなたの名前 | All Rights Reserved.</p>
</footer><footer>: ページのフッター部分©: コピーライト記号<span id="current-year"></span>: 現在の年を動的に挿入するための要素
フッターには、著作権情報が含まれています。current-yearというIDを持つspan要素は、JavaScriptを使用して現在の年を動的に挿入するために使用されると思われます。
JavaScriptの読み込み
<script src="script.js"></script><script>: JavaScriptファイルを読み込むためのタグsrc="script.js": 読み込むJavaScriptファイルのパス
このタグは、外部JavaScriptファイルを読み込みます。一般的に、<script>タグは</body>タグの直前に配置されます。これは、HTMLの読み込みが完了した後にJavaScriptを実行することで、ページの読み込み速度を向上させるためです。
HTML終了タグ
</body>
</html></body>: body要素の終了</html>: HTML文書の終了
これらのタグは、それぞれbody要素とHTML文書全体の終わりを示します。適切に閉じタグを使用することで、整形式（well-formed）なHTML文書を作成し、ブラウザによる正確な解釈を助けます。
まとめ
コードの特徴:
- クリーンで読みやすいHTML構造
- CSSとJavaScriptの外部ファイルリンク
- スキルカードとプロジェクトカードを使用した情報の視覚的な整理
- フォーム要素を使用したお問い合わせセクション
- フッターにダイナミックな年表示のためのJavaScriptフック
このHTMLテンプレートは、初心者からスキルのある開発者まで幅広く利用できる、柔軟で拡張可能な基盤を提供しています。セマンティックな構造とモジュラー設計により、将来的な拡張や修正が容易になっています。また、レスポンシブデザインの考慮により、様々なデバイスでの表示に対応しています。このテンプレートを基に、個人の経験やプロジェクトに合わせてカスタマイズすることで、効果的な個人ポートフォリオサイトを構築することができます。
コメント