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

カテゴリー: 初級タグ: CSS, 基礎練習, 練習問題 2024/12/8 （更新: 2026/4/25）

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;
}

よくある質問（FAQ）

Q. CSS練習問題はHTMLの知識がなくても取り組めますか？

基本的なHTMLタグ（div, p, h1など）の知識があると取り組みやすいです。HTMLの基礎を学んでからCSS練習に進むことをおすすめします。

Q. FlexboxとGrid、どちらを先に学ぶべき？

まずFlexboxから学ぶのがおすすめです。1次元のレイアウト（横並び・縦並び）を理解した上で、2次元レイアウトのGridに進むとスムーズです。

カテゴリー: 初級タグ: CSS, 基礎練習, 練習問題 2024/12/8 （更新: 2026/4/25）