コードチャレンジ＃2：CSSBattle.devのより高いスコアのためのヒント

cssbattle.dev：CSSスキルを向上させるための素晴らしい挑戦

コアポイント

• cssbattle.devの課題は、空の出力パネルが本当に空ではないことを覚えているCSSスキルを改善する優れた方法です。要素。
• cssbattleで文字を保存するには、測定単位を慎重に選択し、CSSの「継承」と「特異性」を利用して、最新のブラウザーが短くてわずかに不規則なコードに優しいことを覚えています。
• CSSBattle.devに参加する目的は、悪いコーディングの習慣を奨励することではなく、通常の堅牢な生産コードを書くよりもテスト、実験、最終的にはCSSを深く理解することです。

1週間以上前に2番目のコードチャレンジを開始するのを見たことがあるかもしれません。CSSBattle.devで友人と協力してください。 CSSバトルは比較的新しいコンセプト（4月に立ち上げられたウェブサイト）であり、それがどのように機能するかは必ずしも明らかではありません。

CSSBattleのデフォルトの出力とエディターパネル。

単純にput：

あなたの目標は、HTMLとCSSのみを使用して「ターゲット」画像のコピーを作成することです。

外部画像は使用できません。
• すべてのソリューションは、精度と効率（文字数）に基づいて自動的にスコア付けされます。
• 最高のスコアでターゲット画像を再現するプレーヤーが勝ちます。
このアイデアを初めて見たとき、私は少し信じられないことを認めなければなりません。 「ツイートの長さ」よりも少ないHTMLとCSSを使用して、これらのデザインを作成できるのは誰ですか？これは間違いなく不可能ですよね？
私はそれを試してみましたが、そのほとんどは失敗しましたが、私も何かを手に入れ、徐々に必要なテクニックのいくつかを理解し始めました。あなたが興味があるなら、私はあなたがより高いスコアを得るのを助けるために4つのヒントを紹介すると思います。

私を明確にさせてください：私がこれを書いたとき、私はこの戦いのラウンドで24位にランクされました。私はこれまでのすべての目標を達成し、全体で26位にランクされたので、私よりもはるかに優れた解決策を備えた少なくとも20人または30人のプレイヤーが間違いなくいます。しかし、私は自分の知識を共有し、より良いアイデアを持っている人からのアドバイスを受け入れたいと思います。

ヒント＃1：空の出力パネルは決して実際の空ではありませんターゲットを初めてロードすると、上の画像に似たものが表示されます。編集者は常にサンプルHTMLとCSSが事前に満たされており、基本的な開始位置を提供します。ただし、エディター内のすべての文字を削除しても、出力パネルは技術的には空ではありません。

なぜ？出力パネルのソースコードを確認すると（ヒント：「スライドと比較」関数を最初にオフにします）、2つの目に見えない要素（1つの

下の画像に示すように、それらはCSSの列に存在することがわかります。もちろん、キャラクターを作成するためにキャラクターを使用することなく、これらの2つのHTML要素を自由にスタイリングできます。

スタイルへのHTMLとボディ要素が常にあります。これは、独自のHTML要素を決して追加しないという意味ではありません。

手法＃2：測定単位を慎重に選択 CSSBattleのターゲットは常に幅400px、高さ300pxのターゲットです。そのため、センターポイントを左に正しく説明できます：200px（10文字）およびトップ：150px（9文字）。ただし、その正確な位置は、50％（8文字）とトップ：50％（7文字）として説明できます。これは便利な4文字の節約です。 ただし、パーセンテージは常に勝つとは限りません。ポジショントップ：100px（9文字）はトップに変換されます：33.33％（10文字） - 1ステップバック。最高の一致を見つけるには、多くの試行錯誤が必要です。潜在的に有用な測定単位には、次のものが含まれます

ピクセル：px

パーセンテージ：％

rems：rem

ems：em

