ビデオ: CSS Efecto - 02 PseudoElementos @JoseCodFacilito 2025
CSS（Cascading Style Sheets）を扱う際に最も混乱する側面の1つは、さまざまな方法でスタイルを書くことができることです。あなたが文法とスペルの基本的な規則を理解しているからといって、文章を書くのと同じように、あなたが簡潔な文章を書くのを習得したわけではありません。
経験豊かなCSSデザイナーは、編集や更新が簡単で簡潔なCSSを作成するためにかなりの時間を費やしています。しかし、CSSを初めて使う人は、必要以上に多くのスタイルを書く傾向があり、冗長スタイルを作成する傾向があります。
<！ - 1 - >冗長コードはWebブラウザにダウンロードするのに時間がかかるだけでなく、後で編集したり改訂したりするのがずっと難しくなります。また、コードが重複するほど、スタイルの競合にぶつかる可能性が高くなります。
きれいで効率的なスタイルを書くための5つのヒントを次に示します。
-
1つあれば2つのスタイルを作成しないでください。 たとえば、見出しのフォントファミリを変更するすべての
タグのタグセレクタを使用してスタイルを作成し、見出しに適用できるクラスセレクタを使用して2番目のスタイルを作成して、色。
しかし、同じスタイルで色とフォントファミリの両方を定義する方が効率的です。スタイルの書式を変更する場合は、いつでも戻ってスタイルを編集して別のルールを追加することができます。
-
16進数のカラーコードを短縮します。 CSSで色を定義するには、16進数のカラーコード全体を含めます。ただし、繰り返しのあるカラーコードを使用する場合は、最初の3文字のみを含める必要があります。たとえば、#ffffffは#fffと同じです。どちらも白を作成します。
<！ - 3 - > -
外部スタイルシートを使用します。 スタイルは、各Webページの上部にある内部スタイルシートに定義することも、スタイルを外部ファイルに保存することもできます。 CSSの拡張機能を使用して、すべてのWebページにそのスタイルシートを添付します。外部スタイルシートは、サイトの一部またはすべてのページで同じスタイルを使用できるため、本質的に効率的です。
たとえば、すべてのメインの見出しを太字、青色、および大きくするスタイルを定義した場合、そのスタイルを外部スタイルシートに保存すると、すべての見出しに同じスタイルを使用できます。その後、見出しを緑色に変更することを後で決めると、1つの外部スタイルシートでスタイルを変更し、すべての見出しを一度に変更できます。
スタイルを内部スタイルシートに保存した場合は、各ファイルの見出しスタイルを編集する必要があります。
-
あなたのスタイルの命名規則を作成します。 クラスセレクタまたはIDセレクタで作成したスタイルには、好きなように名前を付けることができますが、フォーマットとは別の意味を持つスタイルを選択することをお勧めします。たとえば、というスタイルを作成するとします。 redHeadlinesとし、後であなたのすべてを望むことを決定します。 redHeadlinesを青にすると、あなたは青い見出しのスタイルで終わるでしょう。 redHeadlinesまたはスタイルの名前を変更する必要があります。
スタイルの名前を変更すると、元に戻ってそのスタイルを再適用することが含まれます。赤色の見出しがある場合は青色に変えてください。これはスタイルのパワーを無効にしてグローバルな更新を行います。この問題を回避するには、要素の位置や重要度を参照するスタイル名を作成します。 mainHeadlinesまたは。 sidebarHeadlines。
-
* コードをテストし、検証します。 経験豊かなCSSデザイナーでさえ間違いを犯します。そのためDreamweaverには、Webページのコードをテストして検証するためのツールが数多く含まれています。 CSSでよくある間違いをテストしてください。
以下は、CSSコードのエラーをチェックするために使用できる2つのオンラインテストサービスです。これらのサイトのいずれかのアドレス欄にインターネット上のWebページのURLを入力し、[送信]ボタンをクリックすると、コード内のエラーを示すレポートが表示されます。
-
W3C CSS検証サービス XHTML-CSS
-
：有効であるか、または学習を止める
-
