第1章のクイズと実践 - CSSの基本プロパティをマスターしよう

第1章で色々なプロパティを学んだけど、ちゃんと使いこなせているか不安です…

それなら実践的なクイズで確認してみよう！実際のコードを見ながら答える問題だから、本当に理解できているかがわかるよ。

クイズで知識を確認してから、実際にスタイリングできれば完璧ですね！

その通り！クイズで基礎を固めた後は、学んだプロパティを全て使って美しいWebページを作成してみよう。理論と実践の両方で知識を定着させることが大切だからね。

第1章まとめクイズ

第1章の重要ポイントを12問に凝縮した総合クイズだ。基本概念から実践まで、CSS習得に必要な核心部分を網羅しているよ。これまで学んだ内容を思い出しながら挑戦してみよう。

第1章総合まとめクイズ（12問）

CSSの正式名称と基本的な役割として最も適切なものはどれですか？

Computer Style Sheets - データの保存と管理

Cascading Style Sheets - Webページの見た目とデザインを定義

Creative Style System - 画像の編集と加工

Central Server Sheets - サーバーの設定管理

CSSをHTMLに適用する3つの方法のうち、最も推奨される方法はどれですか？

インラインスタイル（style属性に直接記述）

内部スタイルシート（<style>タグ内に記述）

外部スタイルシート（.cssファイルに記述してリンク）

JavaScriptで動的に追加

次のCSSコードで、h1要素を指定しているのは何と呼ばれますか？

h1 {
  color: blue;
  font-size: 32px;
}

プロパティ

値

セレクター

宣言

クラスセレクターとIDセレクターの使い分けとして正しいものはどれですか？

.highlight {
  background-color: yellow;
}

#header {
  background-color: navy;
}

クラスは複数の要素に適用可能、IDは1ページに1回だけ使用

IDは複数の要素に適用可能、クラスは1ページに1回だけ使用

クラスとIDは全く同じで、どちらを使っても良い

IDはJavaScriptでのみ使用し、CSSではクラスのみ使用

次のCSSで、テキストを右揃えにするために使うプロパティと値の組み合わせはどれですか？

text-decoration: right;

text-align: right;

align: right;

position: right;

色の指定方法として正しくないものはどれですか？

/* 例1 */ color: red;
/* 例2 */ color: #ff0000;
/* 例3 */ color: rgb(255, 0, 0);
/* 例4 */ color: color(255, 0, 0);

例1：カラーネーム

例2：16進数カラーコード

例3：RGB形式

例4：color関数

background-imageプロパティで画像を背景に設定する正しい記述はどれですか？

background-image: image.jpg;

background-image: url('image.jpg');

background: 'image.jpg';

background-img: image.jpg;

ボックスモデルにおいて、要素の実際の幅を計算する正しい式はどれですか？

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

実際の幅 = width のみ（200px）

実際の幅 = width + padding（240px）

実際の幅 = width + padding + border（250px）

実際の幅 = width + padding + border + margin（270px）

marginとpaddingの使い分けとして正しい説明はどれですか？

marginは要素の内側の余白、paddingは外側の余白

marginは要素の外側の余白、paddingは内側の余白

marginとpaddingは全く同じもので、どちらを使っても良い

marginは上下、paddingは左右の余白

borderプロパティの一括指定で正しい記述順序はどれですか？

border: color width style;

border: style color width;

border: width style color;

border: width color style;

displayプロパティについて、正しい説明はどれですか？

/* 例1 */
.inline-element {
  display: inline;
}

/* 例2 */
.block-element {
  display: block;
}

inlineは改行されて縦に並び、blockは横に並ぶ

inlineは横に並び、blockは改行されて縦に並ぶ

inlineとblockは見た目の違いがない

inlineは幅と高さを指定でき、blockは指定できない

positionプロパティのstatic、relative、absolute、fixedの説明として正しいものはどれですか？

staticは位置指定なし、relativeは通常位置からの相対位置、absoluteは親要素基準の絶対位置、fixedは画面基準の固定位置

