Tips

CSS練習問題 第8回
2019.09.04

CSS練習問題 第8回

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

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

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

問題

営業のあきこさんって、うちの上司と付き合っているらしいよ(ウソ)を石橋君(ちょっと太った、隣の席の)に言ってみた。

石橋君は真っ赤な顔をして「そ、そんなことない!」って怒っていた。(惚れてるのか?!)
怒りながら、これやってって。

「あきらめたら、そこで試合終了。」「オムライスはやっぱりケチャップ。」のまわりに枠線つけて、パディング(?)つけて。

パディング??う、うん。わかったよー。(惚れてるな。ほれてる)

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

<!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 > p{
border: 1px solid #999;
padding: 10px;
}
[/css]

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

枠は、borderで指定します。枠線の太さ、形、色をそれぞれ指定します。
padding(パディング)は、枠線の内側にスペースを空けます。

解答例2
[css] .continer > :nth-child(2),
.continer > :nth-child(3){
border: 1px solid #999;
padding: 10px;
}
[/css]

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

複数のセレクターを指定する場合は、カンマ(,)で区切ります。指定が楽だよー。

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