Web-Dev-For-Beginners/translations/ja/3-terrarium/2-intro-to-css/assignment.md

CSSリファクタリング課題

目的

テラリウムプロジェクトをリファクタリングし、レイアウトにFlexboxまたはCSS Gridを使用するように変更します。モダンでレスポンシブなデザインを実現するために、必要に応じてHTMLとCSSを更新してください。ドラッグ可能な要素を実装する必要はありません—レイアウトとスタイリングに集中してください。

手順

1. 新しいバージョンを作成します。FlexboxまたはCSS Gridを使用してレイアウトを更新するために、マークアップとCSSを変更してください。
2. アートと要素が元のバージョンと同じように配置されていることを確認してください。
3. デザインをテストし、少なくとも2つの異なるブラウザ（例: Chrome、Firefox、Edge）で動作を確認してください。
4. 各ブラウザでのテラリウムのスクリーンショットを撮影し、クロスブラウザ互換性を示してください。
5. 更新したコードとスクリーンショットを提出してください。

評価基準

基準	優秀	適切	改善が必要
レイアウト	FlexboxまたはCSS Gridを完全に使用してリファクタリングされており、視覚的に魅力的でレスポンシブ	一部の要素がリファクタリングされており、FlexboxまたはGridが部分的に使用されている	FlexboxまたはGridがほとんど使用されていない、またはレイアウトが変更されていない
クロスブラウザ	複数のブラウザでのスクリーンショットが提供されており、外観が一貫している	1つのブラウザでのスクリーンショットが提供されており、軽微な不一致がある	スクリーンショットがない、または大きな不一致がある
コード品質	整理されたHTML/CSSで、コメントが明確に記載されている	一部整理されているが、コメントが少ない	整理されていないコードで、コメントが不足している

ヒント

• FlexboxとCSS Gridのガイドを確認してください。
• ブラウザの開発者ツールを使用してレスポンシブ性をテストしてください。
• コードにコメントを追加して、分かりやすくしてください。

---

免責事項:
この文書は、AI翻訳サービス Co-op Translator を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてお考えください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解釈について、当方は一切の責任を負いません。