【CSS講座⑥】CSSのセレクタ・プロパティ・値をより理解する演習問題

CSSの基本を理解する

CSSの書き方の基本

CSSの書き方の基本は、セレクタ { プロパティ : 値 } です。

例：

1. H2 {
2. color: red;
3. }

• colorプロパティの後に、：（コロン）を付けることを忘れずに
• 値（=red）の後に、；（セミコロン）を付けることを忘れずに
• ｛ から始まり、} で終わることを忘れずに
• セレクタは、タグ名・クラス名・ID名を書いていきます。また、クラス名の場合は”.（ドット）+クラス名”、ID名の場合は”#（シャープ）+ID名”で指定することに注意してください。

1. セレクタとは、スタイルをHTMLのどの要素に適用するのかを決める役割になります。
2. 次のプロパティとは、どんな種類のスタイルを適用するのかを決める役割になります。
3. 最後のバリューとは、どのように適用するか値を決める役割になります。

演習① セレクタ・プロパティ・値を書いてください。

問1-1. H2タグに書かれている文字色を赤にするには、セレクタ・プロパティ・値はどうなるか書いてください。

セレクタ（　　　　　　）プロパティ（　　　　　　）値（　　　　　　）

問1-2. クラス名=(title）のフォントサイズを16pxにするには、セレクタ・プロパティ・値はどうなるか書いてください。

セレクタ（　　　　　　）プロパティ（　　　　　　）値（　　　　　　）

問1-3. DIVタグ内にあるPタグの文字を斜体にするには、セレクタ・プロパティ・値はどうなるか書いてください。

セレクタ（　　　　　　　　　　　）プロパティ（　　　　　　）値（　　　　　　）

演習② 間違っている箇所はどこかな？

問2-1. 間違っている行数と理由をお答えください。

1.  p {
2.   color  red;
3. }

問2-2. 間違っている行数と理由をお答えください。

1.  div {
2.   padding: 10px,0px
3.   margin: 10px;
4. }

問2-3. AタグにPaddingプロパティを使いましたが、余白設定できませんでした。理由をお答えください。

1.  a {
2.   padding: 100px;
3. }

演習③ 装飾した結果、要素はどのように変化するの？

問3-1. H2タグはどのように装飾されますか？

1. h2 {
2.   color: red;
3.   background: blue;
4.   border-left: solid 5px blue;
5. }

問3-2. Pタグはどのように装飾されますか？

1. p {
2.   letter-spacing: 0.12em;
3. }

問3-3. H2タグはどのように装飾されますか？

1. h2::first-letter {
2.   color: red;
3. }

演習④ 要素に対し、指定する装飾をしてください。

4-1. SPANタグで囲まれた文字に対し、取消線を引いてください。

1. <p>通常価格は<span>120円</span>ですが、今回は100円で提供します。</p>

4-2. ボーダーラインは黒・実線・太さは1pxの境界線がないテーブルにしてください。

1. <table>
2.   <tr><th>項目1</th><th>項目2</th></tr>
3.   <tr><td>データ1</td><td>データ2</td></tr>
4. </table>

4-3. DIVタグにカーソルが乗れば、背景色を黄色にしてください。

1. <div>ここにカーソルが乗れば、背景色を黄色にする</div>

回答

（1-1）セレクタ（ H2 ）プロパティ（ color ）値（ red ）

（1-2）セレクタ（ .title ）プロパティ（ font-size）値（ 16px ）

（1-3）セレクタ（ DIV_P ）プロパティ（ font-style）値（ oblique ）

（2-1）colorの後ろに、コロン（：）が付いていません。

（2-2）2行目にセミコロン（；）が付いていません。

（2-3）aタグ、spanタグにpaddingが効かない理由はインライン要素だからです。インライン要素とは要は文章・文字のことです。

（3-1）文字色は赤、背景色は青、左側に実線＋太さ5px＋青の線

（3-2) 文字間隔を0.12emだけ空ける

（3-3）H2タグの先頭文字のみ、文字色を赤にする

（4-1）

1. span {
2.   text-decoration: line-through solid red;
3. }

（4-2）

1. table {
2.   border-collapse: collapse;
3. }
4. table th, table td {
5.   border: solid 1px black;
6. }

（4-3）

1. div:hover {
2.   background: yellow;
3. }