最初からウェブサイトを構築するときは、定義された基本スタイルから始めるのが賢明です。これは、きれいなキャンバスと新鮮なブラシから始まるようなものです。 Webデザイナーが直面する最初の問題の1つは、Webブラウザがすべて異なっていることです。デフォルトのフォントサイズはプラットフォームごとに異なります。デフォルトのフォントファミリは異なります。一部のブラウザではbodyタグに余白やパディングが定義されていますが、そうでないものもあります。 Webページのデフォルトのスタイルを定義して、これらの不一致を回避してください。
CSSと文字セット
まず最初に、CSSドキュメントの文字セットを次のように設定します。 utf-8 。設計したページのほとんどは英語で書かれている可能性がありますが、言語や文化の違いによってローカライズされたものもあります。そうであれば、utf-8はプロセスを単純化します。外部スタイルシートに文字セットを設定することはHTTPヘッダーよりも優先されますが、他のすべての状況ではそうなります。
文字セットを設定するのは簡単です。 CSSドキュメントの最初の行には次のように書いてあります。
@charset "utf-8";
このように、contentプロパティで国際文字を使用するか、クラス名とID名として使用すると、スタイルシートは引き続き正しく動作します。 次にデフォルトスタイルシートに必要なのは、マージン、パディング、およびボーダーをゼロにするスタイルです。これは、すべてのブラウザが同じ場所にコンテンツを配置し、ブラウザとコンテンツの間に隠されたスペースがないことを保証します。ほとんどのWebページでは、これはテキストの端には近すぎますが、そこから開始して、背景イメージとレイアウトの区画が正しく並ぶようにすることが重要です。 html、body { マージン：0px。 パディング：0px。 border：0px; }
デフォルトのフォアグラウンドまたはフォントの色を黒に、デフォルトの背景色を白に設定します。これはほとんどのウェブページのデザインではおそらく変化しますが、本文やHTMLタグにこれらの標準色を設定すると、最初にページを読みやすくして扱いやすくなります。 html、body { 色：＃000; 背景：#fff; } フォントサイズとフォントファミリは、設計が完了してから必然的に変更されるものですが、デフォルトのフォントサイズである1emとArial、Geneva、またはその他のサンセリフフォントのデフォルトのフォントファミリから始まります。 emを使用すると、ページはできるだけアクセシブルに保たれ、sans-serifフォントは画面上で見やすくなります。 html、body、p、th、td、li、dd、dt { フォント：1em Arial、Helvetica、sans-serif; }
テキストがある場所は他にもありますが p , th , td , リ , DD 、および dt ベースフォントを定義するのに適しています。含める HTML そして 体 ちょうどその場合には、HTMLや本文用にフォントを定義するだけで多くのブラウザがフォントの選択を無効にします。 HTML見出しは、サイトの概要を助け、検索エンジンをサイトに深く浸透させるために使用することが重要です。スタイルがなければ、それらはすべてかなり醜いので、それらのすべてにデフォルトスタイルを設定し、それぞれのフォントファミリとフォントサイズを定義します。 h1、h2、h3、h4、h5、h6 { フォントファミリ：Arial、Helvetica、sans-serif; } h1 {font-size：2em; } h2 {font-size：1.5em; } h3 {font-size：1.2em; } h4 {font-size：1.0em; } h5 {font-size：0.9em; } h6 {font-size：0.8em; } リンクカラーのスタイルはほとんどの場合デザインの重要な部分ですが、デフォルトのスタイルでそれらを定義しないと、擬似クラスの少なくとも1つを忘れる可能性があります。青の小さなバリエーションでそれらを定義し、サイトのカラーパレットを定義したら変更してください。 リンクを青色で設定するには、次のように設定します。 この例に示すように： a：リンク{色：＃00f; }a：visited {color：＃009; }a：ホバー{色：＃06f; }a：アクティブ{color：＃0cf; }
かなり無害な配色でリンクをスタイリングすることで、クラスを忘れずに、デフォルトの青、赤、紫より少し小さくすることができます。 ここには完全なスタイルシートがあります： @charset "utf-8"; html、body { マージン：0px。 パディング：0px。 border：0px; 色：＃000; 背景：#fff; } html、body、p、th、td、li、dd、dt { フォント：1em Arial、Helvetica、sans-serif; } h1、h2、h3、h4、h5、h6 { フォントファミリ：Arial、Helvetica、sans-serif; } h1 {font-size：2em; } h2 {font-size：1.5em; } h3 {font-size：1.2em; } h4 {font-size：1.0em; } h5 {font-size：0.9em; } h6 {font-size：0.8em; } a：リンク{色：＃00f; } a：visited {color：＃009; } a：ホバー{色：＃06f; } a：アクティブ{color：＃0cf; } ページ本文のスタイル設定
デフォルトのフォントスタイル
見出し
リンクを忘れないでください
フルスタイルシート
