メインコンテンツへ移動
黯羽軽揚毎日少しずつ

CSS 応用編

無料2015-03-20#CSS#CSS常识#CSS进阶

本稿は、いくつかの一般的な問題と基本的な常識の整理であり、モバイル端末サポート方案、コーディング基本規則、一般的なデバッグ手順などの内容を含みます

一、スタイルの優先順位##

  1. 具体的であればあるほど優先順位が高くなる
  2. 同一優先順位の場合、後者が前者を上書きする
  3. @import でカスケード導入する場合、早く導入されるほど優先順位が低くなる（ユーザーカスタムスタイルの実装によく使用される。例えば、CMS が提供するテンプレートでユーザーが一部のスタイルをカスタマイズでき、これらのスタイルに最高優先順位が必要）
  4. インラインスタイル > #（id セレクタ） > ./:（クラスセレクタ/疑似クラスセレクタ） > tag/::（タグセレクタ/疑似要素セレクタ）
  5. !important 宣言があるスタイルは最高優先順位を持つ（IE7+ でサポート）

二、モバイルブラウザをサポートする方法##

  1. SSR（小画面レンダリング）：一種のブラウザ機能で、この種のブラウザは自動的にページ表示を最適化できる

欠点：ユーザーが特定のブラウザ（例えば Opera）を使用しないと効果を見ることができず、再レンダリングはアクセス速度を低下させる

長所：ページ設計者は完全に変更を加える必要がない

  1. Reformat（プログラミング再フォーマット）：サーバーサイド技術でページを簡素化し、モバイルユーザー向けに「軽量」ページを生成する

欠点：アクセス速度が低下し、サーバーサイドはページ内容を完璧に制御できない

長所：アクセス速度は SSR より高く、ページ設計者は少しだけ変更すればよい（再フォーマット用の汎用 Reformat メソッドを作成し、すべてのページに適用）

  1. Stylesheets「ポータブル」スタイルシート：media query（メディアクエリ）を利用してレスポンシブレイアウトを構築する

欠点：複数のスタイルシートを保守する必要があり、ページ内容を制御できない

長所：アクセス速度が速く、作業量もそれほど大きくない

  1. Mobile Specific Site（モバイル版サイトの作成）：サイト専用のモバイルバージョンを作成する

欠点：時間と労力がかかり、作業量が大きい

長所：アクセス速度が最も速く、ページ内容とスタイルも自由に制御できる

三、ボックスの崩壊を解消する方法##

  1. 固定高さを宣言する

欠点：拡張性がなく、内容に適応できない

  1. すべての要素をフロートする

欠点：可読性が悪く、保守が容易ではない

  1. ボックスの底部に空の block 要素を追加し、その要素に clear: both; スタイルを適用する

欠点：冗長な要素を導入する

  1. after 疑似要素でフロートをクリアする

  2. overflow: auto; width: 100%;

欠点：ボーダーとマージンを適用できない。そうしないと水平スクロールバーが現れる

四、ネガティブマージン（margin: -100px;）の役割##

主にレイアウト順序とドキュメントソース順序の衝突を解決するために使用される。例えば、HTML 内でナビゲーションバーがコンテンツバーの後にあり、ナビゲーションバーをコンテンツバーの右側ではなく左側に表示したい場合、ナビゲーションバーにネガティブマージンを設定すればよい。ただし、ネガティブマージンは理解しにくいため、使用せざるを得ない場合も詳細なコメントを付ける必要がある。

五、CSS による画像のプリロード##

空の span タグの background-image 属性に画像を持たせて、リアルタイム読み込みの遅延を回避する

六、一般的なロゴ置換方法##

一般的にロゴは画像だが、検索エンジンのクローラープログラムはロゴのセマンティクスを識別できない。SEO のためにロゴとテキスト説明を一緒に表示する必要がある。例えば<h1 style="background-image:url(...)">SiteName</h1>。ただし、この場合ロゴの上にテキストが表示される。解決方法には以下の 2 種類がある：

  1. h1 に padding-top: 100px; スタイルを適用する。ここで 100px は画像の高さ。この方式はよりセマンティックデザインに合致する

  2. h1 に text-indent: -9999em; スタイルを適用する。これはより簡単な方式だが、セマンティックデザインに合致しない

前者はより良い互換性とサポート性を持ち、例えば media="screen" などのフィルタ条件を提供できる

八、スタイルデバッグ手順##

  1. タグとスタイルを検証する

閉じていないタグが存在しないか、HTML と CSS 中のスタイル名が一致しているか

  1. スタイルを無効にする

継承されたスタイルがエラーを引き起こしていないか、より特殊なルールが重要なルールを隠していないか、どのスタイルルールが機能していないか

  1. ハックを無効にする

ハックは正常に動作しているか、またはハックコードに問題がないか

  1. 最小テストブロックに剥离する（可能な限り正確にエラーを特定）

ページ全体はデバッグしにくいため、最小テストブロックを剥离して単独でデバッグする

