CSSポートフォリオ作成編
ポートフォリオサイト制作を通じて、実務で使えるCSS設計とデザインスキルを習得。CSS基礎講座で学んだ知識を実践で活用しましょう。
このコースでつくるもの
1ページ構成のポートフォリオ（ランディング型）サイトです。ナビゲーションで同一ページ内の各セクションへスクロールする、よくあるポートフォリオの形を想定しています。
- 教材では架空のプロフィールを題材に進めますが、HTMLを書き換えればご自身の名前・内容にもできます。
- マークアップの骨組み（HTML）は教材で用意済みです。学習の中心は CSS での設計・装飾・レスポンシブ対応です（制作現場でも使われる「骨組みは固定し、見た目をCSSで仕上げる」形式の実践です）。
ページに含まれる主なブロック
- ヘッダー・ナビゲーション
- ヒーロー（プロフィール紹介）
- 自己紹介（About）
- スキル紹介
- お問い合わせフォーム
- フッター
- スマートフォンなど各画面幅へのレスポンシブ対応
完成見本をブラウザで開く 購入前でも、仕上がりのイメージを確認できます。
CSS基礎講座で学んだ知識を活かし、実際のポートフォリオサイトを制作しながら実務で使えるスキルを身につけます。
習得できるスキル
- ポートフォリオサイトの設計と実装ができる
- ベーススタイル、ヘッダー、ナビゲーションのスタイリングができる
- 自己紹介セクションやスキルセクションのデザインができる
- お問い合わせフォームのデザインとユーザビリティを考慮できる
- レスポンシブ対応の実装ができる
- 実務で役立つCSS設計のポイントを理解できる
よくある質問（FAQ）
CSSポートフォリオ作成編では、CSS基礎講座で学んだ内容を前提としています。基礎講座のレッスン1〜12を修了してから受講することをお勧めします。
CSSポートフォリオ作成編は980円でご提供しています。
一度購入すれば、永続的にすべてのレッスンにアクセスできます。月額料金は一切かかりません。
はい。教材では理解しやすいよう架空のプロフィールで進めますが、提供HTMLのテキストや画像を差し替えれば、ご自身のポートフォリオとして使えます。
このコースの範囲ではHTMLとCSSに集中します。フォーム送信の動作やデータベース連携などのJavaScript・サーバー側の実装は含みません（見た目とレイアウトの学習が主目的です）。
レッスンでは完成見本を参考にしながら、セクションごとにCSSを組み立てていきます。配色や余白の取り方などは見本を土台にしつつ、学習が進んだら自分なりのアレンジに挑戦することも可能です。
レッスン一覧
1. ポートフォリオページを作ろう！プロジェクト概要とHTML構造
プロジェクトの全体像と、提供HTMLの構造・完成見本の見方を押さえます。
2. ポートフォリオページのべーススタイルを整えよう
カラー・タイポグラフィ・全体の余白など、サイト全体の土台となるベーススタイルを整えます。
3. ポートフォリオページのヘッダーとナビゲーションをスタイリングしよう
ロゴエリアとナビリンクのレイアウト・ホバーなど、ページ上部の見た目を仕上げます。
4. ポートフォリオページの自己紹介セクションをスタイリングしよう
ヒーロー直下のAbout領域のレイアウトと読みやすさを整えます。
5. ポートフォリオサイトのスキルセクションをスタイリングしよう
スキル一覧やカード型のブロックを、整ったグリッド・バッジ風に見せます。
6. ポートフォリオページのお問い合わせフォームデザインしよう
入力欄・ラベル・ボタンのスタイルと、フォームまわりの余白を調整します。
7. ポートフォリオページのフッターをスタイリングしよう
ページ末尾のフッターを、全体デザインと揃ったトーンでまとめます。
8. ポートフォリオサイトのレスポンシブ対応
メディアクエリでレイアウトを切り替え、スマートフォン表示まで仕上げます。
