デザイナのツールボックス：空白のCSSテンプレート
2008年3月16日chriscoyier％で11のコメント 
場合は、ゼロからのウェブサイトのかなりの数のデザインは、自分と同じセットアップ作業を繰り返し以上の多くのことを見つけるでしょう。 画像のフォルダにディレクトリを作成します。 作成するインデックスファイルを書き込み、コンテンツタイプの宣言は、基本的なページ構造を記述します。 CSSファイルは、CSSをリセットを書く基本的なCSSの構造を記述を作成します。 だけでは、セットアップを実行する時間のまともなチャンクすることができますし、デザインの肉に取得するためのあなたの熱意が見えない。
デザイナのツールボックスの[この次回作では、私たちは空白のCSSのテンプレートを使用したすべての時間の浪費を回避する方法を提供しています。 
ちょうどあなたのシステム上では、新しいプロジェクトを開始、いつでもこのフォルダを維持するだけで、このフォルダを複製することができます実際のコーディングを開始する/設計。
だからあなたに何を得るかもしれない知っているのは、HTMLを見てみましょう：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>PAGE TITLE HERE</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="page-wrap"> </div> <!-- Put Google Analytics Code Here --> </body> </html> ご覧のように、非常に、非常に簡単です。 ページラップ部とこれには、ページの宣言（XHTMLの1.0）、コンテンツタイプの宣言（のUTF - 8）、ページタイトル、スタイルシートのリンク、およびシンプルな構造（本体）。 もしあなたのサイトの訪問ユーザーに関するデータを追跡されるもの下部にあるあなたのトラッキングコードを含めるように小さなメモに含まれます。
今ここにはCSSの：
/* AUTHOR: YOUR NAME HERE you@domain.com */ /* ------------------------------------------ */ /* RESETS, BASIC PAGE SETUP, BASIC TYPOGRAPHY */ /* ------------------------------------------ */ * { margin: 0; padding: 0; } html { overflow-y: scroll; } body { font: 62.5% Helvetica, sans-serif; } ul { list-style: none inside; } p { font: 1.3em/1.3em; margin-bottom: 1.3em; } a { outline: none; } a img { border: none; } /* END RESET */ /* ------------------------------------------ */ /* TOOLBOX CSS */ /* ------------------------------------------ */ .floatleft { float: left; } .floatright { float: right; } .clear { clear: both; } .transpBlack { background: url(transpBlack.png); } /* END TOOLBOX */ /* ------------------------------------------ */ /* PAGE STRUCTURE */ /* ------------------------------------------ */ #page-wrap { width: 775px; margin: 0 auto; } /* END STRUCTURE */ また、非常に、主だけを拡大CSSのリセット簡単です。 スターセレクタ（*）が重いのリセットが解除が言及に余分なタッチのカップルです。 体の62.5％にすると、フォントサイズを設定する場合（px）のサイズをピクセルと同じよう日のサイズを使用することができます。 が1.0日= 10px、1.1em = 11pxなどがあります。 オーバーフロー- Yを、多くのブラウザでは水平方向の中心にジャンプを排除するための垂直スクロールバーを強制的に。
いくつかの単純な"ツールボックスのCSS"浮動小数点のようなもので、クリアで透明な色の領域充填されます。 ページラップCSSを中心にあなたのページのコンテンツが含まれます。
のように多くの作業を保存するこれは間違いなく見えます。 それWordpressのサイト上で使用することはできますか？ 私は、いくつかのプロジェクトが増え続けていると同じようにに来ると、見た目に便利本物。
"必要最小限"のワードプレスのため、エリオットジェイ株式"素っ裸[http://elliotjaystocks.com/blog/archive/2008/free-starkers-wordpress-theme/]"のテーマをチェックアウトするテンプレートです。
デフォルトを持つというテンプレート良いです。 方法は、ここで行ったのではありません。
例えば：*セレクタの下のレンダリングが遅くなります。 また、削除のフォーム入力フィールドからのマージンとパディングしたい特定のOS /ブラウザを再適用することはできません。
オーバーフロー- yもナンセンスですので、あなたのページが常にスクロールされないかもしれませんが、スクロールバーを廃止されたこと（および混乱もある）。
私はまだスターセレクタ上の任意の確固たる証拠が著しくレンダリング減速を参照する必要があります。 以来、星のセレクタの、文字通りのページ上のすべての単一の要素には、自己が適用されます私はそれが若干、疑いはありません。 しかし、私は重大な疑問がわずかに減速さえも非常に複雑なページで顕著ですがあります。
また、マージンとパディングではないの星のセレクタは、デフォルトの入力フィールドを台無しにする、それは、境界線のと、削除されて、どのように国境をここでリセットされないことがわかります。 デフォルトの入力スタイル（）SafariでglowyボタンまたはFFまたはIEのごつごつと斜めのボタンなどはそのまま残ります。 しかし、この方法で、その場合は、メビウスの境界線、これらのデフォルトのスタイルを再適用することはできませんあなたが正しいです。
オーバーフローもナンセンスはyである。 それは、すでに持っていないブラウザでは、空の垂直スクロールバーが適用されます（IEのデフォルトでは、すでにいないこの）。 このような不動産が時折必要に応じて画面を取るかもしれないが、水平方向の中心には扱いにくい"ジャンプ"を排除するときは、ページ間のナビゲーションをスクロールし、ページにはしません。
sofisticated空白のCSSやHTMLのおかげでテンプレートです。 このガイドのお力添えを！
素晴らしい解像度私のようなウェブサイトeditpaddersに！
あなたの有用性を説明してもらえます。transpBlack（background：（学歴transpBlack.png）のURL;）考えたか。
どうしてp用（〜13px）1.3emを使用する必要がありますセレクタのフォントサイズを参照してくださいしないでください。 がある場合は、レンダリングする古いブラウザではClearTypeのまたは類似の関数（特になし）醜いものの、それはフォントの13の規模だ。
、8、10、12、14と16のようにも、数字に動作するようにましだ。 読みやすくする"ファンシーデザイン。 （個人的な意見と、時間の終わりまでと主張することができます）
@フレデリック：私は含まれて使用すると私の"ツールボックス"のCSSの一部として。 これは基本的には1ピクセル単位のアルファ透過PNGのように私は、ボックスに透明な黒の塗りつぶしを適用することができます不透明度属性を使用することなくです。 不透明度も、要素に適用する素晴らしいですまた、不透明度にすべての子要素を強制します。 もし、それらの子要素のテキストを、それは悪いものになることができます。 あなたが透明な背景を適用することができますし、完全に不透明なテキストを保持、この方法です。
@ koew：私は実際にも、ピクセルサイズよりレンダリング気付いていなかった...。 私は、調べてみるつもりだ。
でのフォントの醜さをkoewのコメントが奇数のピクセルサイズは有効な1つ以上のプラットフォームでは、古いブラウザで自分自身の経験に基づいています。
おそらく私のタイムワープで立ち往生だけど、まだ必要な規模の小さい方の端は特にでも、ピクセルサイズを使用するように感じています。
他にも、私がこの非常にテンプレートが役に立つと私はあなたのCSSのトリックのサイトを見つける優れた読み取ることだと思う。 ありがとう、Chris。
乾杯
あなたの素晴らしいアイデアをいただき、ありがとうございます標準のXHTMLとCSSで多くのミスや時間を無駄を避けるために、テンプレート...
私webprojectsも、このアイデアについて考える必要があります
ラルフ
クリス -私はあなたと一緒にユニバーサルセレクタの問題だ。 私はすべてが悪いのは、私はまだ広範囲の問題もなくそれを使用すると確信していない。