• インチ：in
• mm：mm
• ポンド：PC
• ポイント：pt
• ビューポートの高さユニット：vh
• ビューポート幅ユニット：vw
• クォートミリメートル：q
最後のユニットタイプ「Q」 - は、比較的知られていないユニットです。しかし、それはキャラクターだからです - 私はそれがCSSの戦いで非常に便利だと思います。 50pxが53 qに変換されることがわかりました。
• また、ユニットタイプを明示的に宣言しない場合、一部のCSSプロパティはピクセルを参照していると想定していることに注意してください。言い換えれば、幅：80は幅：80pxと同じです。同じことが高さとマージンにも当てはまります。一方、測定単位を宣言しないと、Box-Shadowは完全に失敗します。
• ヒント＃3：CSSはカスケードです - それを最大限に活用してください
• CSSは、「相続」と「特異性」が非常に優れています。継承により、子どもたちは親要素からスタイルを取得できます。 「具体的」とは、幅広いルールが、より慎重または最近宣言されたルールによってカバーされることを意味します。

CSSで最も広いルールは *ワイルドカードであり、「すべての要素に適用される」ことを意味します。したがって、次のルールは、すべてのコンテンツに＃222の背景を適用します。余分なHTMLを追加しない場合、それは

と

です。

より具体的なルールを追加して

のみを見つけると、直接名前を付けることなく

をスタイルするだけです - 3文字を保存します。

さらに一歩進めましょう。

CSSでは、「＆gt;」を意味します。書く場合：

