色と背景
色や背景を追加して、ページを魅力的に仕上げます
「色と背景」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全4レッスンが含まれています。
色と背景
次のレッスンへようこそ！今日は、Webページに色や背景を追加して、より鮮やかで魅力的にする方法を学びます。
色と背景を使う理由
色と背景には、次のような効果があります。
- Webページをより魅力的にする。
- 重要なコンテンツを強調する。
- ページの雰囲気やテーマを設定する。
効果的な使い方を学びましょう！
テキストの色の変更
colorプロパティを使って、テキストの色を変更できます。次の方法があります。
- 色名：例：
red、blue。 - 16進数コード：例：
#ff0000、#0000ff。 - RGB値：例：
rgb(255, 0, 0)。
例：
<p style="color: red;">This text is red.</p>
<p style="color: #0000ff;">This text is blue.</p>
<p style="color: rgb(0, 128, 0);">This text is green.</p>
背景色の追加
background-colorプロパティは、要素の背景色を変更するために使います。
例：
<p style="background-color: yellow;">This paragraph has a yellow background.</p>
<div style="background-color: lightgray; padding: 10px;">
This is a box with a gray background.
</div>
ページ全体の背景
<body>タグにbackground-colorプロパティを適用すると、ページ全体の背景色を変更できます。
例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This page has a light blue background.</p>
</body>
</html>
背景画像の追加
background-imageプロパティを使って、画像を背景に設定できます。
例：
この例では：
background-size: cover;によって、画像がページ全体を覆います。background-repeat: no-repeat;によって、画像の繰り返しを防ぎます。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This page has a background image.</p>
</body>
</html>
テキストと背景色の組み合わせ
テキストと背景色を組み合わせて、視覚的に魅力的なデザインを作成できます。テキストが読みやすい色になっていることを確認してください。
例：
<p style="color: white; background-color: black; padding: 10px;">
This is white text on a black background.
</p>
自分で試してみましょう
色と背景を使ってWebページを作成しましょう。例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lavender;
}
h1 {
color: darkblue;
}
p {
background-color: lightyellow;
padding: 10px;
border: 1px solid darkgray;
}
</style>
</head>
<body>
<h1>My Colorful Page</h1>
<p>This paragraph has a light yellow background with a border.</p>
</body>
</html>
よくできました！
おめでとうございます！色と背景を使って、Webページをより鮮やかで魅力的にする方法を学びました。次のレッスンでは、テキストに太字や斜体などの効果を加えるために、テキストの書式設定について詳しく学びます。デザインスキルを高める準備をしましょう！
よくある質問
「色と背景」レッスンは無料ですか？
はい。「色と背景」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全4レッスンが含まれています。
「色と背景」で何を学びますか？
色や背景を追加して、ページを魅力的に仕上げます ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML for Kidsを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「色と背景」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML for Kidsレッスンでコードを書いて実行できますか？
はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。