CSS

CSS実践編① 色・文字・背景・余白・枠線をテスト形式で復習

これまで学んだCSSの基本を、練習問題を解きながら復習しましょう。

今回は、色・文字・背景・余白・枠線 に関する問題を解きながら、実際にコードを書いていきます。

問題を解いたら、すぐに答えを確認して、理解を深めましょう！

準備：HTMLファイルを作成しよう

まず、次のHTMLファイル index.html を作成してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>CSSの基本総復習</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>CSSの基本を復習しよう！</h1>
    <p>この段落の文字サイズを変更しましょう。</p>
    <div>このボックスの背景色を設定してください。</div>
    <ul>
        <li>リストの項目 1</li>
        <li>リストの項目 2</li>
    </ul>
    <button>ボタン</button>
</body>
</html>

このHTMLファイルを作成し、style.css というCSSファイルを作成して、そこに解答を書いていきましょう！

問題1：h1 の文字色を青に変更しよう

問題: h1 の文字色を青にしてください。

CSSに追加するコードを記述してください。

🔎 （分からなければクリック）答えを見る 
h1 {
    color: blue;
}

解説

color プロパティを使うと、文字の色を変更できます。

問題2：p のフォントサイズを 16px にしよう

問題: p の文字サイズを 16px にしてください。

🔎 （分からなければクリック）答えを見る 
p {
    font-size: 16px;
}

解説

font-size を使うと、文字のサイズを指定できます。

問題3：div の背景色を薄い灰色にしよう

問題: div の背景色を薄い灰色（lightgray）にしてください。

🔎 （分からなければクリック）答えを見る 
div {
    background-color: lightgray;
}

解説

background-color を指定すると、要素の背景色を変更できます。

—

問題4：リストのマーカーを消そう

問題: ul のリストマーカーを消してください。

🔎 （分からなければクリック）答えを見る 
ul {
    list-style: none;
}

解説

list-style: none; を指定すると、リストのマーカー（●や1.）が消えます。

問題5：ボタンに枠線を追加しよう

問題: button に枠線を追加してください。

🔎 （分からなければクリック）答えを見る 
button {
    border: 2px solid black;
}

解説

border を指定すると、要素の周りに枠線を追加できます。

まとめ

  • color で文字の色を変更できる。
  • font-size で文字サイズを変更できる。
  • background-color で背景色を指定できる。
  • list-style でリストマーカーを消せる。
  • border で枠線を追加できる。

シェア！

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。