|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "bee6762d4092a13fc7c338814963f980",
|
|
|
"translation_date": "2025-10-24T15:03:43+00:00",
|
|
|
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
|
|
|
"language_code": "ja"
|
|
|
}
|
|
|
-->
|
|
|
# CSSリファクタリング課題
|
|
|
|
|
|
## 目的
|
|
|
|
|
|
あなたのテラリウムプロジェクトをモダンなCSSレイアウト技術を使って変革しましょう！現在の絶対位置指定のアプローチをリファクタリングし、**Flexbox**または**CSS Grid**を実装して、より保守性が高く、レスポンシブなデザインを目指します。この課題では、モダンなCSS標準を適用しながら、テラリウムの視覚的な魅力を維持することが求められます。
|
|
|
|
|
|
異なるレイアウト方法をいつ、どのように使用するかを理解することは、現代のウェブ開発において重要なスキルです。この演習は、従来の位置指定技術と最新のCSSレイアウトシステムを橋渡しするものです。
|
|
|
|
|
|
## 課題の指示
|
|
|
|
|
|
### フェーズ1: 分析と計画
|
|
|
1. **現在のテラリウムコードを確認** - 現在絶対位置指定を使用している要素を特定する
|
|
|
2. **レイアウト方法を選択** - FlexboxまたはCSS Gridのどちらがデザイン目標に適しているかを決定する
|
|
|
3. **新しいレイアウト構造をスケッチ** - コンテナと植物要素がどのように整理されるかを計画する
|
|
|
|
|
|
### フェーズ2: 実装
|
|
|
1. **新しいバージョン**のテラリウムプロジェクトを別のフォルダに作成する
|
|
|
2. **HTML構造を更新** - 選択したレイアウト方法をサポートするように必要に応じて変更する
|
|
|
3. **CSSをリファクタリング** - 絶対位置指定の代わりにFlexboxまたはCSS Gridを使用する
|
|
|
4. **視覚的一貫性を維持** - 植物とテラリウムの瓶が同じ位置に表示されるようにする
|
|
|
5. **レスポンシブな動作を実装** - レイアウトが異なる画面サイズに適応するようにする
|
|
|
|
|
|
### フェーズ3: テストとドキュメント作成
|
|
|
1. **クロスブラウザテスト** - デザインがChrome、Firefox、Edge、Safariで動作することを確認する
|
|
|
2. **レスポンシブテスト** - モバイル、タブレット、デスクトップ画面サイズでレイアウトを確認する
|
|
|
3. **ドキュメント作成** - CSSにレイアウト選択の理由を説明するコメントを追加する
|
|
|
4. **スクリーンショット** - 異なるブラウザと画面サイズでのテラリウムをキャプチャする
|
|
|
|
|
|
## 技術要件
|
|
|
|
|
|
### レイアウトの実装
|
|
|
- **1つ選択**: FlexboxまたはCSS Gridのどちらかを実装（同じ要素に両方を使用しない）
|
|
|
- **レスポンシブデザイン**: 固定ピクセルではなく、相対単位（`rem`、`em`、`%`、`vw`、`vh`）を使用する
|
|
|
- **アクセシビリティ**: 適切なセマンティックHTML構造とaltテキストを維持する
|
|
|
- **コード品質**: 一貫した命名規則を使用し、CSSを論理的に整理する
|
|
|
|
|
|
### モダンCSS機能を含める
|
|
|
```css
|
|
|
/* Example Flexbox approach */
|
|
|
.terrarium-container {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
min-height: 100vh;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.plant-containers {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
width: 100%;
|
|
|
max-width: 1200px;
|
|
|
}
|
|
|
|
|
|
/* Example Grid approach */
|
|
|
.terrarium-layout {
|
|
|
display: grid;
|
|
|
grid-template-columns: 1fr 3fr 1fr;
|
|
|
grid-template-rows: auto 1fr;
|
|
|
min-height: 100vh;
|
|
|
gap: 1rem;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
### ブラウザサポート要件
|
|
|
- **Chrome/Edge**: 最新の2バージョン
|
|
|
- **Firefox**: 最新の2バージョン
|
|
|
- **Safari**: 最新の2バージョン
|
|
|
- **モバイルブラウザ**: iOS Safari、Chrome Mobile
|
|
|
|
|
|
## 提出物
|
|
|
|
|
|
1. **更新されたHTMLファイル** - 改善されたセマンティック構造を含む
|
|
|
2. **リファクタリングされたCSSファイル** - モダンなレイアウト技術を使用
|
|
|
3. **スクリーンショットコレクション** - クロスブラウザ互換性を示す:
|
|
|
- デスクトップビュー (1920x1080)
|
|
|
- タブレットビュー (768x1024)
|
|
|
- モバイルビュー (375x667)
|
|
|
- 少なくとも2つの異なるブラウザ
|
|
|
4. **README.mdファイル** - 以下を記載:
|
|
|
- レイアウト選択（Flexbox vs Grid）とその理由
|
|
|
- リファクタリング中に直面した課題
|
|
|
- ブラウザ互換性に関する注意点
|
|
|
- コードの実行方法
|
|
|
|
|
|
## 評価基準
|
|
|
|
|
|
| 基準 | 優秀 (4) | 適切 (3) | 発展途上 (2) | 初歩的 (1) |
|
|
|
|----------|---------------|----------------|---------------|---------------|
|
|
|
| **レイアウトの実装** | Flexbox/Gridを巧みに使用し、高度な機能を活用; 完全にレスポンシブ | 正確な実装で良好なレスポンシブ動作 | 基本的な実装で小さなレスポンシブ問題あり | 不完全または誤ったレイアウト実装 |
|
|
|
| **コード品質** | クリーンで整理されたCSS; 意味のあるコメントと一貫した命名 | 良好な整理でいくつかのコメントあり | 最低限のコメントで適切に整理 | 整理が不十分で理解が困難 |
|
|
|
| **クロスブラウザ互換性** | 必要なすべてのブラウザで完全な一貫性; スクリーンショットあり | 良好な互換性で小さな違いを記録 | 機能を壊さない程度の互換性問題あり | 重大な互換性問題またはテスト不足 |
|
|
|
| **レスポンシブデザイン** | 優れたモバイルファーストアプローチでスムーズなブレークポイント | 適切なブレークポイントで良好なレスポンシブ動作 | 基本的なレスポンシブ機能でいくつかのレイアウト問題あり | 限定的または壊れたレスポンシブ動作 |
|
|
|
| **ドキュメント作成** | 詳細な説明と洞察を含む包括的なREADME | 必要な要素をすべてカバーする良好なドキュメント | 最低限の説明を含む基本的なドキュメント | 不完全または欠落したドキュメント |
|
|
|
|
|
|
## 参考リソース
|
|
|
|
|
|
### レイアウト方法ガイド
|
|
|
- 📖 [Flexbox完全ガイド](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
|
|
|
- 📖 [CSS Grid完全ガイド](https://css-tricks.com/snippets/css/complete-guide-grid/)
|
|
|
- 📖 [Flexbox vs Grid - 適切なツールを選ぶ](https://blog.webdevsimplified.com/2022-11/flexbox-vs-grid/)
|
|
|
|
|
|
### ブラウザテストツール
|
|
|
- 🛠️ [ブラウザDevToolsレスポンシブモード](https://developer.chrome.com/docs/devtools/device-mode/)
|
|
|
- 🛠️ [Can I Use - 機能サポート](https://caniuse.com/)
|
|
|
- 🛠️ [BrowserStack - クロスブラウザテスト](https://www.browserstack.com/)
|
|
|
|
|
|
### コード品質ツール
|
|
|
- ✅ [CSSバリデーター](https://jigsaw.w3.org/css-validator/)
|
|
|
- ✅ [HTMLバリデーター](https://validator.w3.org/)
|
|
|
- ✅ [WebAIMコントラストチェッカー](https://webaim.org/resources/contrastchecker/)
|
|
|
|
|
|
## ボーナスチャレンジ
|
|
|
|
|
|
🌟 **高度なレイアウト**: FlexboxとGridをデザインの異なる部分で両方実装する
|
|
|
🌟 **アニメーション統合**: 新しいレイアウトに対応するCSSトランジションやアニメーションを追加する
|
|
|
🌟 **ダークモード**: CSSカスタムプロパティを使用したテーマスイッチャーを実装する
|
|
|
🌟 **コンテナクエリ**: コンポーネントレベルのレスポンシブ対応のために最新のコンテナクエリ技術を使用する
|
|
|
|
|
|
> 💡 **覚えておいてください**: 目標は単に動作させることではなく、なぜ選択したレイアウト方法がこの特定のデザイン課題に最適な解決策であるかを理解することです！
|
|
|
|
|
|
---
|
|
|
|
|
|
**免責事項**:
|
|
|
この文書はAI翻訳サービス[Co-op Translator](https://github.com/Azure/co-op-translator)を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書が正式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤認について、当方は責任を負いません。 |
