はじめに
このプロジェクトでは、CSS グリッドレイアウトを使ってコアラの顔を作成する方法を学びます。全体的な顔の構造を作成し、目、鼻、ホットピンクの要素を描いて、コアラの顔の特徴を完成させます。
👀 プレビュー
🎯 タスク
このプロジェクトでは、以下を学びます。
- コアラの顔のためのグリッドレイアウトを設定する方法
- コアラの目を描く方法
- コアラの鼻を描く方法
- コアラの顔にホットピンクを描く方法
🏆 成果
このプロジェクトを完了すると、以下ができるようになります。
- CSS グリッドレイアウトを使って複雑なデザインを作成する
- グリッド内のさまざまな要素を配置してスタイルを設定する
border-radiusやbackground-colorなどの CSS プロパティを使って、独自の形状やデザインを作成する
プロジェクトをセットアップする
このステップでは、プロジェクトをセットアップし、エディタでファイルを開きます。
プロジェクトフォルダを開きます。このフォルダには、以下のファイルとディレクトリが含まれています。
├── styles.css
└── index.html
ここで：
index.htmlはメインページです。style.cssは必要なスタイルを追加するファイルです。
WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。
次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。
コアラの顔の各部分の位置については、以下のグリッド図を参照してください。
グリッドレイアウトをセットアップする
このステップでは、コアラの顔のためのグリッドレイアウトを作成する方法を学びます。
- コードエディタで
styles.cssファイルを開きます。 - グリッドレイアウトを作成するために、
.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 行は高さが等しくなっています。
目を描く
このステップでは、コアラの目を描く方法を学びます。
- 目を作成するために、以下の 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 プロパティにより、左右の目を正しいグリッドセルに配置します。
鼻を描く
このステップでは、コアラの鼻を描く方法を学びます。
- 鼻を作成するために、以下の 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 プロパティにより、鼻を正しいグリッドセルに配置します。
ホットピンクを描く
このステップでは、コアラの顔にホップを描く方法を学びます。
- ホップを作成するために、以下の 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 でさらに多くの実験を行うことができます。
