Skip to content

Commit 4df8a30

Browse files
RRRyomaRRRyoma
authored
Merge pull request #498 from ut-code/website-no-mitame
”Webサイトの見た目を整える”改訂、高度なCSSと統合。。ＯＫなら"高度なCSS"は消します
2 parents 4690292 + 2012fb2 commit 4df8a30

File tree

15 files changed

+187
-120
lines changed

15 files changed

+187
-120
lines changed

‎docs/1-trial-session/12-css/_samples/red-hello-world/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!doctype html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="stylesheet" href="style.css" />
6+
<title>Title</title>
7+
</head>
8+
<body>
9+
Hello <strong id="world">World</strong>!
10+
</body>
11+
</html>

‎docs/1-trial-session/12-css/_samples/red-hello-world/style.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#world {
2+
color: red;
3+
}

docs/1-trial-session/13-advanced-css/_samples/separate-css-files/index.html renamed to docs/1-trial-session/12-css/_samples/yellow-hello-css/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<html lang="ja">
33
<head>
44
<meta charset="utf-8" />
5-
<title>Document</title>
65
<link rel="stylesheet" href="style.css" />
6+
<title>Title</title>
77
</head>
88
<body>
9-
<div id="element">Hello World!</div>
9+
<div id="div">Hello CSS!</div>
1010
</body>
1111
</html>

‎docs/1-trial-session/12-css/_samples/yellow-hello-css/style.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#div {
2+
color: yellow;
3+
background-color: black;
4+
}

‎docs/1-trial-session/12-css/begin-css.png‎

75.2 KB
Loading

‎docs/1-trial-session/12-css/index.md‎

Lines changed: 165 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,40 +6,125 @@ import Answer from "@site/src/components/Answer";
66
import Term from "@site/src/components/Term";
77
import ViewSource from "@site/src/components/ViewSource";
88

9-
多くの<Term type="element">HTML 要素</Term>は、<Term strong type="styleAttribute" strong>style 属性</Term>を用いることで、その見た目を細かくカスタマイズすることができます。
9+
今までは HTML と JavaScript を勉強してきました。今回は Web 開発で用いられるもう一つの言語、CSS について学びましょう。CSS は Web サイトの「見た目」をつかさどる言語です。多くの <Term type="element">HTML 要素</Term> は、 <Term type="css">CSS</Term> を用いることで、その見た目を細かくカスタマイズすることができます。
1010

11-
## <Term type="styleAttribute">style 属性</Term>
11+
![Web開発で用いられる言語](../02-html/web-development-languages.drawio.svg)
1212

13-
`p` <Term type="element">要素</Term>の <Term type="styleAttribute"><code>style</code> 属性</Term>に `color: red;` を指定します。
13+
CSS の書き方を学び、「World」の文字を赤くしてみましょう。
14+
15+
![Hello World!](./red-hello-world.png)
16+
17+
## <Term type="css">CSS</Term> ファイルを作成する
18+
19+
CSS ファイルの拡張子は通常 `.css` です。今回は `index.html` と併せて `style.css` を作成しました。
20+
21+
![CSSを書き始める](./begin-css.png)
22+
23+
次の例では、`Hello World` の `World` の部分を赤色にしています。
1424

1525
```html title="index.html"
16-
<p style="color: red">Hello CSS!</p>
26+
<!doctype html>
27+
<html lang="ja">
28+
<head>
29+
<meta charset="utf-8" />
30+
<link rel="stylesheet" href="style.css" />
31+
<title>Title</title>
32+
</head>
33+
<body>
34+
Hello <strong id="world">World</strong>!
35+
</body>
36+
</html>
1737
```
1838

19-
<ViewSource url={import.meta.url} path="_samples/first-css" />
39+
```css title="style.css"
40+
#world {
41+
color: red;
42+
}
43+
```
44+
45+
<ViewSource url={import.meta.url} path="_samples/red-hello-world" />
2046

21-
次のように、<Term type="styleAttribute">style 属性</Term>を指定した<Term type="element">要素</Term>内のテキストが赤色で表示されます。
47+
## `link` 要素
2248

23-
![CSSを書き始める](./write-css.png)
49+
```html title="index.html"
50+
<link rel="stylesheet" href="style.css" />
51+
```
2452

25-
## <Term type="styleAttribute">style 属性</Term>に指定できる値
53+
まず注目すべきは `link` 要素です。HTML で、`link` 要素を用いることにより、外部の CSS ファイルを読み込ませることができます。
2654

27-
前項で <Term type="styleAttribute">`style` 属性</Term>に指定した値を詳しく見ていきましょう。
55+
## セレクタとID
2856

