前回の 3 回の連載では、9 マスのグリッド レイアウトについて詳しく紹介しました。基本的なレイアウトから始めて、製造プロセスで発生する問題を 1 つずつ説明していきます。これら 3 つの記事はすべて基本原則の説明にすぎません。この原則が正しいかどうかを証明するための強力な適用例はありません。一部のネットユーザーは私に事例を提供するよう求めています。そこで今回は、とてもクールなプレイヤーである九公哥選手のケースを紹介します。
3 回目の記事「3 層の分離を備えた完璧な 9 ゴン グリッド」では、JS を使用して HTML タグをカプセル化し、冗長な構造を減らすことを紹介しましたが、この方法にも欠陥があります。ユーザーが JS を無効にすると、構造が壊れてしまいます。もちろん、今日のインターネット状況では、これは大きな問題ではありませんが、一部の外国の Web ページのデザインを見ると、この考慮が必要です。これには正常なダウングレードと機能の弱体化が必要ですが、結果は JS カプセル化を使用しないのと同じになります。したがって、ケーキを持って食べることはできません。やあ、これらはすべて余談です。クールなプレーヤーの 1 つがどのようにデザインされているかを見てみましょう。
第一印象が第一です。誰もが最初に結果を見たいと思っています。それでは、最初にスクリーンショットを見せましょう。
図1
一般に、このようなカラフルなプレーヤーの場合、幅と高さの値を動的に調整する必要があるため、そのようなグラフィックスに 9 正方形グリッドを使用するのは非常に適切な選択です。
もちろん、その原理については繰り返し説明しません。この応用例は、私の連載記事の「 Unbreakable Nine-Gong Grid Layout 」を参照してください。もちろん、本番環境には、タスクをより適切に完了するのに役立ついくつかのテクニックがまだあります。たとえば、CSS スプライト テクノロジ (私の他の記事「 CSS スプライト画像背景最適化テクノロジ」を参照してください) を使用すると、画像リクエストの数を減らすことができ、一般的に、9 正方形のグリッド レイアウトを持つアプリケーションの場合、より多くの画像が存在します。四隅と四辺を飾るには少なくとも8枚の絵が必要です。したがって、写真の枚数をいかに減らすかはデザイナーが考慮しなければならないことです。
この例では、4 隅の画像を 1 つの画像に結合したので、次のようになります。
図2
上の絵は、皆さんによく見ていただくために、絵の位置決めの原理を応用して、複数の絵のつなぎ目を補助線で描き、四隅を固定しました。これらはスタイル シートで次のように定義されます。
.t_l{ 背景:url(../image/round.gif) 繰り返しなしの左上;}
/*左上隅*/
.t_r{background:url(../image/round.gif) 繰り返しなし右上;}
/*右上隅*/
.b_l{background:url(../image/round.gif) リピートなし左下;}
/*左下隅*/
.b_r{ 背景:url(../image/round.gif) 繰り返しなし右下;}
/*右下隅*/