ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

子セレクタの設定

子セレクタとは

CSSに慣れてくると、「この要素のこの部分にだけスタイルを適用したい」なんて場合がでてきます。

部分的に変更したい場合

例えば、「.sample」というスタイルを作ったとします。

[サンプルCSS]
.sample {
color:#00F;
}

これをそのまま使うと、<div class="sample"></div>で囲まれた範囲内の文字色がすべて#00Fになってしまいます。

[サンプルHTML]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>子孫セレクタの設定</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<div class="sample">
<p>テキストテキスト</p>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
<p>テキストテキスト</p>
</div>

●の範囲の文字色が全て#F00になってしまいます。

</body>
</html>

そこで、「.sample」に子セレクタを追加し、「.sample」の中の<li>だけを違う色に変更してみます。

ちなみに、ベースとなるスタイルにセレクタを追加する親子のような関係から、子セレクタと呼ばれています。

覚えておきたいポイント

子セレクタを使いこなそう!

子セレクタを上手に使えば無駄なスタイルを作らずにすみ、コードもスッキリと軽くなります。
また、よく使われるテクニックの1つでもありますので、使いこなせるように練習しましょう!

子セレクタの使い方

子セレクタを使用するには、セレクタ名に続き、「半角スペース」「子セレクタとなる要素」を記述します。

今回はliだけを違う色に変更するので、.sampleに続いて「半角スペース」「li」を入力します。

[CSSの記述例]
.sample li { ← .sampleの後に、半角スペースを入れliを入力
color:#F00;
}

このように記述することで、「.sampleの中のliだけ、#F00に変更する」スタイルになります。

これをCSSファイルの中に追加で書き加えてみましょう。

.sample {
color:#00F;
}

.sample li {
color:#F00;
}

この状態でブラウザを通して見てみると、「.sample」の中の「li」だけ、#F00になっています。

[表示サンプル]
子セレクタを適用した図

この「子セレクタ」は非常によく使われるテクニックの1つです。

ホームページを作っていると必ず、「この中のここだけ、違うスタイルを適用したい」といった場面が出てきます。
CSSを使いこなす上で欠かせない要素となりますので、シッカリと使いこなせるようになりましょう。

覚えておきたいポイント

こんな使い方も

body p {
color:#F00;
}

このように指定すると、全ページのpだけ、#F00に色を変更することができます。
一度に全てのカラーを変更することができるので、とても便利です。

【STEP.4】表の作成
« 前のページへ 直線・点線などを表示する

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。