29-
```css
30-
color: red;
57+
CSS を記述する際には、まずスタイルを適用する対象となる HTML 要素を指定する必要があります。このために用いることができるのが、HTML 要素の `id` 属性です。(上の例では、 <code>index.html</code> の 9行目)
58+
59+
![セレクタ](selector.png)
60+
61+
そして、CSS 側に書くのが **セレクタ**です。上の例では、 <code>style.css</code> 1行目の`#world` がセレクタで、「`id` 属性が `world` である要素」を示します。
62+
63+
`id` 属性は、全ての HTML 要素に対して開発者が自由に設定できますが、ひとつの HTML 内に同じ `id` 属性を持つ要素が複数存在してはならない、というルールがあります。
64+
65+
また、`id` 属性と似た使い方ができる属性として、`class` 属性があります。この属性は、開発者が好きな値を設定できるのは同じですが、同じ値を複数の要素が持つことを許されています。また、スペース区切りで複数の値を設定することもできます。
66+
67+
| セレクタ | 意味 |
68+
| ---------- | --------------------------------------- |
69+
| `#element` | `id` 属性が `element` である要素 |
70+
| `.element` | `class` 属性に `element` が含まれる要素 |
71+
| `element` | タグ名が `element` である要素 |
72+
73+
:::info 高度なセレクタ
74+
75+
また、セレクタをスペースで区切ると子孫要素、`>`で区切ると直属の子要素を表すことができます。そのまま繋げば and 条件とみなされます。
76+
77+
| セレクタ | 意味 |
78+
| ---------------- | ------------------------------------------------------------------------------ |
79+
| `div.element` | `class` 属性に `element` が含まれる `div` 要素 |
80+
| `#parent .child` | `id` 属性が `parent` である要素の子孫の、`class` 属性に `child` が含まれる要素 |
81+
| `#parent > div` | `id` 属性が `parent` である要素の直属の子の `div` 要素 |
82+
83+
セレクタを上手に活用すると、変更に強くて柔軟な CSS を作成することができます。
84+
85+
:::
86+
87+
## <Term type="cssProperty">プロパティ</Term>とプロパティ値
88+
89+
いよいよ仕上げです。
90+
91+
```css title="style.css"
92+
#world {
93+
color: red;
94+
}
3195
```
3296

33-
この<Term type="attribute">属性</Term>に指定される値は、<Term strong type="css">CSS</Term> と呼ばれる言語により記述されます。<Term type="styleAttribute">`style` 属性</Term>では、<Term strong type="cssProperty">プロパティ</Term>と呼ばれるスタイルの種類と、**プロパティ値**と呼ばれるプロパティに指定できる外観を、コロン記号で区切って記述します。
97+
CSS の<code>{}</code>内に、<Term strong type="cssProperty">プロパティ</Term>と呼ばれるスタイルの種類と、「プロパティ値」と呼ばれるプロパティに指定できる外観を、コロン記号で区切って記述します。
3498

3599
上の例では、`color` という<Term type="cssProperty">プロパティ</Term>に、`red` というプロパティ値を設定することで、文字色を赤色に設定するよう指示しています。
36100

37-
複数の<Term type="cssProperty">プロパティ</Term>を指定する場合には、下のように `プロパティ: プロパティ値;` の組を並べて記述します。セミコロンの指定が必要であることに注意してください。
101+
これで、 `Hello World!` の `World` の文字が赤くなりました。
102+
103+
:::tip HTMLの <Term type="styleAttribute">`style` 属性</Term>
104+
`style.css` を作らずとも、 HTML 内に直接 CSS を指定することもできます。例えば、 `p` <Term type="element">要素</Term> の <Term type="styleAttribute"><code>style</code> 属性</Term>に `color: red;` を指定するとどうなるでしょうか。
38105

39106
```html title="index.html"
40-
<p style="color: red; font-size: 30px;">Hello CSS!</p>
107+
<p style="color: red">Hello CSS!</p>
108+
```
109+
110+
<ViewSource url={import.meta.url} path="_samples/first-css" />
111+
112+
このプログラムを実行すると、<Term type="styleAttribute">style 属性</Term>を指定した<Term type="element">要素</Term>内のテキストが赤色で表示されます。
113+
114+
しかし、 <code>style</code> 属性を用いて HTML と CSS を1つのファイルに混合するよりも、「構造」のファイル (HTML) 、「スタイル」のファイル (CSS) と役割をはっきり分離させたほうが、コードの可読性が上がり、後から修正するのも簡単です。このため、通常 CSS ファイルは HTML ファイルとは別に用意されます。
115+
:::
116+
117+
## 複数のプロパティ
118+
119+
```css title="style.css"
120+
#element {
121+
color: red;
122+
font-size: 30px;
123+
}
41124
```
42125

126+
複数の<Term type="cssProperty">プロパティ</Term>を指定する場合には、上のように `プロパティ: プロパティ値;` の組を並べて記述します。セミコロンの指定が必要であることに注意してください。
127+
43128
CSS の<Term type="cssProperty">プロパティ</Term>には `color` (文字色) や `font-size` (文字サイズ) だけでなく、`background-color` (背景色)、`text-decoration` (文字装飾)等、数えきれないほどの種類が定義されています。
44129

