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>
		</div>
	</body>
</html>

解答例1

[css] .lead{
font-size: 2em;
}
[/css]

class=”lead” と記載されているので、クラスセレクタ（難しいこといった！）を利用しています。
クラスセレクタは .（ドット）で始まります。
emを利用しています。フォントの高さを１として、何倍するかを決める単位です。
2emなので、なんと大きさ２倍！２倍！いぇーい！

解答例2

[css] span{
font-size: 32px;
}
[/css]

これを指定して失敗することが良くありますので、ご利用時には、用法・用量を守って正しくご利用下さい。
要素型セレクターを利用しています。spanタグが一杯あると、大変だよー。
pxって相対単位なんですって。知ってました？？
まあ、置いておいて、大抵のブラウザは、14～16pxが標準なので、32pxくらいで大体２倍です。
最近はRWD[レスポンシブ・ウェブ・デザイン]（それっぽい！！）を利用するサイトが多くなったため、emを利用することが多いです。