staticは画面基準、relativeは絶対位置、absoluteは相対位置、fixedは通常位置

staticとrelativeは同じ意味で、absoluteとfixedも同じ意味

staticは上、relativeは下、absoluteは左、fixedは右に配置

実践：美しいプロフィールカードを作成しよう

このセクションでは、実際にCSSでスタイリングされたプロフィールカードを作成する手順を学びます。クイズで確認した知識を活用して、美しいデザインを実装してみましょう。

実践ファイルのダウンロード

以下のリンクからファイルをダウンロードし、VS Codeで開いて内容を確認することもできます。

ただし、実際に自分でコードを書いてみることが最も効果的な学習方法なので、以下の手順を参考にぜひ自分で実装してみてください！

CSSファイルの作成手順

まずは、CSSファイルを作成するための手順を確認しましょう。

「CSSを書く準備をしよう」で作成した「css-practice」フォルダーをVS Codeで開きましょう。まだフォルダーがない場合は、デスクトップに作成してね。

VS Codeでcss-practiceフォルダーを開き、chapter1フォルダー内にindex.htmlとstyle.cssを作成した画面

VS Codeの「ファイル」→「フォルダーを開く」でデスクトップの「css-practice」フォルダーを選択してください。
「chapter1」フォルダーを作成します。
「chapter1」フォルダー内に新しいファイル「index.html」を作成します
同じフォルダー内に新しいファイル「style.css」を作成します

第1章で学んだ全てのプロパティを使ったプロフィールカード

クイズお疲れ様！今度は第1章で学んだ全てのプロパティを使って、美しいプロフィールカードを作成してみよう。まずは完成例を見てから、自分で実装してみよう。

プロフィールカードなら、実際のWebサイトでもよく見るやつですね！

コード:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>プロフィールカード</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="profile-card">
            <div class="profile-header">
                <div class="profile-image">AI</div>
                <h1 class="profile-name">田中 太郎</h1>
                <p class="profile-role">Web Developer</p>
            </div>
            
            <div class="profile-body">
                <h2 class="section-title">自己紹介</h2>
                <p class="profile-description">
                    こんにちは！Webデザインとプログラミングが大好きな開発者です。
                    美しく使いやすいWebサイトを作ることを目指しています。
                </p>
                
                <h2 class="section-title">スキル</h2>
                <ul class="skills-list">
                    <li class="skill-item">HTML/CSS</li>
                    <li class="skill-item">JavaScript</li>
                    <li class="skill-item">Responsive Design</li>
                </ul>
                
                <h2 class="section-title">連絡先</h2>
                <div class="contact-info">
                    <p><strong>Email:</strong> taro@example.com</p>
                    <p><strong>GitHub:</strong> github.com/taro</p>
                </div>
            </div>
            
            <div class="profile-footer">
                <button class="btn btn-primary">フォローする</button>
                <button class="btn btn-secondary">メッセージ</button>
            </div>
        </div>
    </div>
</body>
</html>

プレビュー:

新しいタブで開く

実装してみよう

それでは、この完成例を参考に自分で実装してみよう。第1章で学んだ全てのプロパティが使われているから、良い復習になるはずだよ。

色もグラデーションも使われてて、すごく綺麗ですね！自分でも作ってみたいです。

実装手順

