15. idとclassセレクタ

オンライン教材 > HTML＆CSS超入門

idセレクタ

idセレクタの基本

idセレクタは、# で id名を指定します。

#id名 {

}

id=latest-postsのセレクタは、つぎのようになります。

style.css
#latest-posts {

}

idセレクタの子孫要素

idセレクタの子孫要素を指定するには、半角スペースで区切って子孫セレクタを指定できます。

#id名 子孫セレクタ {

}

id=latest-postsの子孫要素であるulのセレクタ、つぎのようになります。

style.css
#latest-posts ul {

}
index.html
<main id="top">
  <h1>トップページ</h1>
  <!-- id=latest-posts のタグが選択 -->
  <section id="latest-posts">
    <h2>最近の投稿</h2>
    <ul>
       <!-- liタグが選択 -->
       <li>...</li>
       <li>...</li>
       <li>...</li>
    </ul>
  </section>
</main>

list-style

list-styleはマーカを一括設定

list-styleは、リスト先頭のマーカーを一括設定するCSSプロパティです。2つ目以降の値は省略できます。

list-style: list-style-type値 list-style-image値 list-style-position値;

個別の設定

各設定は個別に設定もできます。

list-style-type: 値;
list-style-image: 値;
list-style-position: 値;

マーカーを非表示

リストのマーカーを非表示にするには、list-style-typeの値をnoneに設定します。

style.css
#latest-posts ul {
    list-style: none;
}

リスト表示の中黒が消えました。

結果

その他の設定

list-styleのその他の設定は、MDN:list-styleなどを参考にしてください。

classセレクタ

classセレクタの基本

classセレクタは、.（ピリオド）でクラス名を指定します。

.クラス名 {

}

クラス名がdate-labelのセレクタは、つぎのようになります。

style.html
.date-label {

}
index.html
...
      <h2>最近の投稿</h2>
      <ul>
        <!-- クラス名がdate-labelのタグが選択 -->
        <li><span class="date-label">2022/02/05</span>丸の内でショッピング<span class="new">New!</span></li>
        <!-- クラス名がdate-labelのタグが選択 -->
        <li><span class="date-label">2022/02/03</span>東京駅はレトロな空間</li>
        <!-- クラス名がdate-labelのタグが選択 -->
        <li><span class="date-label">2022/01/10</span>ぶらぶらと散歩でも</li>
        <!-- クラス名がdate-labelのタグが選択 -->
        <li><span class="date-label">2022/01/05</span>このチョコレート、メチャウマ！</li>
        <!-- クラス名がdate-labelのタグが選択 -->
        <li><span class="date-label">2022/01/03</span>多摩川河川敷でサッカー</li>
      </ul>
...

background

背景の設定

backgroundは、HTML要素の背景を一括で設定するCSSプロパティです。

background: 背景設定;

例えば、背景色を設定するには以下のようになります。

background: #c63131;

backgroundプロパティは背景色だけでなく、画像や位置なども設定できます。backgroundの詳細設定は、W3CのMDN: backgroundなどを参考にしてください。

背景色のみの設定

背景色だけ設定したい場合は、background-colorも利用できます。

background-color: 背景色;

classの設定

日付部分のspanタグに、背景色、フォントカラー、フォントサイズを設定します。また、newクラスも追加してフォントカラー、フォントサイズを設定します。

style.css
.date-label {
    background: #c63131;
    color: #ffffff;
    font-size: 0.5rem;
}

.new {
    color: #c63131;
    font-size: 0.7rem;
}

指定したクラスにスタイルが反映されました。

結果

演習

問題１

id名が「title」のセレクタはどれですか？

  1. #title
  2. .title
  3. title
  4. id title

問題２

クラス名が「title」のセレクタはどれですか？

  1. #title
  2. .title
  3. title
  4. id title

問題３

liタグのマーカーを非表示にするCSSはどれですか？

  1. ul: none;
  2. li: none;
  3. list-style: square;
  4. list-style: none;

問題４

背景色を設定するプロパティはどれですか？

  1. background
  2. color
  3. font-color
  4. list-style
<< ブロック要素とインライン要素

HTML＆CSS超入門