CSSの基礎
CSSを使ったスタイル設定の入門です（概要のみ、任意）
「CSSの基礎」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全4レッスンが含まれています。
CSSの基本：CSSを使ったスタイリング入門
CSSの世界へようこそ！今日は、Cascading Style Sheets（CSS）を使ってWebページをスタイル設定し、見た目をすばらしくする方法を学びます。
CSSとは？
CSSはCascading Style Sheetsの略です。Webページの見た目や雰囲気を整えるために使われる言語です。
CSSを使うと、色、フォント、レイアウトなど、さまざまな要素を変更できます。
CSSの仕組み
CSSは、HTML要素を選択してスタイルを適用することで機能します。CSSは次の3つの方法で使用できます。
- インライン：HTML要素の中にスタイルを直接追加します。
- 内部：
<head>内の<style>タグにスタイルを追加します。 - 外部：別のCSSファイルを使用します。
このレッスンでは、内部スタイルと外部スタイルに重点を置きます。
内部CSS
内部CSSは、HTMLドキュメントの<head>内にある<style>タグの中に記述します。
例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p>This page has styles applied using internal CSS.</p>
</body>
</html>
外部CSS
外部CSSは、.css拡張子の付いた別のファイルに記述します。<link>タグを使ってHTMLドキュメントにリンクします。
例：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Welcome to External CSS</h1>
<p>This page uses an external CSS file for styling.</p>
</body>
</html>
CSSのセレクター
セレクターは、スタイル設定の対象となる特定のHTML要素を指定するために使います。一般的なセレクターには次のものがあります。
- タグセレクター：特定のタグを持つすべての要素を対象にします。例：
p。 - クラスセレクター：特定のクラスを持つ要素を対象にします。例：
.myClass。 - IDセレクター：特定のIDを持つ要素を対象にします。例：
#myID。
使い方を見てみましょう。
クラスセレクターとIDセレクター
複数の要素にスタイルを設定する場合はクラスを使います。1つだけの固有の要素にはIDを使います。
例：
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
color: red;
font-weight: bold;
}
#unique {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<p class="highlight">This is highlighted text.</p>
<p id="unique">This text is unique.</p>
</body>
</html>
自分で試してみましょう
内部CSSを使ってWebページを作成しましょう。まずは次の例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lavender;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: darkmagenta;
}
p {
color: gray;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Welcome to My Styled Page</h1>
<p>This is an example of using internal CSS to style a page.</p>
</body>
</html>
よくできました！
おめでとうございます！CSSの基本と、CSSを使ってWebページをスタイル設定する方法を学びました。CSSを使うと、ページをプロフェッショナルで魅力的な見た目にできます。次のレッスンでは、ページをさらに鮮やかにするために、色と背景について詳しく学びます。創造力を発揮する準備をしましょう！
よくある質問
「CSSの基礎」レッスンは無料ですか？
はい。「CSSの基礎」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全4レッスンが含まれています。
「CSSの基礎」で何を学びますか？
CSSを使ったスタイル設定の入門です（概要のみ、任意） ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML for Kidsを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「CSSの基礎」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML for Kidsレッスンでコードを書いて実行できますか？
はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。