【実践編】HTML/CSS/JSで作る！プロレベルの「ポートフォリオサイト」構築マニュアル

はじめに：コードで「技術力」を証明する

この【実践編】の目的は、【応用編】で言語化された素晴らしいコンテンツを格納するための「器（サイト）」をプロ品質で構築することです。あなたの書いたコードそのものが、面接における最大の「技術証明」となります。保守性、アクセシビリティ、パフォーマンスを追求しましょう。

STEP 1：サイトの「骨格」を作る（HTML構造の構築）

全ての土台となるHTMLを、機械（検索エンジンやスクリーンリーダー）が正しく理解できるように設計します。

1. セマンティックHTMLの実践：
   • 具体的な実践例： 連絡先やスキル詳細には<dl>、<dt>、<dd>を使用し、連絡先情報を<address>タグで囲むことで、セマンティクスを向上させます。
   • 見出しの階層化： ページ全体の主題を<h1>で、各セクションの見出しを<h2>で分ける（例：職務経歴、パーソナルスキル）という階層構造を意識しましょう。
2. 必須のメタタグ設定：
   • アクセシビリティへの配慮： サイト全体の主題である<h1>をclass="visually-hidden"として隠す手法は、視覚的なデザインを保ちつつ、スクリーンリーダー利用者に正しい情報を提供するアクセシビリティの高い実践です。

アクション： 【基礎編】のワイヤーフレームに基づき、セマンティックタグを適切に配置してHTMLの骨子を完成させましょう。

STEP 2：デザインを「柔軟」にする（CSSの設計と実装）

デザインを美しく見せるだけでなく、将来的なメンテナンスの容易さとあらゆるデバイスへの対応力を追求します。

1. CSS変数によるデザインシステムの導入：
   • 具体的な実践例： あなたのコードのように、:rootでメインカラー（--color-text-main）や背景色（--color-background-body）を変数として定義し、サイト全体で利用しましょう。これにより、保守性と拡張性が大幅に向上します。
2. レスポンシブデザインの鉄則：
   • コンテナの管理： max-width（例：1200px）とmargin: 0 auto;でコンテンツ幅を固定し、大規模な画面でも見やすさを保ちます。
   • メディアクエリの実装： モバイル表示では、.two-column-layoutにflex-direction: columnを適用し、PCでの二段組をスマートフォンでの一段組に切り替えます。
   • レイアウトの調整： dl要素を1列表示に切り替える際、PCで設定したdd要素のborder-leftをnoneに上書きするなど、デバイスごとにデザインの整合性を保つ調整が必須です。

STEP 3：ユーザー体験（UX）を向上させる（JavaScriptによるインタラクション）

1. パフォーマンスに配慮したアニメーション： スクロールに連動したアニメーションには、Intersection Observer APIを使用し、サイトの軽量化とパフォーマンスを維持します。
2. アイコンの読み込み: スキルアイコンに<object>タグを使用する手法は、SVGを埋め込む際の一般的な方法です。これにより、画像ファイルよりも軽量で、拡大しても画質が劣化しないアイコンを実現できます。

STEP 4：プロ品質に仕上げる（アクセシビリティと最適化）

この最後の仕上げが、あなたのコードを「趣味」から「プロ」へと昇華させます。

1. アクセシビリティの確保： 全ての人（特に視覚障害を持つ方）がサイトを利用できるよう、カラーコントラストやARIA属性を適切に設定します。
2. パフォーマンス最適化： 画像の最適化やファイル圧縮などを行い、表示速度を向上させる施策を行います。

🚀 実践編 完了：次のステップへ

あなたの「技術力」がコードとして形になりました。次は、このサイトを継続的に育てていくフェーズに移りましょう。

→ 【継続編】へ進む (サイト公開後の運用と改善について学びます)