You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
"translation_date": "2025-10-03T09:04:26+00:00",
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
"language_code": "ja"
}
-->
# CSSリファクタリング課題
## 目的
テラリウムプロジェクトをリファクタリングし、レイアウトに**Flexbox**または**CSS Grid**を使用するように変更します。モダンでレスポンシブなデザインを実現するために、必要に応じてHTMLとCSSを更新してください。ドラッグ可能な要素を実装する必要はありません—レイアウトとスタイリングに集中してください。
## 手順
1. ** 新しいバージョンを作成**します。FlexboxまたはCSS Gridを使用してレイアウトを更新するために、マークアップとCSSを変更してください。
2. ** アートと要素が元のバージョンと同じように配置されていることを確認**してください。
3. ** デザインをテスト**し、少なくとも2つの異なるブラウザ（ ）
4. ** 各ブラウザでのテラリウムのスクリーンショットを撮影**し、クロスブラウザ互換性を示してください。
5. ** 更新したコードとスクリーンショットを提出**してください。
## 評価基準
| 基準 | 優秀 | 適切 | 改善が必要 |
|------------|---------------------------------------------------------------------|-------------------------------------|----------------------------------------|
| レイアウト | FlexboxまたはCSS Gridを完全に使用してリファクタリングされており、視覚的に魅力的でレスポンシブ | 一部の要素がリファクタリングされており、FlexboxまたはGridが部分的に使用されている | FlexboxまたはGridがほとんど使用されていない、またはレイアウトが変更されていない |
| クロスブラウザ | 複数のブラウザでのスクリーンショットが提供されており、外観が一貫している | 1つのブラウザでのスクリーンショットが提供されており、軽微な不一致がある | スクリーンショットがない、または大きな不一致がある |
| コード品質 | 整理されたHTML/CSSで、コメントが明確に記載されている | 一部整理されているが、コメントが少ない | 整理されていないコードで、コメントが不足している |
## ヒント
- [Flexbox ](https://css-tricks.com/snippets/css/a-guide-to-flexbox/ )と[CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)のガイドを確認してください。
- ブラウザの開発者ツールを使用してレスポンシブ性をテストしてください。
- コードにコメントを追加して、分かりやすくしてください。
---
** 免責事項**:
この文書は、AI翻訳サービス [Co-op Translator ](https://github.com/Azure/co-op-translator ) を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてお考えください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解釈について、当方は一切の責任を負いません。
