CSSの基本構文

3.1 ルール(Rules)

CSSの基本要素にはルール(rules)、プロパティ(properties)、値(values)が含まれてるよ。CSSの基本構文を理解することは、魅力的で機能的なウェブページを作成するための鍵だね。

CSSの基本要素:

• ルール(Rules)
• セレクタ(Selectors)
• プロパティ(Properties)
• 値(Values)

ルール(Rules)

CSSのルールはセレクタと宣言ブロックで構成されてるよ。セレクタはスタイルが適用されるHTML要素を示し、宣言ブロックには1つ以上のプロパティとその値が含まれてる。通常、1つ以上のプロパティと値が波括弧 {} に囲まれているんだ。

例:

    
      セレクタ {
        プロパティ: 値;
        プロパティ: 値;
      }
    
  

見出しの例:

    
      h1 {
        color: blue;
        font-size: 24px;
      }
    
  

この例では、h1がセレクタで、colorとfont-sizeがプロパティ、blueと24pxがそれぞれの値だね。

3.2 プロパティと値

CSSは要素の外観を管理するために使用できる広範なプロパティセットを提供しているよ。それぞれのプロパティには1つ以上の値があり、このプロパティがどのように適用されるかを決定するんだ。

主なプロパティとその値:

色と背景:

• color: テキストの色を設定する
• background-color: 要素の背景色を設定する

例:

    
      div {
        color: red;
        background-color: yellow;
      }
    
  

フォント:

• font-family: フォントファミリーを定義する
• font-size: フォントサイズを設定する
• font-weight: フォントの太さを定義する

例:

    
      h1 {
        font-family: 'Georgia', serif;
        font-size: 36px;
        font-weight: bold;
      }
    
  

テキスト:

• text-align: 要素内のテキストを整列する
• text-decoration: テキストに下線などの効果を追加する

例:

    
      a {
        text-align: left;
        text-decoration: none;
      }
    
  

余白と境界線:

• margin: 要素の周りの外側の余白を設定する
• padding: 要素内の内側の余白を設定する
• border: 要素の境界線を定義する

例:

    
      .container {
        margin: 0 auto;
        padding: 20px;
        border: 2px solid #000000;
      }
    
  

サイズと位置:

• widthとheight: 要素の幅と高さを設定する
• position: 要素の位置決め方法を定義する

例:

    
      .box {
        width: 200px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 100px;
      }
    
  

あなたが覚えるべきことは:

• 要素の標準的なプロパティを覚えること
• そのプロパティの標準的な値を覚えること
• 異なる要素のユニークなプロパティを覚えること
• これらのプロパティが実際にどのように機能するかを覚えること
• これらのプロパティが互いにどのように影響し合うかを覚えること。

一番の方法は実際に多くのCSSを書いて、それがどのように動作するかを見ることだよ。