CSS練習問題　第７回

ono

CSS練習問題の７回目となります。
突然HTMLを初めて、何か良くわからいけど、達人になってなんて言われている、新人に送る！
超簡単な練習問題です。

CSSは開発環境など必要ないので、手軽に勉強できます。
ただ、リファレンス集などを見てもなかなか覚えられないので、練習問題にチャレンジしてみましょう！

※この出題形式に関しては答えは１つではありません。
解答例はできるだけ複数載せるつもりですが、問題文の要件を満たしていれば正解として下さい。

問題

石橋君（少し太った、同僚の）が怒って戻ってきた。
「営業は、話分かんないよねー！ぷんぷん！」

（ってお前もたいがいだけどな・・・・）

営業からのお願い。

「あきらめたら、そこで試合終了。」の背景を薄いグレーで、枠線つけて。

怒ってた営業って、あきこさんだよね？ってわかった、わかった。やりますよ。やります。

では、さっそくお願い致します！

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>CSS練習問題 | TECH PJIN</title>
		<meta charset="utf-8">
		<meta name="description" content="CSS練習問題">
		<meta name="author" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!--[if lt IE 9]>
			<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
		<style>
		</style>
	</head>
	<body>
		<div class="continer">
			<span class="lead">今日こそオムライス食べる。</span>
			<p class="subject">あきらめたら、そこで試合終了。</p>
			<p>オムライスはやっぱりケチャップ。</p>
		</div>
	</body>
</html>

解答例1

[css] .continer > .subject{
background-color: #ccc;
border: 1px solid #999;
}
[/css]

クラスセレクタを覚えたはずです。多分。覚えた。
次は、子セレクター（難しいこと言った！！）ですよん。
親（class=”continer”) > 子(class=”subject”) と指定します。（おお、まじめ！）

背景色は、background-color で指定します。カラースキーマー（おお！なんだこの言葉！）があり、red, yellowなど文字でも指定可能です。
枠は、borderで指定します。枠線の太さ、形、色をそれぞれ指定します。

解答例2

[css] .continer > :nth-child(1){
background-color: #efefef;
border: 1px solid #ccc;
}
[/css]

しつこく子セレクターで指定する例を出しました。
疑似クラス（な、なにそれ！！）を利用してみました。親（class=”continer”）には３つの要素（span, p, p）があり、その何番目という指定のしかたです。