15.
idとclassセレクタ
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」のセレクタはどれですか？
- #title
- .title
- title
- id title
問題２
クラス名が「title」のセレクタはどれですか？
- #title
- .title
- title
- id title
問題３
liタグのマーカーを非表示にするCSSはどれですか？
- ul: none;
- li: none;
- list-style: square;
- list-style: none;
問題４
背景色を設定するプロパティはどれですか？
- background
- color
- font-color
- list-style