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

CSSCSSBeginner
今すぐ練習

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

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

👀 プレビュー

完成したコアラの顔のデザイン

🎯 タスク

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

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

🏆 成果

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/AdvancedLayoutGroup -.-> css/grid_layout("Grid Layout") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") subgraph Lab Skills css/selectors -.-> lab-300052{{"CSS グリッドを使ってコアラの顔を作成する"}} css/box_model -.-> lab-300052{{"CSS グリッドを使ってコアラの顔を作成する"}} css/borders -.-> lab-300052{{"CSS グリッドを使ってコアラの顔を作成する"}} css/width_and_height -.-> lab-300052{{"CSS グリッドを使ってコアラの顔を作成する"}} css/display_property -.-> lab-300052{{"CSS グリッドを使ってコアラの顔を作成する"}} css/positioning -.-> lab-300052{{"CSS グリッドを使ってコアラの顔を作成する"}} css/grid_layout -.-> lab-300052{{"CSS グリッドを使ってコアラの顔を作成する"}} css/backgrounds -.-> lab-300052{{"CSS グリッドを使ってコアラの顔を作成する"}} end

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

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

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

├── 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-selfjustify-self プロパティにより、ホップ要素をそれぞれのグリッドセル内で整列させます。

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

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

完成イメージ
✨ 解答を確認して練習

まとめ

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