CSSポートフォリオ作成編
CSS 基礎で学んだ知識を使い、用意された HTML にスタイルを当てて 1 ページのポートフォリオを仕上げる練習講座です。
このコースでつくるもの
1ページ構成のポートフォリオ（ランディング型）サイトです。ナビゲーションで同一ページ内の各セクションへスクロールする、よくあるポートフォリオの形を想定しています。
- 教材では架空のプロフィールを題材に進めますが、HTMLを書き換えればご自身の名前・内容にもできます。
- マークアップの骨組み（HTML）は教材で用意済みです。学習の中心は CSS での装飾とレスポンシブ対応です（骨組みは固定し、見た目を CSS で仕上げる形式です）。
¥980
購入する
この講座について
CSS 基礎講座のあとに取り組む、ページ単位のスタイル仕上げの練習教材です。完成見本を参考にレッスンを進めます。
- ゴール: 用意された HTML に CSS を当てて、1 ページのポートフォリオを仕上げられる
- 伸ばす力: CSS を追加・修正できる
できるようになること
- ベーススタイル、ヘッダー、ナビゲーションの見た目を整えられる
- 自己紹介やスキルなど、セクションごとのスタイルを組み立てられる
- お問い合わせフォーム周りの見た目を整えられる
- 画面幅に合わせたレスポンシブ対応の基本を適用できる
- 完成見本を参考に、ページ全体のスタイルを一通り仕上げられる
よくある質問（FAQ）
この講座は CSS基礎講座 で学んだ内容を前提としています。基礎講座を一通り終えてから受講することをおすすめします。
この講座は 8 レッスンです。全体の学習時間はおおよそ 8 時間です。1 日 1 レッスンなら、およそ 1〜2 週間で一通り終えられます。
はい。教材では理解しやすいよう架空のプロフィールで進めますが、提供 HTML のテキストや画像を差し替えれば、ご自身の内容にもできます。
レッスン一覧
1. ポートフォリオページを作ろう！プロジェクト概要とHTML構造
プロジェクトの全体像と、提供HTMLの構造・完成見本の見方を押さえます。
2. ポートフォリオページのべーススタイルを整えよう
カラー・タイポグラフィ・全体の余白など、サイト全体の土台となるベーススタイルを整えます。
3. ポートフォリオページのヘッダーとナビゲーションをスタイリングしよう
ロゴエリアとナビリンクのレイアウト・ホバーなど、ページ上部の見た目を仕上げます。
4. ポートフォリオページの自己紹介セクションをスタイリングしよう
ヒーロー直下のAbout領域のレイアウトと読みやすさを整えます。
5. ポートフォリオサイトのスキルセクションをスタイリングしよう
スキル一覧やカード型のブロックを、整ったグリッド・バッジ風に見せます。
6. ポートフォリオページのお問い合わせフォームデザインしよう
入力欄・ラベル・ボタンのスタイルと、フォームまわりの余白を調整します。
7. ポートフォリオページのフッターをスタイリングしよう
ページ末尾のフッターを、全体デザインと揃ったトーンでまとめます。
8. ポートフォリオサイトのレスポンシブ対応
メディアクエリでレイアウトを切り替え、スマートフォン表示まで仕上げます。
