My Terrarium
``` **このコードが行うこと:** - **インラインスタイリングを使用して``要素に直接赤色を適用**
- **`style`属性を使用してCSSをHTMLに直接埋め込む**
- **この特定の要素に対して最も優先度の高いスタイルルールを作成**
次に、`style.css`ファイルに以下のルールを追加します:
```css
h1 {
color: blue;
}
```
**上記で行ったこと:**
- **すべての``要素をターゲットにするCSSルールを定義**
- **外部スタイルシートを使用してテキストの色を青に設定**
- **インラインスタイルよりも優先度の低いルールを作成**
✅ **知識チェック**: あなたのウェブアプリではどの色が表示されますか？なぜその色が優先されるのでしょうか？スタイルをオーバーライドしたいシナリオを考えられますか？
> 💡 **CSSの優先順位順（高い順から低い順）:**
> 1. **インラインスタイル**（style属性）
> 2. **ID**（#myId）
> 3. **クラス**（.myClass）と属性
> 4. **要素セレクタ**（h1, div, p）
> 5. **ブラウザのデフォルト**
## CSSの継承を理解する
CSSの継承は遺伝学のようなものです。要素は親要素から特定のプロパティを継承します。例えば、`body`要素にフォントファミリーを設定すると、内部のすべてのテキストが自動的に同じフォントを使用します。それは、ハプスブルク家の特徴的な顎のラインが世代を超えて現れるのと似ています。
ただし、すべてが継承されるわけではありません。フォントや色などのテキストスタイルは継承されますが、マージンやボーダーなどのレイアウトプロパティは継承されません。子供が親の身体的特徴を継承する一方で、ファッションの選択は継承しないのと同じです。
### フォント継承の観察
``要素にフォントファミリーを設定して継承を確認してみましょう:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
```
**ここで何が起こるか:**
- **``要素をターゲットにしてページ全体のフォントファミリーを設定**
- **フォントスタックを使用して、ブラウザ互換性を向上**
- **異なるオペレーティングシステムで見栄えの良いモダンなシステムフォントを適用**
- **特にオーバーライドされない限り、すべての子要素がこのフォントを継承**
ブラウザの開発者ツール（F12）を開き、Elementsタブに移動して``要素を検査してください。`body`からフォントファミリーを継承していることが確認できます:
✅ **実験タイム**: ``に`color`、`line-height`、`text-align`などの他の継承可能なプロパティを設定してみてください。見出しや他の要素に何が起こるか確認してください。
> 📝 **継承可能なプロパティ例**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
>
> **継承されないプロパティ例**: `margin`, `padding`, `border`, `width`, `height`, `position`
## CSSセレクタをマスターする
CSSセレクタは、特定の要素をターゲットにしてスタイリングするための方法です。それは、正確な指示を与えるようなものです。「家」と言う代わりに、「メープルストリートの赤いドアの青い家」と言うような感じです。
CSSはさまざまな方法で特定の要素をターゲットにすることができ、適切なセレクタを選ぶことは、タスクに適したツールを選ぶようなものです。時には近所のすべてのドアをスタイリングする必要があり、時には特定のドアだけをスタイリングする必要があります。
### 要素セレクタ（タグ）
要素セレクタはHTML要素をタグ名でターゲットにします。ページ全体に広く適用される基本スタイルを設定するのに最適です:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #3a241d;
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
```
**これらのスタイルの理解:**
- **`body`セレクタでページ全体のタイポグラフィを統一**
- **ブラウザのデフォルトのマージンとパディングを削除してコントロールを向上**
- **すべての見出し要素を色、配置、間隔でスタイリング**
- **スケーラブルでアクセシブルなフォントサイズのために`rem`単位を使用**
要素セレクタは一般的なスタイリングには適していますが、テラリウム内の植物のような個々のコンポーネントをスタイリングするには、より具体的なセレクタが必要です。
### ユニークな要素用のIDセレクタ
IDセレクタは`#`記号を使用し、特定の`id`属性を持つ要素をターゲットにします。IDはページ内で一意である必要があるため、テラリウムの左側と右側の植物コンテナのような特別な要素をスタイリングするのに最適です。
テラリウムの植物が配置されるサイドコンテナのスタイリングを作成しましょう:
```css
#left-container {
background-color: #f5f5f5;
width: 15%;
left: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#right-container {
background-color: #f5f5f5;
width: 15%;
right: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
```
**このコードが達成すること:**
- **`absolute`位置指定を使用してコンテナを画面の左端と右端に配置**
- **`vh`（ビューポート高さ）単位を使用して画面サイズに適応するレスポンシブな高さを設定**
- **`box-sizing: border-box`を適用してパディングを総幅に含める**
- **ゼロ値から不要な`px`単位を削除してコードをクリーンに**
- **目に優しい微妙な背景色を設定**
✅ **コード品質チャレンジ**: このCSSがDRY（Don't Repeat Yourself）原則に違反していることに気づきましたか？IDとクラスを組み合わせてリファクタリングできますか？
**改善されたアプローチ:**
```html
```
```css
.container {
background-color: #f5f5f5;
width: 15%;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#left-container {
left: 0;
}
#right-container {
right: 0;
}
```
### 再利用可能なスタイル用のクラスセレクタ
クラスセレクタは`.`記号を使用し、複数の要素に同じスタイルを適用するのに最適です。IDとは異なり、クラスはHTML全体で再利用可能で、一貫したスタイリングパターンに理想的です。
テラリウムでは、各植物に似たスタイリングが必要ですが、個別の位置指定も必要です。クラスを共有スタイルに、IDをユニークな位置指定やJavaScriptのインタラクションに使用します。
**各植物のHTML構造:**
```html
```
**重要な要素の説明:**
- **すべての植物に一貫したコンテナスタイリングを適用するために`class="plant-holder"`を使用**
- **共有の画像スタイリングと動作のために`class="plant"`を適用**
- **個別の位置指定とJavaScriptインタラクションのためにユニークな`id="plant1"`を含む**
- **スクリーンリーダーのアクセシビリティのために説明的なaltテキストを提供**
次に、これらのスタイルを`style.css`ファイルに追加します:
```css
.plant-holder {
position: relative;
height: 13%;
left: -0.6rem;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
transition: transform 0.3s ease;
}
.plant:hover {
transform: scale(1.05);
}
```
**これらのスタイルの分解:**
- **`plant-holder`に相対位置指定を作成して位置指定コンテキストを確立**
- **すべての植物ホルダーを高さ13%に設定し、スクロールなしで垂直方向にすべての植物を収める**
- **ホルダーを少し左にシフトして植物をコンテナ内でより中央に配置**
- **`max-width`と`max-height`プロパティを使用して植物をレスポンシブにスケーリング**
- **`z-index`を使用して植物をテラリウム内の他の要素の上にレイヤー化**
- **CSSトランジションを使用して微妙なホバー効果を追加し、ユーザーインタラクションを向上**
✅ **クリティカルシンキング**: なぜ`.plant-holder`と`.plant`セレクタの両方が必要なのでしょうか？1つだけを使用しようとした場合、何が起こるでしょうか？
> 💡 **デザインパターン**: コンテナ（`.plant-holder`）はレイアウトと位置指定を制御し、コンテンツ（`.plant`）は外観とスケーリングを制御します。この分離により、コードがより保守可能で柔軟になります。
## CSS位置指定の理解
CSS位置指定は、舞台監督のようなものです。俳優がどこに立ち、舞台上でどのように動くかを指示します。ある俳優は標準的な配置に従い、他の俳優は特定の位置指定が必要です。
位置指定を理解すれば、多くのレイアウトの課題が管理可能になります。スクロール中に画面上部に固定されるナビゲーションバーが必要ですか？位置指定がそれを解決します。特定の場所に表示されるツールチップが必要ですか？それも位置指定です。
### 5つの位置指定値
| 位置指定値 | 動作 | 使用例 |
|------------|------|--------|
| `static` | デフォルトのフロー、top/left/right/bottomを無視 | 通常のドキュメントレイアウト |
| `relative` | 通常の位置に対して相対的に配置 | 小さな調整、位置指定コンテキストの作成 |
| `absolute` | 最も近い位置指定された祖先に対して配置 | 正確な配置、オーバーレイ |
| `fixed` | ビューポートに対して配置 | ナビゲーションバー、浮動要素 |
| `sticky` | スクロールに応じてrelativeとfixedを切り替え | スクロール時に固定されるヘッダー |
### テラリウムでの位置指定
テラリウムでは、目的のレイアウトを作成するために位置指定タイプを戦略的に組み合わせています:
```css
/* Container positioning */
.container {
position: absolute; /* Removes from normal flow */
/* ... other styles ... */
}
/* Plant holder positioning */
.plant-holder {
position: relative; /* Creates positioning context */
/* ... other styles ... */
}
/* Plant positioning */
.plant {
position: absolute; /* Allows precise placement within holder */
/* ... other styles ... */
}
```
**位置指定戦略の理解:**
- **絶対コンテナ**は通常のドキュメントフローから外れ、画面の端に固定される
- **相対植物ホルダー**はドキュメントフロー内に留まりながら位置指定コンテキストを作成
- **絶対植物**は相対コンテナ内で正確に配置可能
- **この組み合わせ**により、植物が垂直方向に積み重なりながら個別に位置指定可能
> 🎯 **なぜこれが重要か**: 次のレッスンで
テラリウムジャーを一つずつ組み立てていきましょう。各パーツは絶対位置指定とパーセンテージベースのサイズを使用して、レスポンシブデザインを実現します。
```css
.jar-walls {
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
border-radius: 0.5rem 0.5rem 0 0;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0;
left: 25%;
opacity: 0.7;
border-radius: 0 0 0.5rem 0.5rem;
}
.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
```
**テラリウム構造の理解:**
- **使用** パーセンテージベースの寸法で、すべての画面サイズに対応したスケーリングを実現
- **配置** 要素を絶対位置指定で積み重ね、正確に整列
- **適用** 異なる不透明度でガラスの透明感を演出
- **実装** `z-index`を使ったレイヤリングで植物がジャー内に見えるように
- **追加** 微妙なボックスシャドウと洗練されたボーダー半径でリアルな外観を作成
### パーセンテージを使ったレスポンシブデザイン
すべての寸法が固定ピクセル値ではなくパーセンテージを使用している点に注目してください。
**これが重要な理由:**
- **保証** テラリウムがどの画面サイズでも比例してスケールする
- **維持** ジャーの構成要素間の視覚的な関係
- **提供** モバイルから大型デスクトップモニターまで一貫した体験
- **適応** デザインが視覚的なレイアウトを壊すことなく変化に対応
### CSSユニットの活用
ボーダー半径には`rem`ユニットを使用しており、これはルートフォントサイズに相対的にスケールします。これにより、ユーザーのフォント設定を尊重したアクセシブルなデザインが可能になります。[CSS相対ユニット](https://www.w3.org/TR/css-values-3/#font-relative-lengths)について公式仕様で詳しく学べます。
✅ **視覚的な実験**: 以下の値を変更して効果を観察してみましょう:
- ジャーの不透明度を0.5から0.8に変更 – ガラスの外観にどのような影響がありますか？
- 土の色を`#3a241d`から`#8B4513`に変更 – 視覚的な影響はどうなりますか？
- 土の`z-index`を2に変更 – レイヤリングに何が起こりますか？
---
## GitHub Copilot Agent チャレンジ 🚀
Agentモードを使用して以下のチャレンジを完了してください:
**説明:** テラリウムの植物が自然な風の動きをシミュレートして、ゆっくりと揺れるアニメーションを作成します。このチャレンジでは、CSSアニメーション、トランスフォーム、キーフレームを練習しながら、テラリウムの視覚的な魅力を向上させます。
**プロンプト:** 植物が左右に優しく揺れるアニメーションを作成するためにCSSキーフレームアニメーションを追加してください。各植物を少し（2～3度）左と右に回転させる揺れのアニメーションを作成し、`.plant`クラスに適用します。アニメーションは無限ループで、自然な動きを表現するイージング関数を使用してください。
[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)について詳しく学べます。
## 🚀 チャレンジ: ガラスの反射を追加
リアルなガラスの反射を追加してテラリウムをさらに魅力的にしてみませんか？この技術はデザインに深みとリアリズムを加えます。
光がガラス表面に反射する様子をシミュレートする微妙なハイライトを作成します。このアプローチは、ヤン・ファン・エイクのようなルネサンス画家が、描かれたガラスを三次元的に見せるために光と反射を使用した方法に似ています。目指すのは以下のような仕上がりです:
**チャレンジ内容:**
- **作成** ガラスの反射を表現する白または明るい色の楕円形を微妙に配置
- **戦略的に配置** ジャーの左側に反射を配置
- **適用** 適切な不透明度とぼかし効果でリアルな光の反射を演出
- **使用** `border-radius`で有機的で泡のような形状を作成
- **実験** グラデーションやボックスシャドウでリアリズムを向上
## 講義後のクイズ
[講義後のクイズ](https://ff-quizzes.netlify.app/web/quiz/18)
## CSS知識を広げる
CSSは最初は複雑に感じるかもしれませんが、これらの基本概念を理解することで、より高度な技術の基盤を築くことができます。
**次に学ぶべきCSSの分野:**
- **Flexbox** - 要素の整列と分布を簡素化
- **CSS Grid** - 複雑なレイアウトを作成するための強力なツール
- **CSS変数** - 繰り返しを減らし、保守性を向上
- **レスポンシブデザイン** - 異なる画面サイズでサイトが適切に動作することを保証
### インタラクティブな学習リソース
以下の楽しいゲームでこれらの概念を練習してください:
- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - Flexboxを楽しいチャレンジで習得
- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - 仮想のニンジンを育てながらCSS Gridを学ぶ
- 🎯 [CSS Battle](https://cssbattle.dev/) - コーディングチャレンジでCSSスキルをテスト
### 追加学習
CSSの基礎を包括的に学ぶには、以下のMicrosoft Learnモジュールを完了してください: [HTMLアプリをCSSでスタイリングする](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
## 課題
[CSSリファクタリング](assignment.md)
---
**免責事項**:
この文書はAI翻訳サービス[Co-op Translator](https://github.com/Azure/co-op-translator)を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてご参照ください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤認について、当方は一切の責任を負いません。
`要素を検査してください。`body`からフォントファミリーを継承していることが確認できます:
✅ **実験タイム**: ``に`color`、`line-height`、`text-align`などの他の継承可能なプロパティを設定してみてください。見出しや他の要素に何が起こるか確認してください。
> 📝 **継承可能なプロパティ例**: `color`, `font-family`, `font-size`, `line-height`, `text-align`, `visibility`
>
> **継承されないプロパティ例**: `margin`, `padding`, `border`, `width`, `height`, `position`
## CSSセレクタをマスターする
CSSセレクタは、特定の要素をターゲットにしてスタイリングするための方法です。それは、正確な指示を与えるようなものです。「家」と言う代わりに、「メープルストリートの赤いドアの青い家」と言うような感じです。
CSSはさまざまな方法で特定の要素をターゲットにすることができ、適切なセレクタを選ぶことは、タスクに適したツールを選ぶようなものです。時には近所のすべてのドアをスタイリングする必要があり、時には特定のドアだけをスタイリングする必要があります。
### 要素セレクタ（タグ）
要素セレクタはHTML要素をタグ名でターゲットにします。ページ全体に広く適用される基本スタイルを設定するのに最適です:
```css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
h1 {
color: #3a241d;
text-align: center;
font-size: 2.5rem;
margin-bottom: 1rem;
}
```
**これらのスタイルの理解:**
- **`body`セレクタでページ全体のタイポグラフィを統一**
- **ブラウザのデフォルトのマージンとパディングを削除してコントロールを向上**
- **すべての見出し要素を色、配置、間隔でスタイリング**
- **スケーラブルでアクセシブルなフォントサイズのために`rem`単位を使用**
要素セレクタは一般的なスタイリングには適していますが、テラリウム内の植物のような個々のコンポーネントをスタイリングするには、より具体的なセレクタが必要です。
### ユニークな要素用のIDセレクタ
IDセレクタは`#`記号を使用し、特定の`id`属性を持つ要素をターゲットにします。IDはページ内で一意である必要があるため、テラリウムの左側と右側の植物コンテナのような特別な要素をスタイリングするのに最適です。
テラリウムの植物が配置されるサイドコンテナのスタイリングを作成しましょう:
```css
#left-container {
background-color: #f5f5f5;
width: 15%;
left: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#right-container {
background-color: #f5f5f5;
width: 15%;
right: 0;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
```
**このコードが達成すること:**
- **`absolute`位置指定を使用してコンテナを画面の左端と右端に配置**
- **`vh`（ビューポート高さ）単位を使用して画面サイズに適応するレスポンシブな高さを設定**
- **`box-sizing: border-box`を適用してパディングを総幅に含める**
- **ゼロ値から不要な`px`単位を削除してコードをクリーンに**
- **目に優しい微妙な背景色を設定**
✅ **コード品質チャレンジ**: このCSSがDRY（Don't Repeat Yourself）原則に違反していることに気づきましたか？IDとクラスを組み合わせてリファクタリングできますか？
**改善されたアプローチ:**
```html
```
```css
.container {
background-color: #f5f5f5;
width: 15%;
top: 0;
position: absolute;
height: 100vh;
padding: 1rem;
box-sizing: border-box;
}
#left-container {
left: 0;
}
#right-container {
right: 0;
}
```
### 再利用可能なスタイル用のクラスセレクタ
クラスセレクタは`.`記号を使用し、複数の要素に同じスタイルを適用するのに最適です。IDとは異なり、クラスはHTML全体で再利用可能で、一貫したスタイリングパターンに理想的です。
テラリウムでは、各植物に似たスタイリングが必要ですが、個別の位置指定も必要です。クラスを共有スタイルに、IDをユニークな位置指定やJavaScriptのインタラクションに使用します。
**各植物のHTML構造:**
```html
```
**重要な要素の説明:**
- **すべての植物に一貫したコンテナスタイリングを適用するために`class="plant-holder"`を使用**
- **共有の画像スタイリングと動作のために`class="plant"`を適用**
- **個別の位置指定とJavaScriptインタラクションのためにユニークな`id="plant1"`を含む**
- **スクリーンリーダーのアクセシビリティのために説明的なaltテキストを提供**
次に、これらのスタイルを`style.css`ファイルに追加します:
```css
.plant-holder {
position: relative;
height: 13%;
left: -0.6rem;
}
.plant {
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
transition: transform 0.3s ease;
}
.plant:hover {
transform: scale(1.05);
}
```
**これらのスタイルの分解:**
- **`plant-holder`に相対位置指定を作成して位置指定コンテキストを確立**
- **すべての植物ホルダーを高さ13%に設定し、スクロールなしで垂直方向にすべての植物を収める**
- **ホルダーを少し左にシフトして植物をコンテナ内でより中央に配置**
- **`max-width`と`max-height`プロパティを使用して植物をレスポンシブにスケーリング**
- **`z-index`を使用して植物をテラリウム内の他の要素の上にレイヤー化**
- **CSSトランジションを使用して微妙なホバー効果を追加し、ユーザーインタラクションを向上**
✅ **クリティカルシンキング**: なぜ`.plant-holder`と`.plant`セレクタの両方が必要なのでしょうか？1つだけを使用しようとした場合、何が起こるでしょうか？
> 💡 **デザインパターン**: コンテナ（`.plant-holder`）はレイアウトと位置指定を制御し、コンテンツ（`.plant`）は外観とスケーリングを制御します。この分離により、コードがより保守可能で柔軟になります。
## CSS位置指定の理解
CSS位置指定は、舞台監督のようなものです。俳優がどこに立ち、舞台上でどのように動くかを指示します。ある俳優は標準的な配置に従い、他の俳優は特定の位置指定が必要です。
位置指定を理解すれば、多くのレイアウトの課題が管理可能になります。スクロール中に画面上部に固定されるナビゲーションバーが必要ですか？位置指定がそれを解決します。特定の場所に表示されるツールチップが必要ですか？それも位置指定です。
### 5つの位置指定値
| 位置指定値 | 動作 | 使用例 |
|------------|------|--------|
| `static` | デフォルトのフロー、top/left/right/bottomを無視 | 通常のドキュメントレイアウト |
| `relative` | 通常の位置に対して相対的に配置 | 小さな調整、位置指定コンテキストの作成 |
| `absolute` | 最も近い位置指定された祖先に対して配置 | 正確な配置、オーバーレイ |
| `fixed` | ビューポートに対して配置 | ナビゲーションバー、浮動要素 |
| `sticky` | スクロールに応じてrelativeとfixedを切り替え | スクロール時に固定されるヘッダー |
### テラリウムでの位置指定
テラリウムでは、目的のレイアウトを作成するために位置指定タイプを戦略的に組み合わせています:
```css
/* Container positioning */
.container {
position: absolute; /* Removes from normal flow */
/* ... other styles ... */
}
/* Plant holder positioning */
.plant-holder {
position: relative; /* Creates positioning context */
/* ... other styles ... */
}
/* Plant positioning */
.plant {
position: absolute; /* Allows precise placement within holder */
/* ... other styles ... */
}
```
**位置指定戦略の理解:**
- **絶対コンテナ**は通常のドキュメントフローから外れ、画面の端に固定される
- **相対植物ホルダー**はドキュメントフロー内に留まりながら位置指定コンテキストを作成
- **絶対植物**は相対コンテナ内で正確に配置可能
- **この組み合わせ**により、植物が垂直方向に積み重なりながら個別に位置指定可能
> 🎯 **なぜこれが重要か**: 次のレッスンで
テラリウムジャーを一つずつ組み立てていきましょう。各パーツは絶対位置指定とパーセンテージベースのサイズを使用して、レスポンシブデザインを実現します。
```css
.jar-walls {
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}
.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
border-radius: 0.5rem 0.5rem 0 0;
}
.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0;
left: 25%;
opacity: 0.7;
border-radius: 0 0 0.5rem 0.5rem;
}
.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
```
**テラリウム構造の理解:**
- **使用** パーセンテージベースの寸法で、すべての画面サイズに対応したスケーリングを実現
- **配置** 要素を絶対位置指定で積み重ね、正確に整列
- **適用** 異なる不透明度でガラスの透明感を演出
- **実装** `z-index`を使ったレイヤリングで植物がジャー内に見えるように
- **追加** 微妙なボックスシャドウと洗練されたボーダー半径でリアルな外観を作成
### パーセンテージを使ったレスポンシブデザイン
すべての寸法が固定ピクセル値ではなくパーセンテージを使用している点に注目してください。
**これが重要な理由:**
- **保証** テラリウムがどの画面サイズでも比例してスケールする
- **維持** ジャーの構成要素間の視覚的な関係
- **提供** モバイルから大型デスクトップモニターまで一貫した体験
- **適応** デザインが視覚的なレイアウトを壊すことなく変化に対応
### CSSユニットの活用
ボーダー半径には`rem`ユニットを使用しており、これはルートフォントサイズに相対的にスケールします。これにより、ユーザーのフォント設定を尊重したアクセシブルなデザインが可能になります。[CSS相対ユニット](https://www.w3.org/TR/css-values-3/#font-relative-lengths)について公式仕様で詳しく学べます。
✅ **視覚的な実験**: 以下の値を変更して効果を観察してみましょう:
- ジャーの不透明度を0.5から0.8に変更 – ガラスの外観にどのような影響がありますか？
- 土の色を`#3a241d`から`#8B4513`に変更 – 視覚的な影響はどうなりますか？
- 土の`z-index`を2に変更 – レイヤリングに何が起こりますか？
---
## GitHub Copilot Agent チャレンジ 🚀
Agentモードを使用して以下のチャレンジを完了してください:
**説明:** テラリウムの植物が自然な風の動きをシミュレートして、ゆっくりと揺れるアニメーションを作成します。このチャレンジでは、CSSアニメーション、トランスフォーム、キーフレームを練習しながら、テラリウムの視覚的な魅力を向上させます。
**プロンプト:** 植物が左右に優しく揺れるアニメーションを作成するためにCSSキーフレームアニメーションを追加してください。各植物を少し（2～3度）左と右に回転させる揺れのアニメーションを作成し、`.plant`クラスに適用します。アニメーションは無限ループで、自然な動きを表現するイージング関数を使用してください。
[agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode)について詳しく学べます。
## 🚀 チャレンジ: ガラスの反射を追加
リアルなガラスの反射を追加してテラリウムをさらに魅力的にしてみませんか？この技術はデザインに深みとリアリズムを加えます。
光がガラス表面に反射する様子をシミュレートする微妙なハイライトを作成します。このアプローチは、ヤン・ファン・エイクのようなルネサンス画家が、描かれたガラスを三次元的に見せるために光と反射を使用した方法に似ています。目指すのは以下のような仕上がりです:
**チャレンジ内容:**
- **作成** ガラスの反射を表現する白または明るい色の楕円形を微妙に配置
- **戦略的に配置** ジャーの左側に反射を配置
- **適用** 適切な不透明度とぼかし効果でリアルな光の反射を演出
- **使用** `border-radius`で有機的で泡のような形状を作成
- **実験** グラデーションやボックスシャドウでリアリズムを向上
## 講義後のクイズ
[講義後のクイズ](https://ff-quizzes.netlify.app/web/quiz/18)
## CSS知識を広げる
CSSは最初は複雑に感じるかもしれませんが、これらの基本概念を理解することで、より高度な技術の基盤を築くことができます。
**次に学ぶべきCSSの分野:**
- **Flexbox** - 要素の整列と分布を簡素化
- **CSS Grid** - 複雑なレイアウトを作成するための強力なツール
- **CSS変数** - 繰り返しを減らし、保守性を向上
- **レスポンシブデザイン** - 異なる画面サイズでサイトが適切に動作することを保証
### インタラクティブな学習リソース
以下の楽しいゲームでこれらの概念を練習してください:
- 🐸 [Flexbox Froggy](https://flexboxfroggy.com/) - Flexboxを楽しいチャレンジで習得
- 🌱 [Grid Garden](https://codepip.com/games/grid-garden/) - 仮想のニンジンを育てながらCSS Gridを学ぶ
- 🎯 [CSS Battle](https://cssbattle.dev/) - コーディングチャレンジでCSSスキルをテスト
### 追加学習
CSSの基礎を包括的に学ぶには、以下のMicrosoft Learnモジュールを完了してください: [HTMLアプリをCSSでスタイリングする](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
## 課題
[CSSリファクタリング](assignment.md)
---
**免責事項**:
この文書はAI翻訳サービス[Co-op Translator](https://github.com/Azure/co-op-translator)を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてご参照ください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤認について、当方は一切の責任を負いません。