CSS練習問題　第９回

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

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

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

問題

昨日有給をとった石橋君（ちょっと太った、隣の席の）に、昨日どこ行ったのって聞いてみた。
「ど、どこでもいいだろうー」って焦ってた。（悪いことでもしているのかな？？）
そんな石橋君の携帯の待ち受け画像があきこさん（営業）になっていた！！（な、なんで？？）

そんな石橋君からのお願い。

contentクラスがついている文章部分の文字間隔（縦）を広めにしたい

広めって？？どのくらい？（読みやすくって意味かな？？）

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

<!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>
		.content{
			width: 500px;
			padding: 10px;
			border:1px solid #ccc;
		}
		</style>
	</head>
	<body>
		<div class="continer">
			<span class="lead">今日こそオムライス食べる。</span>
			<div class="content">
				あそこのオムライスは大盛。そう考えられないくらい大盛。<br>
				一度食べると忘れられないくらい、オオモリ！。<br>
				最高！オオモリのオムライス！サイコウ！<br>
				秋葉原は結構大盛りの店が多い！<br>
				メガ盛りというらしい。<br>
				値段もそこそこで、味はおいしい店が多い！<br>
				隣の駅のお茶の水も大盛りの店が多い。<br>
				どちらかというと、お茶の水のほうが好みだ。
			</div>
		</div>
	</body>
</html>

解答例1

[css] .continer .content{
line-height: 40px;
}
[/css]

子セレクターは覚えたはずです。多分。覚えた。
次は、子孫セレクター（難しいこと言った！！）ですよん。
親（class=”continer”) 子(class=”content”) と指定します。（おお、まじめ！）
親と子の間は、半角スペース（ ) を空けます。子セレクターは > （大なり）なのですが、子孫セレクターが半角スペースです。

文字の間隔は、横（letter-spacing）と縦（line-height）があります。
ひと昔前までは、font-size:12px;line-height:16px;みたいのが流行っていました。
最近はディスプレイ一杯に表示し、文字サイズを大きくする傾向があるので、line-heightも大きめに取る傾向があります（ほーー）

解答例2

[css] .continer div{
line-height: 2.5em;
}
[/css]

しつこく子孫セレクターで指定する例を出しました。
line-heightの値で、単位をemにした場合、少数点をつける場合が多いです。(2.5emみたいな）