ウェブサイト分析: 複数の詳細情報により、ページをよりエレガントに作成できます

[編集者注] この記事の著者は @EdwardUp です。私たちは、優れた開発者が書いたコードを説明するときに、「すっきりしている」、「読みやすい」、「使いやすい」、「保守しやすい」、「再利用性が高い」などの言葉をよく使います。今では、コードを賞賛するもっと流行りの言葉があります。「エレガンス」です。親しみやすい響きでしょうか?

このページはインターネット製品のプレゼンテーションレベルです。見た目にこだわるだけでなく、インターネット製品の急速に変化するニーズにも対応します。優秀な開発者になるためには経験の蓄積が不可欠であり、経験の一部は作業プロセスの詳細に要約されます。以下は、ページ開発プロセスのさまざまな詳細の紹介です。これらの詳細の説明が、すべてのページ開発者の作業効率を向上させ、よりエレガントな方法でページを作成できるようになることを願っています。

Photoshopから始める

UIデザイン案から静的ページまでの工程は、一般的に「カッティングピクチャー」と呼ばれます。この言葉を聞くと、Photoshop の「スライス ツール」を思い浮かべがちですが、スライス ツールは現在あまり使用されていません。ページ上で必要な視覚要素のほとんどは、1 つまたは複数の個別の画像につなぎ合わせる必要があります。

視覚要素の分離と組み合わせ

急速に更新されるインターネット製品の需要により、UI デザイナーは UI デザイン ドラフトの視覚効果を優先する必要があり、UI デザイン ドラフトのソース ファイルを整理する時間がない場合があります。そのため、取得した UI デザイン ドラフトには、レイヤーの命名が不足していたり​​、グループ化がわかりにくいなどの問題が発生する可能性があります。

分離する必要がある視覚要素が配置されているレイヤーをすばやく見つけるにはどうすればよいでしょうか。このとき、Photoshop の「自動選択」を使用する必要があります。また、一部のエッジ シャドウとハイライトはレイヤー スタイルによって生成されるため、これらの部分を選択するときは、その横にある実際の描画コンテンツを選択する必要があります。

Photoshop の「移動ツール」を使用する場合は、「自動選択」チェックボックスをオンにするだけです。また、レイヤーを自動的に選択するか、レイヤーが属するグループを自動的に選択するかを設定できます。

