【CSS練習問題】色とスタイルを変更しよう！

※本サイトはアフィリエイトリンクを掲載しています。
CSS

CSSの書き始め方について

CSSを書いたことがないという方に向けて、

まずCSSの反映のさせ方について3種類、ご説明します。

CSSの反映のさせ方

①HTMLファイルに<style></style>を記載してその中にCSSコードを記載する。

②HTMLファイルのタグの中に「style=”CSSのコード”」でCSSを反映させる。

③.cssファイルを作成しHTMLファイルから、そのファイルを読み込んでCSSを反映させる。

 

①HTMLファイルに<style></style>を記載してその中にCSSコードを記載する。

例

index.htmlファイル

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .character-color{
      color:red;
    }
  </style>
</head>
<body>
  <div class="character-color">文字色を赤色にする</div>
</body>
</html>

 

画面

 

②HTMLファイルのタグの中に「style=”CSSのコード”」でCSSを反映させる。

例

index.htmlファイル

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div style="color:red">文字色を赤色にする</div>
</body>
</html>

 

画面

 

③.cssファイルを作成しHTMLファイルから、そのファイルを読み込んでCSSを反映させる。

例

index.htmlファイル

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="character-color">文字色を赤色にする</div>
</body>
</html>

<link rel="stylesheet" href="style.css">のコードでstyle.cssのファイルを読み込んでいます。

ではstyle.cssを作成します。

 

style.css

.character-color {
  color:red;
}

 

画面

 

※①②③どれを使用すれば良いかはケースバイケースですが、一般的にはファイルを分割するやり方をベースにした方が良いです。CSSのコードもかなり長くなることが多いのでファイルを別にした方が管理がしやすくなります。
では、ここからはCSS問題になります。
初歩的なCSSを問題形式にしてみましたので良ければ活用してください。

 

問題1 : 文字色の変更

青色の文字色の文字を画面に表示してください。
参考ソース
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  .character-color{
    color:blue;
  }
  </style>
</head>
<body>
  <div class="character-color">文字色を青色にする</div>
</body>
</html>
文字色のコードは決まっています。
青色は「blue」でも表現できますし、「#00F」でも表現できます。

 

問題2 : 太字

文字を太字にしてください。
参考ソース
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  .character-style{
    font-weight:bold;
  }
  </style>
</head>
<body>
  <div class="character-style">文字を太字にする</div>
</body>
</html>

 

問題3 : 文字の大きさ

文字を標準サイズより大きくしてください。

 

参考ソース(css)

.character {
  font-size : 50px;
}

 

問題4 : 背景色

問題3で作成した「文字」の背景色を変更してください。

 

参考ソース

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .character{
      font-size : 50px;
      background-color : red;
    }
  </style>
</head>
<body>
  <div class="character">文字</div>
</body>
</html>

画面

コメント