Tips

CSS練習問題 第9回

CSS練習問題 第9回

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

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

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

問題

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

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

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みたいな)

CSS3

CSS練習問題 第19回

CSS練習問題の19回目となります。 突然HTMLを初めて、何か良くわからいけど、達人になってなんて言われている、新人に送る! 超簡単な練習問題です。 CSSは開発環境など必要ないので、手軽に勉強できます。 ただ、リファレンス集などを見てもなかなか覚えられないので、練習問題にチャレンジしてみましょう
CSS3

CSS練習問題 第18回

CSS練習問題の18回目となります。 突然HTMLを初めて、何か良くわからいけど、達人になってなんて言われている、新人に送る! 超簡単な練習問題です。 CSSは開発環境など必要ないので、手軽に勉強できます。 ただ、リファレンス集などを見てもなかなか覚えられないので、練習問題にチャレンジしてみましょう
CSS3

CSS練習問題 第17回

CSS練習問題の17回目となります。 突然HTMLを初めて、何か良くわからいけど、達人になってなんて言われている、新人に送る! 超簡単な練習問題です。 CSSは開発環境など必要ないので、手軽に勉強できます。 ただ、リファレンス集などを見てもなかなか覚えられないので、練習問題にチャレンジしてみましょう
CSS3

CSS練習問題 第16回

CSS練習問題の16回目となります。 突然HTMLを初めて、何か良くわからいけど、達人になってなんて言われている、新人に送る! 超簡単な練習問題です。 CSSは開発環境など必要ないので、手軽に勉強できます。 ただ、リファレンス集などを見てもなかなか覚えられないので、練習問題にチャレンジしてみましょう
CSS3

CSS練習問題 第15回

CSS練習問題の15回目となります。 突然HTMLを初めて、何か良くわからいけど、達人になってなんて言われている、新人に送る! 超簡単な練習問題です。 CSSは開発環境など必要ないので、手軽に勉強できます。 ただ、リファレンス集などを見てもなかなか覚えられないので、練習問題にチャレンジしてみましょう
CSS3

CSS練習問題 第14回

CSS練習問題の14回目となります。 突然HTMLを初めて、何か良くわからいけど、達人になってなんて言われている、新人に送る! 超簡単な練習問題です。 CSSは開発環境など必要ないので、手軽に勉強できます。 ただ、リファレンス集などを見てもなかなか覚えられないので、練習問題にチャレンジしてみましょう
CSS3

CSS練習問題 第13回

CSS練習問題の13回目となります。 突然HTMLを初めて、何か良くわからいけど、達人になってなんて言われている、新人に送る! 超簡単な練習問題です。 CSSは開発環境など必要ないので、手軽に勉強できます。 ただ、リファレンス集などを見てもなかなか覚えられないので、練習問題にチャレンジしてみましょう
CSS3

CSS練習問題 第12回

CSS練習問題の12回目となります。 突然HTMLを初めて、何か良くわからいけど、達人になってなんて言われている、新人に送る! 超簡単な練習問題です。 CSSは開発環境など必要ないので、手軽に勉強できます。 ただ、リファレンス集などを見てもなかなか覚えられないので、練習問題にチャレンジしてみましょう
CSS3

CSS練習問題 第11回

CSS練習問題の11回目となります。 突然HTMLを初めて、何か良くわからいけど、達人になってなんて言われている、新人に送る! 超簡単な練習問題です。 CSSは開発環境など必要ないので、手軽に勉強できます。 ただ、リファレンス集などを見てもなかなか覚えられないので、練習問題にチャレンジしてみましょう
CSS3

CSS練習問題 第10回

CSS練習問題の10回目となります。 突然HTMLを初めて、何か良くわからいけど、達人になってなんて言われている、新人に送る! 超簡単な練習問題です。 CSSは開発環境など必要ないので、手軽に勉強できます。 ただ、リファレンス集などを見てもなかなか覚えられないので、練習問題にチャレンジしてみましょう

HTML・CSSリファレンス 連載はこちら!

HTML・CSSリファレンス 連載目次

Recent News

Recent Tips

Tag Search