16. ポートフォリオページの自己紹介セクションをスタイリングしよう
これまで学んできたCSSの知識を使い、自己紹介セクションをスタイリングします。
学習目標
- 自己紹介セクションの視覚的な魅力を高めるCSSテクニックを習得する
- グラデーションと配色を使って印象的な背景を作成する
- 円形のプロフィール画像を効果的に表示する方法を学ぶ
- テキスト要素の配置と余白調整で読みやすさを向上させる
目次
プロジェクト概要
今回は、これまで学んできたCSSの知識を全て活用して、架空のポートフォリオページを作成します。HTML構造はすでに用意されており、皆さんにはCSSを中心に設計・装飾していただきます。
今回のプロジェクトの特徴
これは「塗り絵形式」の実践課題です。HTMLの骨組みは用意されているので、CSSで装飾を加えながら完成させていきます。実際の制作現場でもよく使われる手法です。
これは「塗り絵形式」の実践課題です。HTMLの骨組みは用意されているので、CSSで装飾を加えながら完成させていきます。実際の制作現場でもよく使われる手法です。
ポートフォリオの見本
以下のリンクから、今回のポートフォリオページの見本を確認できます。実際のデザインイメージを掴むために参考にしてください。
学習の準備をしよう
このレッスンでは、ポートフォリオサイトの基礎的なスタイリングを行います。コードエディタを使って、実際にコードを書きながら学習しましょう。