良いCSSの書き方

CSS (Cascading Style Sheets) は、Web ページのレイアウトとスタイルを制御するために使用される言語です。 CSS の書き方は、すべてのフロントエンド開発者が習得する必要があるスキルです。この記事ではCSSの上手な書き方を紹介します。

1. 基本的な構文を理解する

CSS の学習を始める前に、いくつかの基本的な構文を理解する必要があります。 CSSは内部スタイルシート、外部スタイルシート、インラインスタイルシートに分けられます。このうち、内部スタイルシートはHTMLファイルに直接記述され、外部スタイルシートは独立したCSSファイルに記述され、インラインスタイルシートはHTMLタグに直接記述されます。

例:

nbsp;html>

  
    <title>示例</title>
    <style>
      p {
        color: red;
      }
    </style>
    <link>
  
  
    <p>这是一段文字</p>
  

この例では、内部スタイル シートと外部スタイル シートの両方を使用し、インライン スタイル シートも使用します。

CSS 構文は主にセレクターと属性で構成されます。セレクターは HTML 要素を選択するために使用され、属性は要素のスタイルを制御するために使用されます。共通のプロパティには、背景、色、フォント サイズ、境界線、余白などが含まれます。

2. セレクターの使用

セレクターは、CSS の最も基本的な概念の 1 つです。異なるセレクターは異なる HTML 要素を選択できます。一般的なセレクターの一部を次に示します。

1. タグ セレクター

タグ セレクターは、最も一般的に使用されるセレクターの 1 つです。例:

p {
  color: red;
}

このセレクターは、すべての <p></p> 要素を選択します。

2. クラス セレクター

クラス セレクターは . によって識別され、同じクラス名の要素に適用されます。例:

.red {
  color: red;
}

このセレクターは、class="red" を持つすべての HTML 要素を選択します。

3. ID セレクター

ID セレクターは # 番号で識別され、一意の HTML 要素に適用されます。例:

#header {
  background-color: gray;
}

このセレクターは、id="header" を持つ HTML 要素を選択します。

4. 子孫セレクター

子孫セレクターは、スペースを使用して親要素内の子要素を選択します。例:

div p {
  color: red;
}

このセレクターは、

要素内のすべての <p></p> 要素を選択します。

5. 疑似クラス セレクター

疑似クラス セレクターは、特別な状態または位置にある HTML 要素を選択するために使用されます。例:

a:hover {
  text-decoration: underline;
}

このセレクターは、マウスが <a></a> 要素上にあるときの状態を選択します。

3. 共通の属性をマスターする

CSS には多くの属性がありますが、より一般的に使用される属性もあり、それらを十分にマスターする必要があります。以下に一般的な属性をいくつか示します。

1. 背景属性

背景属性は、色、画像、再現性など、要素の背景を制御するために使用されます。例:

body {
  background-color: #f1f1f1;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
}

このスタイルは、background.jpg という名前の背景画像をページの右下隅に配置します。

2. フォント プロパティ

フォント プロパティは、テキストのフォント、フォント サイズ、色などを制御するために使用されます。例:

h1 {
  font-family: Arial;
  font-size: 24px;
  color: #333333;
}

このスタイルは、すべての <h1></h1> タイトル要素のフォントを Arial、フォント サイズを 24px、色を #333333 に設定します。

3. Border 属性

border 属性は、要素の境界線を制御するために使用されます。例:

div {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
}

このスタイルは、

要素の境界線を幅 1 ピクセル、色を #e5e5e5、境界線の角の丸い境界線を 10 ピクセルに設定します。

4. サイズ属性

サイズ属性は、幅、高さ、外側の間隔、内側の間隔などを含む HTML 要素のサイズを制御するために使用されます。例:

img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  padding: 5px;
}

このスタイルでは、すべての画像の幅が 100%、高さが自動的に調整され、外側の下マージンが 10 ピクセル、内側マージンが 5 ピクセルに設定されます。

4. スタイル継承を使用する

CSS でスタイル継承を使用すると、コードの重複が減り、コードの保守性が向上します。例:

body {
  color: #333333;
  font-size: 16px;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

このスタイルは、すべてのテキストの色を #333333 に、フォント サイズを 16 ピクセルに定義します。 <h1></h1>title 要素は同じ色を継承しますが、フォント サイズと太さは異なります。

5. 複合スタイルを使用する

CSS では、複数の属性値を組み合わせて複合スタイルを作成できます。これにより、コードの量が減り、コードがより簡潔になります。例:

border: 1px solid #e5e5e5;

このスタイルは、境界線の幅が 1px、境界線のスタイルが実線、境界線の色が #e5e5e5 という 3 つの属性値で構成される複合スタイルを定義します。

6. CSS プリプロセッサを使用する

CSS プリプロセッサは、CSS コードをより高度な CSS 言語にコンパイルするツールです。これらは変数、関数、ネストなどを含む CSS の機能を拡張し、CSS の作成をより便利かつ高速にします。現在、より一般的な CSS プリプロセッサには、Sass、Less、Stylus などが含まれます。

7. 概要

上記は、CSS を適切に記述するための基本的なポイントです。基本的な構文、セレクター、共通属性、スタイル継承、複合スタイルをマスターすると、簡潔で柔軟で保守が容易な CSS コードを作成できるようになります。

以上が良いCSSの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。