22title : CSS
33---
44
5- 今まではHTMLを勉強してきました。今回はWeb開発で用いられるもう一つの言語、CSSについて学びましょう 。CSSはWebサイトの「見た目」をつかさどる言語です。多くの<Term >HTML要素</Term >は、<Term >CSS</Term >を用いることで、その見た目を細かくカスタマイズすることができます。
5+ この節では、Web開発で用いられるもう一つの言語である、CSSについて学びます 。CSSはWebサイトの「見た目」をつかさどる言語です。多くの<Term >HTML要素</Term >は、<Term >CSS</Term >を用いることで、その見た目を細かくカスタマイズすることができます。
66
77![ Web開発で用いられる言語] ( ../02-html/web-development-languages.drawio.svg )
88
9- CSSの書き方を学び、「Hello World!」の文字を赤くしてみましょう。
9+ ## ` style ` 属性
10+
11+ <Term >** ` style ` 属性** </Term >は、全ての<Term >HTML要素</Term >
12+ に対して定義されている、<Term >CSS</Term >
13+ を記述するための属性です。次の例では、` div ` 要素の` style ` 属性に<Term >CSS</Term >
14+ を指定して、文字色を赤色にしています。
15+
16+ ``` html title="index.html"
17+ <div style =" color red ; font-size 24px ;" div >
18+ ```
19+
20+ <ViewSource url = { import .meta .url } path = " _samples/first-css"
1021
1122![ Hello World!] ( ./red-hello-world.png )
1223
13- ## <Term >CSS</Term >ファイルを作成する
24+ <Term >` style ` 属性</Term >には、<Term type = " cssProperty" ** プロパティ** </Term >
25+ と呼ばれるスタイルの種類と、その値を、コロン記号で繋いだ形式で記述します。また、複数のプロパティを指定する場合は、セミコロンで区切ります。
1426
15- CSSファイルの拡張子は通常 ` .css ` です。今回は ` index.html ` と併せて ` style.css ` を作成しました 。
27+ この例では、 ` color ` という< Term type = " cssProperty " >プロパティ</ Term >に ` red ` という値を設定し、 ` font-size ` という< Term type = " cssProperty " >プロパティ</ Term >に ` 24px ` という値を設定しています。これにより、 ` Hello World! ` という文字列が、赤色で、24ピクセルの大きさで表示されます 。
1628
17- ![ CSSを書き始める] ( ./begin-css.png )
29+ :::tip[ ` div ` 要素]
30+
31+ [ ` div ` 要素] ( https://developer.mozilla.org/ja/docs/Web/HTML/Element/div ) はそれ単体では特に意味を持たず、囲った範囲を要素としてまとめるために使われます。
32+
33+ :::
1834
19- 次の例では、` Hello World! ` を赤色にしています。
35+ ## 構造とスタイルの分離
36+
37+ <Term >` style ` 属性</Term >を用いて<Term >CSS</Term >を記述する方法は簡単ですが、
38+ <Term >CSS</Term >を必要とする要素が増えるにつれ、管理が難しくなってきます。
39+ <Term >CSS</Term >を<Term >HTML</Term >
40+ から分離し、見た目と構造を分離して記述するすることで、この負担を軽減することができます。
41+
42+ <Term >HTML</Term >ファイルから独立して<Term >CSS</Term >
43+ ファイルを作成する場合、拡張子として` .css ` を指定することが一般的です。` index.html ` に加えて、` style.css ` を作成しましょう。次の例では、`Hello
44+ World!`を赤色にしています。
45+
46+ ![ CSSを書き始める] ( ./begin-css.png )
2047
2148``` html title="index.html"
2249<!doctype html>
@@ -40,31 +67,26 @@ CSSファイルの拡張子は通常`.css`です。今回は`index.html`と併
4067
4168<ViewSource url = { import .meta .url } path = " _samples/red-hello-world"
4269
43- :::tip[ ` div ` 要素]
44-
45- [ ` div ` 要素] ( https://developer.mozilla.org/ja/docs/Web/HTML/Element/div ) はそれ単体では特に意味を持たず、囲った範囲を要素としてまとめるために使われます。
46-
47- :::
48-
49- ## ` link ` 要素
70+ ### ` link ` 要素
5071
5172``` html title="index.html"
5273<link rel =" stylesheet" href =" ./style.css"
5374```
5475
55- まず注目すべきは ` link ` 要素です。HTMLで、 ` link ` 要素を用いることにより、外部のCSSファイルを読み込ませることができます 。
76+ ` link ` 要素を使用すると、HTMLファイルと外部のCSSファイルが結び付けられ、ブラウザは、HTMLファイルを表示する際に、指定されたCSSファイルに記述されたスタイルを適用します。 ` link ` 要素は、 ` head ` 要素の中に記述します 。
5677
57- ## セレクタとID
78+ ### セレクタとID
5879
59- CSSを記述する際には、まずスタイルを適用する対象となるHTML要素を指定する必要があります。このために用いることができるのが、HTML要素の ` id ` 属性です。(上の例では、 ` index.html ` の9行目)
80+ HTMLファイルとCSSファイルを分けて作成する場合、 ` style ` 属性を用いる場合とは異なり、どのスタイルを、どの要素に設定するのかを紐づけるための情報が必要です。
6081
61- ![ セレクタ] ( selector.drawio.svg )
82+ <Term >HTML要素</Term >
83+ の` id ` 属性は、ひとつのHTML要素を、同じファイル内で一意に識別するための値を指定する属性で、CSSからHTML要素を探す際によく用いられます。` id ` 属性の値は、別の要素間で重複させることはできません。
6284
63- そして、CSS側に書くのが ** セレクタ** です。上の例では 、` style.css ` の1行目の` #greeting ` がセレクタで、「` id ` 属性が` greeting ` である要素」を示します 。
85+ ** セレクタ** は、CSSを記述する際に、スタイルが適用するHTML要素の条件を指定するための構文です。この例では 、` style.css ` の1行目の` #greeting ` がセレクタで、「` id ` 属性が` greeting ` である要素」を示しています 。
6486
65- ` id ` 属性は、全てのHTML要素に対して開発者が自由に設定できますが、ひとつのHTML内に同じ ` id ` 属性を持つ要素が複数存在してはならない、というルールがあります。
87+ ![ セレクタ ] ( selector.drawio.svg )
6688
67- また、 ` id ` 属性と似た使い方ができる属性として、` class ` 属性があります。この属性は、開発者が好きな値を設定できるのは同じですが、複数の要素が同じ値を持つことが許されています。また、スペース区切りで複数の値を設定することもできます 。
89+ ` id ` 属性と似た使い方ができる属性として、` class ` 属性があります。この属性は、` id ` 属性と異なり、複数の要素に同じ値を持たせることができます 。
6890
6991| セレクタ | 意味 |
7092| ---------- | ------------------------------------ |
@@ -74,7 +96,7 @@ CSSを記述する際には、まずスタイルを適用する対象となるHT
7496
7597:::info[ 高度なセレクタ]
7698
77- また、 セレクタをスペースで区切ると子孫要素、` > ` で区切ると直属の子要素を表すことができます。そのまま繋げばand条件とみなされます。
99+ セレクタをスペースで区切ると子孫要素、` > ` で区切ると直属の子要素を表すことができます。そのまま繋げばand条件とみなされます。
78100
79101| セレクタ | 意味 |
80102| ---------------- | ------------------------------------------------------------------------ |
@@ -86,91 +108,12 @@ CSSを記述する際には、まずスタイルを適用する対象となるHT
86108
87109:::
88110
89- ## < Term type = " cssProperty " >プロパティ</ Term >とプロパティ値
111+ ## 演習問題1
90112
91- いよいよ仕上げです。
92-
93- ``` css title="style.css"
94- #greeting {
95- color red ;
96- }
97- ```
98-
99- CSSの` { ` から` } ` で囲まれたブロックの中に、<Term type = " cssProperty" ** プロパティ** </Term >と呼ばれるスタイルの種類と、「プロパティ値」と呼ばれるプロパティに指定できる外観を、コロン記号で区切って記述します。
100-
101- 上の例では、` color ` という<Term type = " cssProperty" Term >に、` red ` というプロパティ値を設定することで、文字色を赤色に設定するよう指示しています。
102-
103- これで、` Hello World! ` の文字が赤くなりました。
104-
105- :::tip[ HTMLの <Term >` style ` 属性</Term >]
106- ` style.css ` を作らずとも、HTML内に直接CSSを指定することもできます。例えば、` div ` <Term >要素</Term > の<Term >` style ` 属性</Term >に` color: red; ` を指定するとどうなるでしょうか。
107-
108- ``` html title="index.html"
109- <div style =" color red " div >
110- ```
111-
112- <ViewSource url = { import .meta .url } path = " _samples/first-css"
113-
114- このプログラムを実行すると、<Term >` style ` 属性</Term >を指定した<Term >要素</Term >内のテキストが赤色で表示されます。
115-
116- しかし、` style ` 属性を用いてHTMLとCSSを1つのファイルに混合するよりも、「構造」のファイル (HTML)、「スタイル」のファイル (CSS) と役割をはっきり分離させたほうが、コードの可読性が上がり、後から修正するのも簡単です。このため、通常CSSファイルはHTMLファイルとは別に用意されます。
117- :::
118-
119- ## 複数のプロパティ
120-
121- ``` css title="style.css"
122- #element {
123- color red ;
124- font-size 30px ;
125- }
126- ```
127-
128- 複数の<Term type = " cssProperty" Term >を指定する場合には、上のように` プロパティ: プロパティ値; ` の組を並べて記述します。セミコロンの指定が必要であることに注意してください。
129-
130- CSSの<Term type = " cssProperty" Term >には` color ` (文字色) や` font-size ` (文字サイズ) だけでなく、` background-color ` (背景色)、` text-decoration ` (文字装飾) 等、数えきれないほどの種類が定義されています。
131-
132- :::tip[ どうやって調べたらいいの？]
133-
134- プログラミングを始めたての間は、分からないことがあったときにどのように調べたら良いのか戸惑うことが多いと思います。そんなときは、次のような手順で調べてみましょう。例として、「文字を赤くする方法」を調べてみます。
135-
136- #### 1. タスクを細かく分割する
137-
138- 現在持ち合わせている知識をもとに、やりたいことを可能な限り細かく分割します。「文字を赤くする」であれば、見た目に関することなのでCSSを使えばいいのだろうと想像がつきます。加えて、色の指定方法について調べてみるとよいでしょう。
139-
140- #### 2. Google で検索してみる
141-
142- 「CSS 文字色」「CSS 色指定」などと調べてみましょう。課題が十分に細かく分割できていれば、これで直接的な回答が得られるはずです。うまく答えが見つからない場合は、慣れている人に聞いてみてください。Slackでどんどん質問しましょう。
143-
144- #### 3. 周辺知識を信頼できる情報源で調べる
145-
146- 見つかったウェブサイトに掲載されているコードをもとに、信頼できる情報源を読みなおします。HTML、CSS、JavaScriptの場合は、[ MDN] ( https://developer.mozilla.org/ja/ ) が便利でしょう。例えば「CSS 文字色」と調べて紹介されるのは` color ` <Term type = " cssProperty" Term >なので、MDNでこの<Term type = " cssProperty" Term >について調べておきましょう。
147-
148- :::
149-
150- ## 演習
151-
152- ### 基礎演習1 (セレクタ)
153-
154- 次のような条件を満たす要素を選択するセレクタは何でしょうか。
155-
156- 1 . ` id ` 属性が` foo ` の要素
157- 2 . ` class ` 属性に` bar ` が含まれる要素の子孫の要素のうち、` button ` 要素であるもの
158-
159- <Answer title = " セレクタ"
160-
161- 1 . ` #foo `
162- 2 . ` .bar button `
163-
164- </Answer >
165-
166- ### 基礎演習2 (Hello CSS!)
167-
168- 下のような、文字色が黄色、背景色が好きな色 (この例では黒) の` Hello CSS! ` をブラウザで表示してみましょう。
113+ 下のような、文字色が黄色、背景色が好きな色 (この例では黒) の` Hello CSS! ` をブラウザで表示してみましょう。使用するプロパティは` color ` 、` background-color ` です。` style ` 属性を用いる方法と、CSSファイルを用いる方法の両方で試してみましょう。
169114
170115![ Hello CSS!] ( yellow-hello-css.png )
171116
172- 使用するプロパティは` color ` 、` background-color ` です。
173-
174117<Answer title = " Hello CSS!"
175118
176119``` html title="index.html"
@@ -182,23 +125,30 @@ CSSの<Term type="cssProperty">プロパティ</Term>には`color` (文字色)
182125 <title >Title</title >
183126 </head >
184127 <body >
185- <div id = " greeting " div >
128+ <div style = " color : yellow ; background-color : black " div >
186129 </body >
187130</html >
188131```
189132
190- ``` css title="style.css"
191- #greeting {
192- color yellow ;
193- background-color black ;
194- }
195- ```
133+ </Answer >
196134
197135<ViewSource url = { import .meta .url } path = " _samples/yellow-hello-css"
198136
137+ ## 演習問題2
138+
139+ 次のような条件を満たす要素を選択するセレクタは何でしょうか。
140+
141+ 1 . ` id ` 属性が` foo ` の要素
142+ 2 . ` class ` 属性に` bar ` が含まれる要素の子孫の要素のうち、` button ` 要素であるもの
143+
144+ <Answer title = " セレクタ"
145+
146+ 1 . ` #foo `
147+ 2 . ` .bar button `
148+
199149</Answer >
200150
201- ### 中級演習
151+ ## 演習問題3（発展）
202152
203153画像のようなシンプルなボックスを作ってみましょう。
204154
0 commit comments