HTMLファイルの基本構造作成
- DOCTYPE宣言、html要素にlang属性、headセクションでcharsetとviewportを設定、titleを記述
外部CSSファイルのリンク
- head内にlink要素でstyle.cssを読み込み
HTMLコンテンツの作成：
- 全体を包むcontainerクラスのdiv要素を作成
- カード全体をprofile-cardクラスのdiv要素で囲む
- ヘッダー部分：profile-headerクラスのdiv内に、プロフィール画像用のdiv、h1要素で名前、p要素で役職を配置
- ボディ部分：profile-bodyクラスのdiv内に、自己紹介セクション（h2とp）、スキルセクション（h2とul/li）、連絡先セクション（h2とdiv）を配置
- フッター部分：profile-footerクラスのdiv内に、2つのbutton要素を配置（それぞれbtnクラスとbtn-primary/btn-secondaryクラスを指定）
CSSファイル（style.css）の作成 - リセットスタイル：
- 全要素セレクター（*）でmargin、padding、box-sizingをリセット（詳細は「CSSを書く準備をしよう」を参照）
body要素のスタイル設定：
- font-familyを指定してフォントを設定
- backgroundでlinear-gradientを使用してグリーン系グラデーション背景を設定
- min-heightで最小高さを画面全体に設定
- paddingで余白を確保
コンテナーのスタイル設定：
- widthとmax-widthでカードの幅と最大幅を制限
- marginで中央配置（margin: 0 auto）
プロフィールカードの基本スタイル：
- 背景色を白に設定、border-radiusで角丸、box-shadowで影を追加、overflowを設定
ヘッダー部分のスタイル：
- profile-headerクラスにlinear-gradientでグリーン系グラデーション背景、文字色、text-align、paddingを設定
- profile-imageクラスに幅と高さ、背景色と文字色、border-radiusで円形、text-alignとline-heightで中央配置、フォントサイズと太さ、margin、border、box-shadowを設定
- profile-nameクラスにフォントサイズ、太さ、margin-bottomを設定
- profile-roleクラスにフォントサイズ、opacityを設定
ボディ部分のスタイル：
- profile-bodyクラスにpaddingを設定
- section-titleクラスにフォントサイズと太さ、文字色、margin-bottom、padding-bottom、border-bottomを設定
- profile-descriptionクラスにフォントサイズ、line-height、文字色、margin-bottomを設定
スキルリストのスタイル：
- skills-listクラスでlist-styleを削除、margin-bottomを設定
- skill-itemクラスに背景色、padding、margin-bottom、border-radius、フォントサイズ、文字色、border-leftを設定
連絡先情報のスタイル：
- contact-infoクラスに背景色、padding、border-radius、フォントサイズ、文字色を設定
- contact-info内のp要素にmargin-bottomを設定
- contact-info内のstrong要素に文字色を設定
フッター部分のスタイル：
- profile-footerクラスにpadding、背景色、text-alignで中央配置を設定
ボタンスタイルの実装：
- btnクラスにwidth、padding、margin、border、border-radius、フォントサイズと太さを設定
- btn-primaryクラスに背景色と文字色を設定
- btn-secondaryクラスに背景色、文字色、borderを設定
ブラウザでの動作確認 ファイルを保存してブラウザで開き、レイアウト、色が正しく表示されることを確認

コーディング時の注意点

クラス名の一貫性 BEM（Block Element Modifier）的な命名規則を意識して、関連する要素に統一感のあるクラス名を設定
余白の調整 margin、paddingの値を調整して、要素間の適切な余白を確保
色の統一 グリーン系をアクセントカラーとして統一的に使用
フォントサイズの階層 見出し→サブ見出し→本文のように階層的に設定
box-shadowの活用 立体感を出すために適切な影を追加
グラデーションの方向 linear-gradientの角度で斜め方向のグラデーションを実現
中央配置の方法 margin: 0 autoやtext-align、line-heightを組み合わせて中央配置を実現

使用するプロパティチェックリスト

テキスト装飾 color、font-size、font-weight、font-family、text-align、line-height
色指定 カラーネーム、16進数、RGB、グラデーション（linear-gradient）
背景 background-color、background（グラデーション）
サイズ width、height、max-width、min-height
余白 margin、padding（個別指定と一括指定）
枠線 border、border-radius、border-left、border-bottom、box-shadow
レイアウト display（block、inline、inline-block）、position（static、relative、absolute、fixed）
リスト list-style
透明度 opacity
その他 overflow

実装完了後のチェックリスト

