CSS初心者向け練習問題｜プロパティの基礎から簡単なレイアウト作成まで

はじめに

CSSは、Webページのデザインやレイアウトを整えるために欠かせない技術です。本記事では、CSSの基礎を学べる練習問題を用意しました。初心者向けにわかりやすく解説し、実際のWebページでよく使われるプロパティや技術を中心に学んでいきます。

各問題には解答例を用意していますので、自分の答えと比較しながら理解を深めましょう。さらに、CSSの基本的な書き方や、Webページを美しくするテクニックも取り入れていきます。

練習問題

問題1: テキストの色を変更する

以下のHTMLコードを元に、CSSでテキストの色を「青」に変更してください。

<div class="text">
  CSSで色を変えてみよう！
</div>

ポイント

• colorプロパティは、テキストの色を指定します。
• 色を指定する際には、色名、16進数コード（例: #0000ff）、またはrgb()形式を使用できます

問題2: ボックスの背景色とサイズを指定する

ボックスの背景色を「薄いグレー (#f0f0f0)」にし、幅と高さをそれぞれ100pxに設定してください。

<div class="box">
  ボックスのスタイルを変更しよう！
</div>

ポイント

• CSSのボックスモデルを理解する練習になります。
• 背景色を指定すると、要素の見た目が大きく変わります。

問題3: テキストを中央揃えにする

以下のHTMLを元に、テキストを縦横中央に配置してください。

<div class="center-box">
  中央揃え
</div>

ポイント

• display: flex;を指定すると、子要素を柔軟に配置できます。
• align-itemsとjustify-contentを組み合わせて中央揃えを実現します。

問題4: レスポンシブデザインを作る

幅が768px以下の時に、背景色を「薄い青 (#e0f7fa)」に変えるメディアクエリを追加してください。

<div class="responsive">
  ウィンドウを縮小して確認しよう！
</div>

ポイント

• メディアクエリは、レスポンシブデザインを実現する基本技術です。
• 幅や高さに応じたデザイン変更が可能です。

問題5: 枠線と余白の調整

以下のボックスに、枠線を「赤色・2pxの実線」で追加し、各ボックスの間に10pxの余白を設定してください。

<div class="box-list">
  <div class="box-item">1</div>
  <div class="box-item">2</div>
  <div class="box-item">3</div>
</div>

ポイント

• 枠線はborderプロパティを使用します。
• ボックス間の余白にはmarginプロパティを活用します。

まとめ

CSSの基礎は、Webデザインの重要なスキルです。この問題集を通じて、プロパティやスタイルの設定方法をしっかり学んでいきましょう！コーディングの練習を続けることで、レスポンシブデザインや複雑なレイアウトにも対応できるようになります。

解答例

.text {
  color: blue;
}

.box {
  background-color: #f0f0f0;
  width: 100px;
  height: 100px;
}

.center-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}

@media (max-width: 768px) {
  .responsive {
    background-color: #e0f7fa;
  }
}

.box-list {
  display: flex;
  gap: 10px; /* 余白を設定 */
}

.box-item {
  border: 2px solid red;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
}