CSS入門
CSS入門
「CSS入門」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン1/1です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全1レッスンが含まれています。
はじめに 1
こんにちは。
前の章では、CSSとは何か、そしてなぜ使うべきなのかを学びました。ここでは、簡単な例を使って簡単に紹介します。
シンプルなHTMLページを定義してみましょう。
<html>
<body>
<h1>Hello CSS</h1>
</body>
</html>インラインスタイル
では、Hello CSSという見出しの色を赤に変更してみましょう。そのために、ほとんどすべてのHTMLタグに追加できるstyle属性を使用します。
この属性を使うと、各要素にインラインでスタイルを定義できます。
プレビューを見ると、見出しの色が赤に変わっていることがわかります。
color: red;
スタイル定義によって、要素の文字色を設定しました。
<h1 style="color:red;">Hello CSS</h1>インラインスタイル 2
HTMLでは、タグに動作や属性を付与するために属性を使用すると説明したことを覚えていますか。
styleに関する属性の中でも特に重要なのは、style属性を使ってタグにスタイルを定義することです。
インラインスタイル 3
では、新しいスタイルを追加してみましょう。font-sizeを使うと、テキストサイズを大きくできます。
複数のスタイルを定義する場合、スタイルをセミコロンで区切る必要があります。
以下の例では、colorとfont-sizeのスタイルがセミコロンで区切られています。
<h1 style="color:red;font-size:50px;">
Hello CoddyKit
</h1>スタイルの定義
スタイルを追加する際は、構文が重要です。
styleName: styleValue;
上記のようにスタイルを指定する必要があることを、もう一度確認しておきましょう。
例
では、例をもう少し発展させてみましょう。
<html>
<body>
<h1>Hello CoddyKit</h1>
<p>Lorem Ipsum is simply dummy
text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s,
when an unknown printer took a galley of
type and scrambled it to make a
type specimen book.</p>
<h1>Hello CSS</h1>
</body>
</html>例 2
この例では、すべてのテキストの色を赤に変更します。各タグに対して、次のようにスタイルを定義できます。
<html>
<body>
<h1 style="color:red;">Hello Coddy</h1>
<p style="color:red;">
Lorem Ipsum is simply dummy
text of the printing and typesetting industry
Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley
of type and scrambled it to
make a type specimen book.</p>
<h1 style="color:red;">Hello CSS</h1>
</body>
</html>CSSセレクター
しかし、この方法ではあまり良く見えませんよね。
現在、ページ上には3つの要素があり、それぞれのテキストの色を赤に変更しました。しかし、この数が3000まで増えた場合、1つずつスタイルを定義するのはあまり意味がありません。
そこで、各要素にインラインで定義する代わりに、CSSセレクターを使用する必要があります。
はじめに 12
では、セレクターの概念について学びましょう。
CSSセレクターは、HTML要素にスタイルを適用するために、ドキュメント内の対象となるHTML要素を選択します。
つまり、名前からもわかるように、HTML要素を選択するものです。😂
CSSセレクターは、HTMLドキュメント内の<style>タグの間、または外部CSSファイルに定義する必要があります。
この例では、通常styleタグの間に記述する方法を使用します。ただし、スタイルは外部CSSファイルに定義する方がより適切です。
イントロ 13
ドット演算子とクラス名を使って、styleタグの間にクラスを定義します。また、スタイルの定義は波かっこの間に記述します。
.class-name {
font-size:22px;
color:red;
}
以下の例では、styleタグの間にmy-componentという名前のクラスを定義しています。そして、そのクラスにfont-sizeスタイルを割り当てています。
<style>
.my-component{
font-size:22px;
}
</style>
それでは2つの段落要素を定義しましょう
ここでは、my-componentクラスを持つ2つの段落要素を定義しましょう。
この定義により、両方の段落が同じクラス名を持つため、CSSセレクターによって選択され、font-sizeが22pxに更新されます。
<style>
.my-component{
font-size:22px;
}
</style>
<p class="my-component">Hello CoddyKit</p>
<p class="my-component">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean maximus neque diam,
in tristique tortor volutpat a. Vivamus porttitor
id est et suscipit. Duis interdum at sem sed vestibulum.
Phasellus sit amet ullamcorper libero, a vestibulum libero.
Fusce laoreet nunc a pharetra viverra.
</p>はじめに 6
1つのセレクターに複数のスタイルを指定できます。
以下の例では、font-sizeとcolorの両方のスタイルを同じセレクターに定義しています。
<style>
.my-component{
font-size:22px;
color:red;
}
</style>CSSセレクターのネスト
以下のHTMLコードを分析してみましょう。
段落要素が定義され、その要素内に「Hello CSS Selectors」という内容を持つspan要素が追加されています。
この場合、段落要素はspanの親要素だと言えます。
一方、spanはp要素の子要素でもあります。
生物と同じように、コードブロック内の配置に応じて、HTML要素を親子関係で扱います。
<p>
<span>Hello CSS Selectors</span>
</p>CSSセレクターの入れ子 2
例をもう少し発展させ、要素間の階層を改めて確認しましょう。
- 以下の例では、
- <span>要素と<a>要素は互いに兄弟要素です。
- <span>要素と<a>要素は、div要素の子孫要素です。
- <span> と<a>は、<p>要素の子要素です。
- <p>要素は<div>要素の子要素です。
<div>
<p>
<span>Hello CSS Selectors</span>
<a href="https://coddykit.com">
Go CoddyKit
</a>
</p>
</div>解析ツリーモデル
上の画像を詳しく見てみましょう。
以下のHTMLのコード例は、ツリーモデルに変換されています。
このツリーモデルは、実際には親子階層の反映であることに注意してください。
<!DOCTYPE html>
<html>
<head>
<title>CoddyKit</title>
<meta charset="UTF-8">
</head>
<body>
<h1>This is a Heading</h1>
<p>
<a href="#">Link</a>
<br/>
<span>lorem ipsum</span>
</p>
</body>
</html>
では、この階層関係はいつ使うのでしょうか
では、この階層関係はいつ使うのでしょうか。
まず例を作り、問題を提示してみましょう。その後、この階層を使ってどのように解決できるかを見ていきます。
以下のコード例を見てみましょう。
すべてのテキストを赤くしたいとします。この場合、これまでに2つの異なる方法を学びました。
- 1つ目は最も好ましくない方法で、各要素にstyle属性（style = "color: red"）をインラインで定義します。
- 2つ目は、red-txtという名前のクラスを定義し、各要素に属性（class = "red-txt"）として割り当てます。
しかし、もっと簡単な方法があります。🥳
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p><span>
This is a span element
</span>
</p>
</div>
</div>では、この階層関係はいつ使うのでしょうか？ 2
先ほどのコードをもう一度見てみましょう。
rootというクラスを持つdiv要素に注目すると、例にあるすべての要素の祖先要素であることがわかります。
人間の遺伝的形質が祖先から子孫へ受け継がれるように、CSSで祖先要素に割り当てたスタイルも子孫要素に反映されます。
この場合、該当するdiv要素を選択するスタイル定義を作成すると、そのすべての子孫要素にこの指定が適用されると考えられます。
実際に試してみましょう。
では、この階層関係はいつ使うのでしょうか？ 3
ドット演算子を使ってrootという名前のクラスを定義し、その中に（color: redという）スタイル定義を記述しましょう。
rootクラスを持つすべての要素が選択され、その要素自身と子孫要素のテキストカラーが赤になります。
Previewセクションを見ると、すべてのテキストが赤に変わっていることがわかります。
<style>
.root{
color:red;
}
</style>
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p>
<span>
This is a span element
</span>
</p>
</div>
</div>継承
CSSでは、この概念をInheritanceと呼びます。この機能を使うことで、コードを短く記述できることを学びました。
前の例のように、各要素に同じプロパティを1つずつ定義する代わりに、祖先要素にこのプロパティを定義することで、コードの重複を防げます。
Head要素への配置
前の例では、記述したHTML要素のすぐ隣にstyle要素を追加しました。
しかし、styleタグを挿入する正しい場所はheadタグの間です。
次のように記述するほうが適切です。
<!DOCTYPE html>
<html>
<head>
<style>
.hello{
font-size:30px;
}
</style>
</head>
<body>
<h1 class="hello">This is a Heading</h1>
</body>
</html>コードをできるだけ短く、再利用可能な形で書く
コーディングでは、コードをできるだけ短く、そして再利用可能な形で書く必要があります。
おめでとうございます
おめでとうございます 🎉
このセクションでは、SelectorとInheritanceの概念を学びました。
次のセクションでは、CSSにおけるスタイル定義の種類について学びます。
よくある質問
「CSS入門」レッスンは無料ですか？
はい。「CSS入門」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全1レッスンが含まれています。
「CSS入門」で何を学びますか？
CSS入門 ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML for Kidsを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/1です。
「CSS入門」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML for Kidsレッスンでコードを書いて実行できますか？
はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。