<code>*{background:#222}</code>

…「このルールを他の要素内にある要素にのみ適用する」、つまり子供の要素について話しています。

要素は決して子要素ではないため、のみが2番目のルールを取得します。別のキャラクターを保存しました。

<code>*{background:#222}
body{background:#F2994A}</code>

ヒント＃4：ブラウザは強力です。それらを機能させてください

すべての結果を指先で取得したら、キャラクターをカットする唯一の実用的な方法は、技術的に必要なコードを削除することですが、最終レンダリングには絶対に重要ではありません。最新のブラウザは、短くてわずかに不規則なコードに友好的になると言うかもしれません。これには、以下が含まれますが、これらに限定されません

削除の終わり

削除の終わりhtmlタグ（つまり
• ）
• スタイルブロックの削除の最終終了}
• ほとんどのスペースとキャリッジリターン文字を削除します。ここの試行錯誤はあなたの友達です。

もちろん、生産CSSでこのような極端な最適化を採用することは意味がありません。些細な節約のためのコードの信頼性を妥協します。しかし、CSSBattlesは、ブラウザがどのように考えているか、好きではないものについて詳しく説明します。

それで、cssbattleは悪いコーディングの習慣を奨励していますか？

これが潜在的な欠点であるという言及を聞いた。実際、CSSのベテランであるエリック・マイヤーは最近、この質問をCSSBattle.devスペクトルフィードバックで提起しました：

パーサーの欠陥（特にスペースを分離することについて）を使用して、より低いスコアを意図的に取得することに依存していますか、それとも副作用ですか？ - エリック・マイヤー

そうは思いません。私にとって、それは通常の堅牢な生産コードを書くよりも、テスト、実験、最終的にCSSをより深く理解する方法です。

日本の俳句と比較できます。俳句は、厳格な制限に基づいて構築された形式であり、3行と17音節の制限です。

世界で最も偉大な俳句マスターでさえ、毎日慎重に構築された俳句と話すことも書くことも期待していません。しかし、これは、俳句を読む（または書く）ときに、単語の選択、リズム、バランス、美しさから重要な教訓を学ぶことができないという意味ではありません。

「CSS Battles Code」を書くことは、「制作コード」を書くことと同じではありませんが、他の場所では学ぶことができないコースを教えます。

CSSBattle DEV（FAQ）

に関する FAQ CSSBattle開発者とは何ですか？それはどのように機能しますか？

CSSBattle Devは、開発者がCSSコーディングの課題のために互いに競合できるオンラインプラットフォームです。プラットフォームはターゲット画像を提供し、タスクはHTMLとCSSを使用してコピーすることです。出力がターゲット画像に近いほど、スコアが高くなります。プラットフォームは、出力の精度とコードの長さを考慮した一意のスコアリングシステムを使用します。コードが短いほど、正確になるほど、スコアが高くなります。

CSSBattle開発者のスコアを改善するにはどうすればよいですか？

CSSBattle開発のスコアを改善するには、精度とシンプルさの組み合わせが必要です。出力はターゲット画像にできるだけ近くにある必要があり、コードはできるだけ短くする必要があります。これを行うには、CSSプロパティと値を習得し、異なるCSSプロパティが互いにどのように相互作用するかを理解し、簡潔で効率的なコードを作成する方法を学習します。

CSSBattle開発者をマスターするためのヒントは何ですか？

cssbattle開発の習得には、CSSの練習と詳細な理解が必要です。ここにいくつかのヒントがあります：

1. ボックスモデルの理解：CSSボックスモデルは、レイアウトデザインの基礎です。パディング、ボーダー、マージンがどのように機能するかを理解することが重要です。
2. マスターポジショニング：異なる位置決め値（静的、相対、絶対、固定）が要素の位置にどのように影響するかを理解することで、要素を正確に配置するのに役立ちます。
3. 省略プロパティを使用することを学ぶ：短縮されたプロパティを使用すると、単一の行で複数のプロパティを指定して、より短いクリーンなコードを作成するのに役立ちます。

CSSプロパティと値について詳しく知るにはどうすればよいですか？

CSSプロパティと値を学習するために、オンラインで利用可能な多くのリソースがあります。 MDN Web Docs、CSS-Tricks、W3SchoolsなどのWebサイトは、CSSに関する包括的なガイドとチュートリアルを提供します。さらに、CSSBattle Devのようなプラットフォームでの練習は、実際のシナリオで異なるプロパティと価値がどのように機能するかを理解するのに役立ちます。

CSSに慣れていない場合、CSSBattle Devに参加できますか？

もちろん

！ CSSBattle Devは、初心者がCSSを学び、実践するための優れたプラットフォームです。課題は単純なものから困難なものまでさまざまであるため、単純な課題から始めて、スキルが向上するにつれて、より複雑な課題に向かって徐々に移動できます。

CSSBattle開発の評価システムはどのように機能しますか？

CSSBattle DEVの評価システムは、精度とコードの長さの2つの要因に基づいています。プラットフォームは、出力をターゲット画像と比較し、それらがどれだけうまく一致するかに基づいてスコアを計算します。また、コードの長さを考慮します。コードが短いほど、スコアが高くなります。

CSSBattle開発者の他の参加者のソリューションを見ることができますか？

はい、独自のソリューションを送信した後、他の参加者からソリューションを表示できます。これは、同じ課題を解決するためのさまざまな方法を学ぶための素晴らしい方法であり、コーディングスキルを向上させるのに役立ちます。

CSSBattle開発者で避けるべき一般的な間違いは何ですか？

CSSBattle Devで避けるべき一般的な間違いには、次のものが含まれます。CSSボックスモデルを完全に理解しておらず、短縮特性を使用せず、簡潔にするためにコードを最適化しないことです。また、コードを徹底的にテストして、ターゲット画像を正確にコピーできることを確認することも重要です。

CSSBattle開発者を使用して就職のインタビューの準備はできますか？

はい、CSSBattle Devは就職面接の準備に役立つツールです。問題解決スキルを向上させ、効率的なコードを作成することを学び、CSSをより深く理解するのに役立ちます。ただし、就職のインタビューもWeb開発の他の側面をカバーする可能性があるため、唯一の準備ツールであるべきではないことを忘れないでください。

CSSBattle開発者を介してCSSを学びながらやる気を維持するにはどうすればよいですか？

CSSBattle開発者を使用してCSSを学習することは困難ですが、非常に興味深い場合もあります。プラットフォームの競争の激しい側面は、スキルを向上させるように動機付けます。また、特定のスコアに到達したり、特定の数の課題を完了してやる気を維持するなど、個人的な目標を設定することもできます。 CSS（またはスキル）を習得するための鍵は、実践と忍耐における持続性であることを忘れないでください。

以上がコードチャレンジ＃2：CSSBattle.devのより高いスコアのためのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。