特に注意：CSS エラーの排查は、既存のスタイルをコメントアウトするのではなく、バックアップスタイルファイルを削除・変更する方がより「安全」

九、font（フォント）関連

###1. 書体の分類（一般的な font ファミリ）###

  1. Serif（font-family:serif;）

特徴：フォントの幅が比例しており、装飾が付いている。比例しているとは、各文字の幅が一致しないこと。M が最も広く、i が最も狭い。装飾とは、筆画の開始・終了部分に小さな装飾があり、可読性を向上させる。Time New Roman、Georgia、Garamond などを含む

用途：通常、大量の本文または長い段落、印刷フォントとして使用され、見出しや副見出しにはあまり使用されない

  1. Sans Serif（font-family:sans-serif）

特徴：幅が比例しているが、装飾がない。Helvetica、Verdana、Arial、Univers などを含む

用途：見出しや副見出しに多く使用される

  1. Monospace（font-family:monospace;）

特徴：等幅フォント。装飾がある場合もある。等幅フォントとは、各文字の幅がすべて同じであることを指す。Courier、Monaco などを含む

用途：主に指示的テキストに使用される。例えばコード

  1. Cursive（font-family:cursive;）

特徴：手書き体（または草書体）。Comic Sans、Zapf Chancery、Zapfino などを含む

用途：可読性は 1 番目と 2 番目より劣り、通常本文の表示には使用されない

  1. Fantasy（font-family:fantasy;）

特徴：主に装飾効果を果たすフォント。Desdemona、Playbill、Herculanum などを含む

用途：この種のフォントはウェブではあまり使用されず、通常ロゴ画像のデザインに使用される

###2. font-family 属性の値について###

フォント名にスペースまたはその他の曖昧な文字が含まれる場合、引用符で囲む必要がある（一重引用符/二重引用符のどちらでも可）。複数の代替フォントを持つこともでき、フォント名の間はカンマで区切る。

###3. font-weight について###

100-900 の数値を使用せず、bold と normal のみを使用する。一部のフォントは 9 レベルの font-weight を持っていない可能性があるため（ユーザーが見るページが設定したフォントであるとは限らず、多くのブラウザはユーザーのカスタムフォント使用をサポートしている）

###4. font-size について###

可能な限り em またはパーセンテージを使用し、62.5% ハックを使用できる。つまり、body に font-size:62.5%; スタイルを追加する。大多数のブラウザのデフォルトは 1em=16px であり、62.5% 後は 1em=10px となり計算しやすい

font-size に px を直接使用しないのは、IE6- が px で font-size を指定したフォントのユーザーによる再設定を許可しないため

十、CSS 常識##

  1. すべてのスタイルシートファイルを同じフォルダに配置する。例えば style/css

  2. スタイルシートファイルを統合する。@import または直接統合

  3. クラスと id 名は一貫した方式を堅持する（またはチームの約定に従う）。例えば class_name、className、class-name など

  4. 単行フォーマットと複数行フォーマットの適用：編集バージョンはデバッグしやすい複数行フォーマットを使用し、リリースバージョンは高速読み込みのための単行圧縮フォーマットを使用

  5. CSS 属性のソートには一定のルールがあるべき。重複を避けるため、例えば辞書順またはその他のルールでソート

  6. CSS 略語を適切に使用する。例えば border: 1px solid red; など。「度」を把握し、構文が複雑すぎて理解しにくくならないようにする

  7. コメントでスタイルをグループ化する。優れたフォーマットがある：/*=group */。等号を検索すればすべての分類が見つかる（CSS ルールには等号が現れないため）

  8. メタデータコメントを追加する。修正と管理を容易にするため、例えばスタイルシートファイルの先頭に作者、日付などの関連説明を追加

  9. コメントでファイル先頭にスタイル中で繰り返し使用される色値、フォントなどの属性値を宣言できる

  10. スタイルシートファイル中の CSS ルールには特定の順序があるべき。例えば一般から特殊へ、ページ中の要素の位置順序、またはコンテンツゾーンでソート。ただし、2 番目の方法は問題を引き起こす可能性がある（ルールが継承/上書きされる）

  11. reset.css/initial.css を使用してスタイルをリセットする。ブラウザのデフォルトスタイルの差異を解消するため

  12. スタイルライブラリを構築したり、独自の CSS フレームワークを実装したりできる。再利用度を向上させるため

  13. カスタムリスト項目記号は li の background を使用する。list-style-image は使用しない。IE6 では list-style-image が li 内容と垂直に整列しないため、背景画像で実装する方が自由度が高く、ブラウザ互換性もより良い

  14. 印刷スタイルシートをインポートする文は、head 内のあらゆるスタイルインポート/宣言部分の後にあるべき。印刷スタイルを先に宣言すると、その後で media 属性を宣言していないスタイルが無視される可能性がある

参考資料：##

『Pro CSS Techniques』（中国語訳名『CSS 実戦精粋』）。翻訳はあまり良くないが、2008 年頃に出版された書籍のため、IE6- の互換デバッグに良い指導的意義がある。

コメント

コメントはまだありません

コメントを書く