CSS グリッドを使ってコアラの顔を作成する

はじめに

このプロジェクトでは、CSSグリッドレイアウトを使ってコアラの顔を作成する方法を学びます。全体的な顔の構造を作成し、目、鼻、ホットピンクの要素を描いて、コアラの顔の特徴を完成させます。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下を学びます。

• コアラの顔のためのグリッドレイアウトを設定する方法
• コアラの目を描く方法
• コアラの鼻を描く方法
• コアラの顔にホットピンクを描く方法

🏆 成果

このプロジェクトを完了すると、以下ができるようになります。

• CSSグリッドレイアウトを使って複雑なデザインを作成する
• グリッド内のさまざまな要素を配置してスタイルを設定する
• border-radiusやbackground-colorなどのCSSプロパティを使って、独自の形状やデザインを作成する

Skills Graph

プロジェクトのセットアップ

このステップでは、プロジェクトをセットアップし、エディタでファイルを開きます。

プロジェクトフォルダを開きます。このフォルダには、以下のファイルとディレクトリが含まれています。

├── styles.css
└── index.html

ここで：

• index.html はメインページです。
• style.css は必要なスタイルを追加するファイルです。

WebIDEの右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VMの上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

コアラの顔の各部分の位置については、以下のグリッド図を参照してください。

グリッドレイアウトのセットアップ

このステップでは、コアラの顔のためのグリッドレイアウトを作成する方法を学びます。

1. コードエディタで styles.css ファイルを開きます。
2. グリッドレイアウトを作成するために、.face に以下のCSSコードを追加します。

.face {
  z-index: 1;
  width: 430px;
  height: 380px;
  background: #a0abb6;
  border-radius: 50%;
  display: grid;
  grid-template-columns: 1fr repeat(4, 25px) 1fr;
  grid-template-rows: 50px repeat(2, 1fr) 50px;
  align-items: center;
}

このコードは、6列4行のグリッドレイアウトを作成します。コアラの顔の前面と背面の部分は、左右の2つの等幅の列で表され、真ん中の4列は幅25pxです。上下の行は高さ50pxで、真ん中の2行は高さが等しくなっています。

目を描く

このステップでは、コアラの目を描く方法を学びます。

1. 目を作成するために、以下のCSSコードを追加します。

.eye {
  width: 30px;
  height: 30px;
  background: #090b0e;
  border-radius: 50%;
  justify-self: center;
}

.eye.left {
  grid-area: 2/2/2/3;
}

.eye.right {
  grid-area: 2/5/2/6;
}

このコードは、それぞれ幅30px、高さ30pxの2つの丸い目を作成し、濃い色（#090b0e）で50%の角丸にします。justify-self: center プロパティにより、目をそれぞれのグリッドセル内で水平方向に中央に配置します。grid-area プロパティにより、左右の目を正しいグリッドセルに配置します。

鼻を描く

このステップでは、コアラの鼻を描く方法を学びます。

1. 鼻を作成するために、以下のCSSコードを追加します。

.nose {
  background: #3b464f;
  border-radius: 50% 50% 40% 40%;
  height: 100%;
  grid-area: 3/2/3/6;
}

このコードは、濃い色（#3b464f）と角丸を持つ鼻の形の要素を作成します。border-radius プロパティにより、鼻に角丸を与え、上の角は50%の角丸、下の角は40%の角丸になっています。height: 100% プロパティにより、鼻がそのグリッドセルの全高さに渡るようになり、grid-area プロパティにより、鼻を正しいグリッドセルに配置します。

ホップを描く

このステップでは、コアラの顔にホップを描く方法を学びます。

1. ホップを作成するために、以下のCSSコードを追加します。

.blush.left {
  grid-area: 2/1/3/2;
  align-self: end;
  justify-self: end;
}

.blush.right {
  align-self: end;
  grid-area: 2/6/3/7;
}

このコードは、それぞれ幅40px、高さ30pxの2つの丸いホップ要素を作成し、薄いピンク色（#f6b9bf）で50%の角丸にします。grid-area プロパティにより、左右のホップ要素を正しいグリッドセルに配置し、align-self と justify-self プロパティにより、ホップ要素をそれぞれのグリッドセル内で整列させます。

これらの手順で、コアラの顔の描画プロジェクトが完了しました。おめでとうございます！

完成した結果を以下に示します。

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるためにLabExでさらに多くの実験を行うことができます。