# 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](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) を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてお考えください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解釈について、当方は一切の責任を負いません。