ステッチングは新しく作成された psd ソース ファイルに対して実行され、名前は最終出力イメージと同じである必要があります。ステッチするときは、グリッドを使用してきれいに配置する必要があります (グリッドの表示を切り替えるには、ショートカット Ctrl + ' を使用します)。すっきりしたパズルは、複数人で編集するのに便利なだけでなく、CSS コードでの背景座標の配置も高速化します (誰もが通常の数字を好みます)。

Photoshop の「編集」→「環境設定」で適切なグリッド サイズを設定できます。

後続の編集を容易にするために、パズルのソース ファイルでは、元の UI デザイン ドラフト レイヤーを適切に保持し (テキスト レイヤーを保持し、後続のテキスト変更を容易にするためにレイヤーを結合しないなど)、レイヤーに適切な名前を付けてグループ化する必要があります。さらに、ベースカラーレイヤーとグリッドサイズ説明レイヤーの 2 つのレイヤーを下部に追加することをお勧めします。

背景レイヤー: 透明な領域を表す Photoshop のデフォルトのグリッド背景 (以前のサイズ識別子の「グリッド」とは異なります) では、サブグリッドの端が見えにくくなります。また、キャンバス全体を覆う背景色により、グリッド線を簡単に識別できます。背景色は通常、純白にすることができます。色が白色の一部 UI 要素については、背景色として黒で塗りつぶすことができます。背景色レイヤーは、要素を配置するための便宜上のものです。画像をエクスポートするときは、エクスポートする前に背景色レイヤーを非表示に設定する必要があります。

グリッド サイズの説明レイヤー: 使用されるグリッド サイズを示すために「20×20」の形式で名前が付けられた空白のレイヤー。このように、複数人で編集する場合、他の人がこのパズルのソース ファイルを編集するのに適したグリッド サイズをすばやく設定できるので便利です。

パズルのソース ファイルは開発ディレクトリに保存する必要があります。images ディレクトリに _psd という名前の別のディレクトリを作成し、関連するパズルのソース ファイルをこのディレクトリに保存することができます。

同様に、静的ページでプレースホルダーやイラストとして使用される一時的な画像 (ユーザー アバターなど) は、_temp という名前のディレクトリに保存できます。

GIF および png-8 画像ノイズ

gif および png-8 形式の画像にフリンジが表示されるのはなぜですか? これは、gif および png-8 形式の画像がインデックス カラー エンコーディングを使用し、インデックス カラーの中には完全に透明なインデックス カラー (完全に透明なピクセル、つまり空白のポイントを描画するために使用される) のみがあり、半透明のインデックス カラーが存在しないためです。ただし、視覚的にスムーズな遷移を実現するために、視覚要素の端には半透明のピクセルが一般的に存在します。これらの半透明のポイントを gif および png-8 で保持する場合は、単色に置き換える必要があります。これが Photoshop のマット オプションの目的です。

Photoshop のこのカラー テーブルを見るとわかるように、完全に透明なインデックス カラーは 1 つだけです。

Photoshop では、マットを「なし」に設定することもできます。この場合、半透明のポイントは破棄され、出力画像には保持されなくなります。エッジには遷移として機能するピクセルがないため、このような画像では目立つギザギザのエッジが発生する可能性がありますが、ほとんどの場合、これは良いアイデアではありません。

「混合エッジ」の横にある小さな矢印をクリックし、ドロップダウン メニューで「なし」を選択します。

マットカラーとして色を選択した場合、Photoshop はインデックスカラーテーブルを生成するときに画像内の半透明ピクセルを考慮し、これらの半透明ピクセルを適切なインデックスカラー (選択したマットカラーを参照) に置き換えます。ノイズ カラーを含む gif および png-8 画像内の視覚要素は、ノイズ カラーと同じ背景色にある場合に最も効果的に機能します。そのため、ノイズ カラーの選択は、最終要素が配置されている背景を参照する必要があります。

背景の種類が複数あり、効果が保証できない場合は、png-24 を使用してください。ここでの png-24 は、実際には基本的に png-32 であり、アルファ チャネルを含める必要があることを意味します。この記述は、Photoshop では png-24 と png-32 を区別するためにチェックボックス設定のみが使用されるためでもあります。

「透明度」をチェックすると、実際にはpng-32が保存されます。

png-32 をサポートしていない IE6 の場合は、IE6 の正常な外観をある程度確保するために、別途 png-8 または効果の低い gif が出力されます。これは、さまざまなブラウザに対する「プログレッシブ エンハンスメント」開発哲学の反映でもあります。

IE6 用に別々に保存された png-8 画像。

HTML でコンテンツを書く

HTMLを書く前に、UIデザインの下書きをよく読む必要があります。一方で、ページのさまざまなコンポーネントと、それらのコンポーネント間の関係を明確にします。一方、ページとそのコンポーネントを分析するには、DOM 構造を使用する必要があります。

ページの DOM 構造は人によって異なります。基本的な観点から言えば、UI デザインの意図を達成できる限り、どのような DOM 構造でも受け入れられます。専門的な観点から見ると、ページの DOM 構造は、共同開発を容易にするために他の開発者が識別して読みやすいだけでなく、その後の追加、削除、更新を容易にするために保守性と拡張性が優れている必要があります。

意味的か非意味的か

「セマンティクス化」とは、HTML を記述する際に、ページの内容に応じて最も適切な HTML タグを選択し、HTML タグの本来の意味を反映させることを意味します。たとえば、<p> はテキストの段落を表します。テキストが実際に段落である場合は、意味のない <div> を使用するのではなく、<p> タグ内に配置する必要があります。

セマンティック化は SEO に有益であるだけでなく、さらに重要なことは、Web ページのコンテンツ階層と構造が明確になり、読みやすさの面で非常にわかりやすくなることです。ページの <em> タグ内のコンテンツが、実際にコンテキストに基づいて強調されたコンテンツである場合を想像してみてください。そのページはすっきりしていて親しみやすいと感じますか?

しかし、意味論は絶対的なものではありません。 Weibo の新しいオフサイト ウィジェットはセマンティクスに従わず、ブロック要素には <div>、リンク以外のインライン要素には <cite>、アイコンには <u> などの限られたタグのみを使用します。集合Weiboコンポーネントの最新の新バージョンを下図に示します。

集合マイクロブログ コンポーネントの新しいバージョンのタイトル部分 (赤で囲まれた部分) のコード:

このようにセマンティクスを無視し、タグの使用を制限するのは、コンポーネント自体のスタイルにおいて、コンポーネントが参照されているサイトのスタイルが干渉されるのを最小限に抑えることを目的としています。めったに使用されないタグです。

これは非セマンティックタグです。このように、タグをセレクターとしてサイトのCSSに記述したスタイルは、コンポーネントにほとんど影響しません（多くのサイトでは直接影響しません）。

リセットやデフォルト スタイルなどの非セマンティック タグ。

完全なクラス名

まず、Firebug を使用して表示される次の HTML コードを見てみましょう。 （開発中のWeiboトピックコンポーネントから抜粋）

何か特別なことが分かりますか? そうです、すべての HTML ノードは、DOM 構造の深さに関係なく、独自のクラス名を持っています。

なぜこれをするのですか?

まず、クラス名が少ないほど、ノード間の関係を通じて正しい HTML ノードのスタイルを設定することも可能であることを明確にする必要があります。これは、過去に HTML を記述する際に使用されていた一般的な方法でもあり、これにより HTML を簡素化できると考えています。確かにその通りですが、合理化された HTML によって CSS のメンテナンスがますます面倒になることを認識する必要があります。

CSS Wizardry の Harry Roberts がこれについて簡単に説明します。

名前のない生徒たちのクラスを管理しようとする教師を想像してください。昔は HTML をこのように書いていました >.<

私が言いたいのは、私たちが人に名前を付けるのと同じように、物事に正確に名前が付けられると物事がずっと簡単になるということです。ちょっと考えてみると、「サトシがいつも連れているポケモン」と言うよりも、「ピカチュウ」と言う方がずっと簡単だということが分かります。さらに重要なのは、ノードの位置が変わると、ノードの位置に基づいた元の書き方は正しくなくなるが、名前を使用するとこの問題は発生しないということです。

作業の一部を HTML に移行し、CSS を簡単にします。あなたがクラスの先生だと想像してください。生徒一人ひとりを表すのに、名前よりも便利なものは何でしょうか?

外観とCSS

CSS 自体は簡単に記述できますが、合理的な CSS アーキテクチャは単純なものではありません。 CSS を保守可能に保つための最も簡単な方法は、CSS の再利用性を追求し、CSS の量を可能な限り減らすことです。

常にCSSコメントを書く

CSS は一般的に読みにくくなるため、より多くの CSS コメントを記述する必要があります。注釈コンテンツは豊富で詳細であるほど良いので、ASCII アートと組み合わせることをお勧めします。時間があれば、1 つの CSS ファイルに目次を記述することもできます。

後から変更を加える場合は、時間やプロジェクト関連の情報を添付することもできるので、複数人での共同作業に非常に便利です。

エレガントなCSSセレクター

エレガントな CSS セレクターは見た目が美しいだけでなく、ブラウザのスタイル レンダリング効率も向上します。

追加の制限なしで、主にクラス名 (CLASS) をセレクターとして使用します。

上の図の次の書き方は、

ラベル要素も有効であり、ラベルは自由に置き換えることができ、スタイルはより効率的にレンダリングされます。

不必要な継承関係を避けてください。継承の目的は、同じ名前のセレクタのスタイル間の相互影響を避けることですが、適度に使用するように注意してください。

ブラウザ スタイル レンダリング エンジンは、CSS セレクターを右から左に解析します。右端のセレクターはキー セレクターと呼ばれます。継承されたセレクターが増えるごとに、スタイル レンダリング エンジンの検索と一致にかかる時間が長くなります。さらに、追加の継承関係がないため、子要素の再利用性が高まります。

要約する

実際の経験では、私たち開発者が従うのは主に「ベストプラクティス」と呼ばれる蓄積された経験の結果です。この「ベスト プラクティス」の概念を念頭に置くことで、良い習慣を身に付け、より自然でエレガントな文章を書くことができるようになります。

すべてのフロントエンド開発者と一緒に進歩することを楽しみにしています!

(この記事のスクリーンショットはPhotoshop、Firebug、Sublime text 2から取得されています)

デザインチーム: Weibo UDC

元のタイトル: ウェブサイト分析: 複数の詳細情報により、ページをよりエレガントに作成できます

キーワード: ウェブサイトの分割、複数、詳細、ヘルプ、あなた、よりエレガントに、ページを書く、編集者、この記事、ウェブマスター、ウェブサイトのプロモーション、お金を稼ぐ