1.概要

lesson5では以下のような自己紹介カードを作成してもらいます。

作業の流れ

• 自己紹介カードの枠を作成: 長方形のカードの枠を作成してもらいカードの影やカードの枠線の角が丸くなるようにデザインします。
• プロフィール画像の表示: プロフィール画像では作成者を表す画像を貼ってもらい高さや横幅を調整します。
• 自分紹介を入力: 名前はh1タグ、Google Fonts Iconsを使ってIconと出身地などの個人情報を入力します。

2.自己紹介カードの枠を作成

今回作成するもの

画像のように長方形のカードの枠を作成してもらいます。

作成するために必要な要素

• html
  • div: 構造を作るためのタグ
• css
  • width: 要素の横幅
  • height: 要素の高さ
  • padding: 要素ないの余白
  • border: 枠線
  • border-raduis: 要素の角を丸める
  • box-shadow: 要素に影を追加

3.プロフィール画像の表示

今回作成するもの

画像のように長方形のカードの中にプロフィール画像を表示してもらいます。

作成するために必要な要素

• html
  • figure: 画像や図などを表すタグ
  • img: 画像タグ
• css
  • text-align: 要素の位置を変更

4.自分紹介を入力

今回作成するもの

最後に自己紹介を入力してカードの完成をしてもらいます。

作成するために必要な要素

• html
  • p: 画像や図などを表すタグ
  • span: 画像タグ
• css
  • display: 要素を横並びにする
  • align-items: 子要素の垂直方向の位置を調整
  • gap: 子要素間の余白
  • line-height: テキストの高さ
  • font-size: フォントの大きさ
  • margin: 要素の外側の余
• Icons
  • Google Fonts Icons