13. ポートフォリオページを作ろう！プロジェクト概要とHTML構造
これまで学んできたCSSの知識を活用し、ポートフォリオページの作成を始めます。まずは基本となる考え方を学びましょう。
学習目標
- ポートフォリオサイト制作の基本的な考え方を理解する
- 一貫性のあるデザインの重要性とその実現方法を学ぶ
- カラーパレットとフォント設定の基本を理解する
- ベーススタイルの役割と設定方法を習得する
- 実務で役立つCSS設計のポイントを理解する
目次
プロジェクト概要
今回は、これまで学んできたCSSの知識を全て活用して、架空のポートフォリオページを作成します。HTML構造はすでに用意されており、皆さんにはCSSを中心に設計・装飾していただきます。
今回のプロジェクトの特徴
これは「塗り絵形式」の実践課題です。HTMLの骨組みは用意されているので、CSSで装飾を加えながら完成させていきます。実際の制作現場でもよく使われる手法です。
これは「塗り絵形式」の実践課題です。HTMLの骨組みは用意されているので、CSSで装飾を加えながら完成させていきます。実際の制作現場でもよく使われる手法です。
使用する技術
- ボックスモデル：padding、margin、borderを使った要素の配置
- 色とフォント：統一感のある色使いとフォント設定
- Flexbox：柔軟なレイアウト作成
- レスポンシブデザイン：様々な画面サイズに対応
- ホバー効果：インタラクティブな装飾