45130
:::tip どうやって調べたらいいの？
@@ -52,15 +137,66 @@ CSS の<Term type="cssProperty">プロパティ</Term>には `color` (文字色)
52137

53138
#### 2. Google で検索してみる
54139

55-
「CSS 文字色」「CSS 色指定」などと調べてみましょう。課題が十分に細かく分割できていれば、これで直接的な回答が得られるはずです。うまく答えが見つからない場合は、慣れている人に聞いてみてください。Slack の `#質問ルーム` チャンネルの出番です。
140+
「CSS 文字色」「CSS 色指定」などと調べてみましょう。課題が十分に細かく分割できていれば、これで直接的な回答が得られるはずです。うまく答えが見つからない場合は、慣れている人に聞いてみてください。 Slack でどんどん質問しましょう。
56141

57142
#### 3. 周辺知識を信頼できる情報源で調べる
58143

59144
見つかったウェブサイトに掲載されているコードをもとに、信頼できる情報源を読みなおします。HTML、CSS、JavaScript の場合は、[MDN](https://developer.mozilla.org/ja/)が便利でしょう。例えば「CSS 文字色」と調べて紹介されるのは `color` <Term type="cssProperty">プロパティ</Term>なので、MDN でこの<Term type="cssProperty">プロパティ</Term>について調べておきましょう。
60145

61146
:::
62147

63-
## 課題 (時間が余った場合)
148+
## 課題
149+
150+
### 基礎課題1 (セレクタ)
151+
152+
次のような条件を満たす要素を選択するセレクタは何でしょうか。
153+
154+
1. `id` 属性が `foo` の要素
155+
2. `class` 属性に `bar` が含まれる要素の子孫の要素のうち、`button` 要素であるもの
156+
157+
<Answer title="セレクタ">
158+
159+
1. `#foo`
160+
2. `.bar button`
161+
162+
</Answer>
163+
164+
### 基礎課題2 (Hello CSS!)
165+
166+
下のような、文字色が黄色、背景色が好きな色 (この例では黒) の `Hello CSS!` をブラウザで表示してみましょう。
167+
168+
![Hello CSS!](yellow-hello-css.png)
169+
170+
使用するプロパティは `color`、`background-color` です。
171+
172+
<Answer title="Hello CSS!">
173+
174+
```html title="index.html"
175+
<!doctype html>
176+
<html lang="ja">
177+
<head>
178+
<meta charset="utf-8" />
179+
<link rel="stylesheet" href="style.css" />
180+
<title>Title</title>
181+
</head>
182+
<body>
183+
<div id="div">Hello CSS!</div>
184+
</body>
185+
</html>
186+
```
187+
188+
```css title="style.css"
189+
#div {
190+
color: yellow;
191+
background-color: black;
192+
}
193+
```
194+
195+
<ViewSource url={import.meta.url} path="_samples/yellow-hello-css" />
196+
197+
</Answer>
198+
199+
### 中級課題
64200

65201
画像のようなシンプルなボックスを作ってみましょう。
66202

@@ -76,29 +212,30 @@ CSS の<Term type="cssProperty">プロパティ</Term>には `color` (文字色)
76212

77213
<Answer title="シンプルなボックス">
78214

79-
```html
215+
```html title="index.html"
80216
<!doctype html>
81217
<html lang="ja">
82218
<head>
83219
<meta charset="utf-8" />
220+
<link rel="stylesheet" href="style.css" />
84221
<title>Title</title>
85222
</head>
86223
<body>
87-
<div
88-
style="
89-
border: 1px solid #aaa;
90-
border-radius: 10px;
91-
margin: 30px;
92-
padding: 30px;
93-
box-shadow: 0px 0px 2px 1px #aaa;
94-
"
95-
>
96-
Foo
97-
</div>
224+
<div id="foo">Foo</div>
98225
</body>
99226
</html>
100227
```
101228

229+
```css title="style.css"
230+
#foo {
231+
border: 1px solid #aaa;
232+
border-radius: 10px;
233+
margin: 30px;
234+
padding: 30px;
235+
box-shadow: 0px 0px 2px 1px #aaa;
236+
}
237+
```
238+
102239
<ViewSource url={import.meta.url} path="_samples/foo" />
103240

104241
</Answer>

‎docs/1-trial-session/12-css/red-hello-world.png‎

36.3 KB
Loading

‎docs/1-trial-session/12-css/selector.png‎

60.4 KB
Loading

‎docs/1-trial-session/12-css/yellow-hello-css.png‎

38.7 KB
Loading

‎docs/1-trial-session/13-advanced-css/_samples/separate-css-files/style.css‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

0 commit comments

Comments
 (0)