HTML基本構造 DOCTYPE宣言、適切なlang属性、charset・viewport設定が正しく記述されている
CSS外部ファイルリンク link要素でstyle.cssが正しく読み込まれている
リセットスタイル 全要素のmargin、paddingがリセットされている
グラデーション背景 bodyとヘッダーに適切なlinear-gradientが設定されている
中央配置 margin: 0 autoでカードが画面中央に配置されている
カードデザイン 白背景、角丸（border-radius）、影（box-shadow）が設定されている
プロフィール画像 円形（border-radius: 50%）、text-alignとline-heightで中央配置、適切なサイズとスタイル
テキストスタイル font-size、font-weight、colorが階層的に設定されている
セクション区切り border-bottomでセクションタイトルが視覚的に区切られている
スキルリスト list-style: noneで箇条書きマーカーを削除、左ボーダーでアクセント
余白の一貫性 margin、paddingが統一感を持って設定されている
ボタンスタイル プライマリ・セカンダリボタンが適切に区別され、width、marginで横並び配置
ブラウザ表示確認 各要素が期待通りに表示されている

学習効果を高めるポイント

段階的実装 HTMLを先に完成させてからCSSを追加することで、構造とスタイルの分離を体感
プロパティの理解 各CSSプロパティを追加する際に、どのような効果があるかを確認しながら進める
値の実験 color、font-size、padding、margin等の値を変更して、どのように表示が変わるか試してみる
DevToolsの活用 ブラウザの開発者ツールでスタイルを動的に変更して、効果を即座に確認
比較学習 完成例と自分の実装を比較し、違いがあれば原因を特定して修正
カスタマイズ 完成後に色やサイズを変更して、オリジナルのプロフィールカードを作成

学習ポイント

プロフィールカード作成で押さえるポイント

グラデーション背景 linear-gradient関数で角度と2色を指定して美しいグラデーションを実現
ボックスモデルの完全理解 width（要素の幅）、padding（内側の余白）、border（枠線）、margin（外側の余白）の役割と計算方法
中央配置の技術 margin: 0 autoで水平中央配置、text-alignで要素内テキストの中央配置、line-heightで垂直中央配置を実現
余白管理の実践 marginは要素間の間隔、paddingは要素内部の余白として適切に使い分け
視覚効果の追加 border-radius（角丸）、box-shadow（影）で立体感とモダンなデザインを実現
色の一貫性 アクセントカラーを複数箇所で使用してデザインに統一感を持たせる
タイポグラフィ階層 見出し、サブ見出し、本文でfont-sizeとfont-weightを段階的に設定
リストスタイル list-style: noneで標準の箇条書きマーカーを削除し、独自のスタイルを適用

まとめ

お疲れ様！第1章のクイズと実践演習、両方ともよく頑張ったね。クイズで知識を確認してからプロフィールカードを作るという流れはどうだった？

クイズで基礎を復習してから実践に進むと、「あ、これクイズで出たプロパティだ！」って繋がりを感じられて良かったです！

プロフィールカードを作る時に、色、余白、レイアウトの全てを自分で調整できたので達成感がありました！CSSの基礎がしっかり身についた気がします。

素晴らしい！理論と実践を組み合わせることで、本当の理解につながったんだね。これで君たちはCSSの基本プロパティをマスターしたよ。次はいよいよFlexboxとGridで、さらに高度なレイアウトを学んでいこう！

第1章で身につけたスキル

CSS基本概念 CSSの役割と基本文法を理解し、HTMLとの関係を説明できる
セレクター 要素、クラス、IDセレクターを目的に応じて使い分けられる
テキスト装飾 color、font-size、font-weight、text-alignでテキストを整形できる
色指定 カラーネーム、16進数、RGB、グラデーションを使い分けられる
背景設定 background-color、background-imageで背景を設定できる
サイズ指定 width、heightで要素のサイズを適切にコントロールできる
余白管理 margin、paddingを使い分けてレイアウトを整えられる
枠線と装飾 border、border-radius、box-shadowで視覚効果を追加できる
基本レイアウト display、positionで要素の配置をコントロールできる
実践力 学んだプロパティを統合して美しいデザインを作成できる

第2章では、FlexboxとCSS Gridを使った現代的なレイアウト手法を学びます。複雑なレイアウトを簡単に実現できる強力な技術を習得して、プロフェッショナルなWebページを作れるようになりましょう！