講義 2: セレクターとプロパティ

この講義では、CSS の構成要素であるセレクターとプロパティについて詳しく説明します。これらは、Web ページ上の特定の要素をターゲットにして効果的にスタイルを設定できるようにするための重要な概念です。

CSS セレクターとは?

CSS セレクターは、スタイルを設定する HTML 要素を選択するために使用されるパターンです。さまざまなタイプのセレクターを使用すると、タグ、クラス、ID、属性などに基づいてさまざまな要素にスタイルを適用できます。

セレクターの種類

1. 要素 (タイプ) セレクター:

   • 特定のタイプのすべての要素をターゲットにします。
   • 例：

    p {
      color: green;
    }
   

   これにより、すべての

   要素の色が緑色に変わります。

2. クラスセレクター:

   • 特定のクラス属性を持つ要素をターゲットにします。
   • 例：

    .highlight {
      background-color: yellow;
    }
   

   HTML では、class="highlight" を持つ要素の背景が黄色になります。
   

    
   This is highlighted text.
   

3. ID セレクター:

   • 一意の ID 属性を持つ単一の要素をターゲットにします。
   • 例：

    #header {
      font-size: 24px;
    }
   

   id="header" を持つ要素のみのフォント サイズは 24px になります。
   

    
   Welcome to My Website
   

4. グループセレクター:

   • 同じスタイルを複数のセレクターに適用します。
   • 例：

    h1, h2, h3 {
      color: blue;
    }
   

   このルールはすべての

   、

   、および

   要素を青色にします。

5. 子孫セレクター:

   • 他の要素（の子孫）内にある要素をターゲットとします。
   • 例：

    div p {
      font-style: italic;
    }
   

   これにより、

   内のすべての

   要素が斜体になります。
   

    
   
      
   This text is italicized because it's inside a div.
    
   

   CSS プロパティを理解する

   CSS プロパティは、選択した要素のどの側面をスタイル設定するかを定義します。各プロパティの後には、目的の結果を指定する値が続きます。

   プロパティの例:

   • 色：

     • 文字の色を設定します。
     • 例：

     h1 {
       color: red;
     }
     

   • 背景色:

     • 背景色を設定します。
     • 例：

     body {
       background-color: #f0f0f0;
     }
     

   • フォントサイズ:

     • テキストのサイズを設定します。
     • 例：

     p {
       font-size: 16px;
     }
     

   • マージン：

     • 要素の外側にスペースを設定します。
     • 例：

     .box {
       margin: 20px;
     }
     

   • パディング:

     • 要素内のコンテンツと境界線の間にスペースを設定します。
     • 例：

     .content {
       padding: 10px;
     }
     

   実践例:

   これまでに学んだことを簡単な例と組み合わせてみましょう。

   HTML:
   

   
     
   Welcome to CSS Basics
     
   This is an introduction to CSS selectors and properties.
     
   Selectors help you target elements, and properties allow you to style them.
   
   

   CSS:
   

   /* ID Selector */
   #container {
     border: 2px solid black;
     padding: 10px;
   }
   
   /* Element Selector */
   h1 {
     color: purple;
   }
   
   /* Class Selector */
   .intro {
     background-color: lightblue;
     font-size: 18px;
   }
   
   /* Group Selector */
   h1, p {
     font-family: Arial, sans-serif;
   }
   
   /* Descendant Selector */
   #container p {
     margin-bottom: 15px;
   }
   

   この例では:

   • #container div は黒い境界線とパディングでスタイル設定されます。

   • 見出しは紫色になります。

   • クラスの紹介を含む段落の背景は水色で、フォント サイズは大きくなっています。

   • 要素と

     要素は両方とも Arial フォントを使用します。

   • #container 内のすべての段落には、スペースを確保するために下余白があります。

   練習問題

   1. 見出し、段落、div を含む単純な HTML ファイルを作成します。
   2. さまざまなセレクターとプロパティを試して、コンテンツのスタイルを設定してください。
   3. 子孫セレクターを使用してネストされた要素のスタイルを試してください。
   4. グループ化セレクターを操作して、複数の要素に同じスタイルを適用します。

   ---

   次のステップ: 次の講義では、CSS ボックス モデル について説明し、余白、境界線、パディング、コンテンツがどのように組み合わされてレイアウトを定義するかを学びます。ウェブ要素。それではまた会いましょう!

   フォローしてください -

   LinkedIn- リドイ・ハサン

   -