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

[編集者注] この記事の著者は @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) をセレクターとして使用します。

上の図の次の書き方は、

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

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