まずは作成ファイルと保存場所
css-basicフォルダを作成し、その中に01.htmlというファイルを作成します。HTMLコードは以下のコードをコピーして使います。このファイルのhead要素内に、cssを適用していきます。
01.htmlは下記からコピー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS課題01</title>
</head>
<body>
<h1>自己紹介</h1>
<p>こんにちは。私はWeb制作の学習を始めたばかりの学生です。</p>
<p>デザインやコーディングを少しずつ覚えながら、将来は自分のサイトを作るのが目標です。</p>
<p>最近はHTMLやCSSの基礎を学びながら、簡単なページの作成に挑戦しています。最初は難しいと感じることもありますが、少しずつできることが増えていくのが楽しいです。</p>
<p>これからも毎日少しずつ練習を重ねて、分かりやすくて見やすいWebページを作れるようになりたいと思っています。</p>
</body>
</html>
指示
以下の条件に従って、CSSを使ってHTMLを装飾してください。
- HTMLは
01.htmlをベースにして、自己紹介文を2〜3文程度に増やすこと - CSSは
<head>内の<style>タグに記述してください（外部CSSではなく今回は内部スタイルで）
チェックポイント
<style>タグが<head>内に正しく記述されているか- CSSのプロパティと値の記述が正確か（コロン
:やセミコロン;の付け忘れに注意） - 文字の読みやすさや配色のバランスを意識できているか
- HTML構造に変更がある場合でも、スタイルは正しく適用されているか
今回使うCSSプロパティのポイント
| プロパティ | よく使う値 | 説明 |
|---|---|---|
| color | #333, red | 文字の色を指定します |
| background-color | #eee, white | 背景色を指定します |
| text-align | center, left | テキストの水平方向の位置を指定します（この課題では中央寄せに使用） |
| line-height | 1.6, 1.8 | 行間の高さを指定します。読みやすさに影響します |
スタイルの指定内容
<body>に指定するスタイル- フォントサイズ：
16px - 行間：
1.8 - 背景色：任意
- フォントサイズ：
<h1>に指定するスタイル- 文字色：白（
#ffffff） - 背景色：紺色（
navy） - フォントサイズ:
28px - 中央揃え（
text-align:center)
- 文字色：白（
<p>に指定するスタイル- 文字色：濃いグレー（
#444444） - フォントサイズ：
18px
- 文字色：濃いグレー（
解答例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS課題01</title>
<style>
body {
font-size: 16px;
line-height: 1.8;
background-color: rgb(255, 245, 232);
}
h1 {
color: #fff;
background-color: navy;
text-align: center;
font-size: 28px;
}
p {
color: #444;
font-size: 18px;
}
</style>
</head>
<body>
<h1>自己紹介</h1>
<p>こんにちは。私はWeb制作の学習を始めたばかりの学生です。</p>
<p>デザインやコーディングを少しずつ覚えながら、将来は自分のサイトを作るのが目標です。</p>
<p>最近はHTMLやCSSの基礎を学びながら、簡単なページの作成に挑戦しています。最初は難しいと感じることもありますが、少しずつできることが増えていくのが楽しいです。</p>
<p>これからも毎日少しずつ練習を重ねて、分かりやすくて見やすいWebページを作れるようになりたいと思っています。</p>
</body>
</html>
完成イメージ（HTML＋CSS）
