良いCSSの書き方-フロントエンドQ&A-php.cn

良いCSSの書き方

PHPz

リリース： 2023-04-06 14:00:30

オリジナル

860 人が閲覧しました

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

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

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

例:

<!DOCTYPE html>
<html>
  <head>
    <title>示例</title>
    <style type="text/css">
      p {
        color: red;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p style="color: blue;">这是一段文字</p>
  </body>
</html>

ログイン後にコピー

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

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

2. セレクターの使用

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

タグセレクター

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

p {
  color: red;
}

ログイン後にコピー

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

クラスセレクター

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

.red {
  color: red;
}

ログイン後にコピー

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

ID セレクター

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

#header {
  background-color: gray;
}

ログイン後にコピー

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

子孫セレクター

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

div p {
  color: red;
}

ログイン後にコピー

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

疑似クラスセレクター

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

a:hover {
  text-decoration: underline;
}

ログイン後にコピー

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

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

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

背景属性

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

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

ログイン後にコピー

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

フォントプロパティ

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

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

ログイン後にコピー

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

Border 属性

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

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

ログイン後にコピー

このスタイルは、<div> 要素の境界線を幅 1 ピクセル、色を #e5e5e5、境界線の角の丸い境界線を 10 ピクセルに設定します。

サイズ属性

サイズ属性は、幅、高さ、外側の間隔、内側の間隔などを含む 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>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 サイトの他の関連記事を参照してください。