要素に名前を付けてスタイルを設定する

要素に名前を付けてスタイルを設定する

idにスタイルを設定する

ここまでは要素自体をセレクタとして直接スタイル設定をしてきたが、複数ある要素(例えばdiv要素)すべてが同じスタイルになってしまう。
同じ要素同士を区別して別のスタイルを適用したい場合、要素に名前を付けて区別する。

  1. 1ページに1箇所だけの場合は【id】を使う
    [HTML]
    <p id="lead">個人的に好きなものをおすすめします</p>
    
    [CSS]
    #lead {
        border-top:#6FBB9A 1px dotted;
        border-bottom:#6FBB9A 1px dotted;
        padding:15px;
        text-align:center;
    }
    idセレクタは「要素名#id」と記述する。
    <p id="lead">の場合は「p#lead」となる。
  2. 1ページに複数ある場合は【class】を使う
    class属性はスタイルを分類するためのものなので、同じ名称を何度使っても構わない。

    [HTML]
    <p class="more">続きを見る</p>
    
    [CSS]
    .more {
        text-align:right;
    }

要素の親子関係を利用してスタイルを設定する

id属性やclass属性で直接名前を付ける以外で、要素の親子関係を利用して場所を絞り込む方法がある。
これを「子孫セレクタ」という。

▼タイトルの★をspan要素で囲む
[HTML]
<h1><span>★</span>おすすめの映画や舞台<span>★</span></h1>

[CSS]
h1 {
    color:#6FBBAA;
    text-align:center;
    font-size:200%;
}

h1 span {
    color:#D0EE55;
}

「h1要素の中のspan要素」のように要素同士の親子関係で場所を特定できる場合には、子孫セレクタを使うことが出来る。
子孫セレクタは「親要素 子要素」というように、外側にある先祖要素から順番に半角スペースでセレクタを区切りながら場所を絞り込んでいく形式で記述する。

色々なセレクタ

  • 3種類のセレクタ
    タイプセレクタ(指定された要素をセレクタとするもの)
    <h1>見出し</h1>
    h1 {color:#FF0000;}
    idセレクタ(id属性で固有名の要素をセレクタするもの)
    <h1 id="foo">見出し</h1>
    h1#foo {color:#FF0000;}
    classセレクタ(class属性で任意の名の要素をセレクタするもの)
    <h1 class="foo">見出し</h1>
    h1.foo {color:#FF0000;}
  • 3つの組み合わせ
    シンプルセレクタ(要素のみ・classのみ・idのみなどの単一セレクタ指定)
    h1 {color:#FF0000;}
    #foo {color:#FF1111;}
    .bar {color:#FF2222;}
    グループセレクタ(複数のセレクタを「カンマ」でつなぐことで一括指定できるセレクタ)
    h1,h2,h3 {color:#FF0000;}
    #foo,#bar {color:#FF1111;}
    .bar,#foo.bar {color:#FF2222;}
    子孫セレクタ(要素の親子関係を利用して選択するセレクタ)
    #foo ul li {color:#FF0000;}
    親要素から順に「半角スペース」で区切る
    
    #foo li {color:#FF1111;}
    目的の要素を特定出来るならば、中間要素は省略可能

今回の出来上がりページ


トラブルが発生した場合はすぐにお電話(050-5532-9970)ください。
迅速なトラブル解決だけでなく、パソコン購入アドバイスもしております。

パソコンレスキュー
三鷹市周辺のパソコン修理・トラブル解決ならお任せください!

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA