Tips

CSS練習問題 第6回

CSS練習問題 第6回

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

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

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

問題

少し太った、石橋君(同僚)はどうやら彼女がいるらしい?!
写真見せてよって頼んだら、すごい勢いで「い、いや、いないよー」って、鼻息荒げて否定された。。ぶーーーーーー。
そ、そんなこというなら、ってお願いされた。

「でも、ラーメン食べる。」の文字間隔を少し大きくしてよー。

えっと、お、おう。しゃ、写真みたかったなー。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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>でも、ラーメン食べる。</p>
        </div>
    </body>
</html>
解答例1
[css] .continer > p{
letter-spacing: 2em;
}
[/css]

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

文字の間隔(横)は、letter-spacingで調整します。
今回は2倍にしています。

解答例2
[css] div.continer > p{
letter-spacing: 10px
}
[/css]

しつこく子セレクターで指定する例を出しました。
子セレクター+要素型セレクターの組み合わせはよく使うので、覚えておきましょう(上からだなー)
letter-spacingで指定できる属性は、pxでの指定もできますよん。
少し間隔を離したほうが、読みやすくなります。

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