Skip to content

Commit 1f6065c

Browse files
aster-voidaster-void
committed
Merge branch 'master' into import-all-scope
+ resolve conflict in css
2 parents 96535b8 + defc418 commit 1f6065c

File tree

21 files changed

+248
-147
lines changed

21 files changed

+248
-147
lines changed

‎.github/workflows/build-test.yml‎

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

‎.github/workflows/ci.yml‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
name: CI
2+
3+
on:
4+
push:
5+
branches:
6+
- master
7+
pull_request:
8+
9+
jobs:
10+
prettier:
11+
name: Prettier
12+
runs-on: ubuntu-latest
13+
steps:
14+
- name: Checkout Code
15+
uses: actions/checkout@v4
16+
17+
- name: Setup Node.js
18+
uses: actions/setup-node@v3
19+
with:
20+
node-version: latest
21+
cache: npm
22+
23+
- name: Install Packages
24+
run: npm ci
25+
shell: bash
26+
27+
- name: Prettier
28+
run: npm run format:check
29+
shell: bash
30+
31+
build:
32+
name: Build
33+
runs-on: ubuntu-latest
34+
steps:
35+
- name: Checkout Code
36+
uses: actions/checkout@v4
37+
38+
- name: Setup Node.js
39+
uses: actions/setup-node@v3
40+
with:
41+
node-version: latest
42+
cache: npm
43+
44+
- name: Install Packages
45+
run: npm ci
46+
shell: bash
47+
48+
- name: Build
49+
run: npm run build
50+
shell: bash

‎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
@@ -2,40 +2,125 @@
22
title: ウェブサイトの見た目を整える
33
---
44

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

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

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

1121
```html title="index.html"
12-
<p style="color: red">Hello CSS!</p>
22+
<!doctype html>
23+
<html lang="ja">
24+
<head>
25+
<meta charset="utf-8" />
26+
<link rel="stylesheet" href="style.css" />
27+
<title>Title</title>
28+
</head>
29+
<body>
30+
Hello <strong id="world">World</strong>!
31+
</body>
32+
</html>
1333
```
1434

15-
<ViewSource url={import.meta.url} path="_samples/first-css" />
35+
```css title="style.css"
36+
#world {
37+
color: red;
38+
}
39+
```
40+
41+
<ViewSource url={import.meta.url} path="_samples/red-hello-world" />
1642

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

19-
![CSSを書き始める](./write-css.png)
45+
```html title="index.html"
46+
<link rel="stylesheet" href="style.css" />
47+
```
2048

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

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

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

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

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

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

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

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

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

49134
#### 2. Google で検索してみる
50135

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

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

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

57142
:::
58143

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

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

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

73209
<Answer title="シンプルなボックス">
74210

75-
```html
211+
```html title="index.html"
76212
<!doctype html>
77213
<html lang="ja">
78214
<head>
79215
<meta charset="utf-8" />
216+
<link rel="stylesheet" href="style.css" />
80217
<title>Title</title>
81218
</head>
82219
<body>
83-
<div
84-
style="
85-
border: 1px solid #aaa;
86-
border-radius: 10px;
87-
margin: 30px;
88-
padding: 30px;
89-
box-shadow: 0px 0px 2px 1px #aaa;
90-
"
91-
>
92-
Foo
93-
</div>
220+
<div id="foo">Foo</div>
94221
</body>
95222
</html>
96223
```
97224

225+
```css title="style.css"
226+
#foo {
227+
border: 1px solid #aaa;
228+
border-radius: 10px;
229+
margin: 30px;
230+
padding: 30px;
231+
box-shadow: 0px 0px 2px 1px #aaa;
232+
}
233+
```
234+
98235
<ViewSource url={import.meta.url} path="_samples/foo" />
99236

100237
</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

0 commit comments

Comments
 (0)