色と背景
色と背景
「色と背景」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン1/1です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全1レッスンが含まれています。
はじめに
こんにちは。
Colorプロパティを使ってテキストの色を変更できます。
このプロパティには、RGB、 HEX、HSL、 RGBA、HSLA形式の値を指定できます。
これまでに多くの例でcolorプロパティを使用してきました。ここでは、異なる値の形式を使ってその使用方法を確認しましょう。
<style>
#txt1{
color: red;
}
#txt2{
color: #ff0000;
}
#txt3{
color: rgb(255,0,0);
}
/*
0.4 is the alpha value.
We can define decimal values
between 1 and 0.
*/
#txt4{
color: rgba(255,0,0, 0.4);
}
</style>
<div class="box">
<h1 id="txt1">
This is red color
</h1>
<h1 id="txt2">
This is red color that defined with HEX type
</h1>
<h1 id="txt3">
This is red color that defined with RGB type
</h1>
<h1 id="txt4">
This is red color that defined with RGBA type
</h1>
</div>Background
Backgroundプロパティを使うと、要素の背景にスタイルを定義できます。
それでは、以下のbackgroundプロパティを学びましょう。
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background-color
要素の背景色を変更するために使用するプロパティです。
例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec ante purus,
eleifend egestas tempus non, consequat ac ex..
</div>
</body>
</html>Opacity
要素の背景の透明度を変更するために使用するプロパティです。
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
opacity: 0.5;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">
Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
</div>
</body>
</html>Opacity - 2
CSS Opacityの変化は、上の画像に示されています。
Background image
background-imageプロパティは、要素の背景に画像を追加するために使用します。
画像はhttps://coddy.s3.amazonaws.com/cms/Profile_Pictures_dc459075ee.pngにあります。
それでは、div要素を定義して、その背景に画像を追加しましょう。
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-position
background-size
上の例で気づいたかもしれませんが、画像の標準サイズが追加先の領域より大きいため、適切に配置できませんでした。
これを解決するには、background-size プロパティを使用します。
Background-sizeプロパティにはcover、contain、autoなどの値を指定できます。また、幅と高さに特定の値を指定することもできます。
もう一度例を更新してみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* the element's background would fill the
div's background without
the image's ratio being distorted*/
background-size: contain;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-position 2
それでは、background-positionプロパティの値をパーセントで設定しましょう。
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height values
are set to 50%. */
background-size: 50% 50%;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-repeat
しかし、ここには問題があります。画像のサイズが要素の背景サイズより小さいため、領域を埋めるために画像が複数回使用されました。
これを防ぐには、background-repeatプロパティを使用します（repeat、repeat-x、repeat-y、initial、inherit、no-repeatのいずれかの値を指定します）。
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-attachment
もう1つの背景プロパティに、background-attachmentがあります。このプロパティを使うと、背景画像をページと一緒にスクロールさせるかどうかを指定できます。
このプロパティには、fixedまたはscrollの値を指定します。
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-attachment:scroll;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>backgroundのショートハンド
上の例で学んだ背景プロパティを適用する場合、4～5行の記述が必要になることがあります。
backgroundのショートハンドプロパティを使うと、1行で定義できます。
それでは、例を見てみましょう。
backgroundプロパティでは、no-repeat、サイズ、ページ内での配置、元画像のURLを定義しています。
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background: no-repeat center/50%
url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>おめでとうございます
おめでとうございます 🎉
このセクションでは、色と背景について学びました。
次のセクションでは、ボックス、ブロック、インラインの概念について学びます。
よくある質問
「色と背景」レッスンは無料ですか？
はい。「色と背景」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全1レッスンが含まれています。
「色と背景」で何を学びますか？
色と背景 ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML for Kidsを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/1です。
「色と背景」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML for Kidsレッスンでコードを書いて実行できますか？
はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。