Merge pull request #498 from ut-code/website-no-mitame

”Webサイトの見た目を整える”改訂、高度なCSSと統合。。ＯＫなら"高度なCSS"は消します
ut-code · Oct 21, 2023 · 4df8a30 · 4df8a30
2 parents 4690292 + 2012fb2
commit 4df8a30
Show file tree

Hide file tree

Showing 15 changed files with 187 additions and 120 deletions.
diff --git a/docs/1-trial-session/12-css/_samples/red-hello-world/index.html b/docs/1-trial-session/12-css/_samples/red-hello-world/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Title</title>
+  </head>
+  <body>
+    Hello <strong id="world">World</strong>!
+  </body>
+</html>
diff --git a/docs/1-trial-session/12-css/_samples/red-hello-world/style.css b/docs/1-trial-session/12-css/_samples/red-hello-world/style.css
@@ -0,0 +1,3 @@
+#world {
+  color: red;
+}
diff --git a/...ss/_samples/separate-css-files/index.html → ...-css/_samples/yellow-hello-css/index.html b/...ss/_samples/separate-css-files/index.html → ...-css/_samples/yellow-hello-css/index.html
@@ -2,10 +2,10 @@
 <html lang="ja">
   <head>
     <meta charset="utf-8" />
-    <title>Document</title>
     <link rel="stylesheet" href="style.css" />
+    <title>Title</title>
   </head>
   <body>
-    <div id="element">Hello World!</div>
+    <div id="div">Hello CSS!</div>
   </body>
 </html>
diff --git a/docs/1-trial-session/12-css/_samples/yellow-hello-css/style.css b/docs/1-trial-session/12-css/_samples/yellow-hello-css/style.css
@@ -0,0 +1,4 @@
+#div {
+  color: yellow;
+  background-color: black;
+}
diff --git a/docs/1-trial-session/12-css/begin-css.png b/docs/1-trial-session/12-css/begin-css.png
diff --git a/docs/1-trial-session/12-css/index.md b/docs/1-trial-session/12-css/index.md
@@ -6,40 +6,125 @@ import Answer from "@site/src/components/Answer";
 import Term from "@site/src/components/Term";
 import ViewSource from "@site/src/components/ViewSource";
 
-多くの<Term type="element">HTML 要素</Term>は、<Term strong type="styleAttribute" strong>style 属性</Term>を用いることで、その見た目を細かくカスタマイズすることができます。
+今までは HTML と JavaScript を勉強してきました。今回は Web 開発で用いられるもう一つの言語、CSS について学びましょう。CSS は Web サイトの「見た目」をつかさどる言語です。多くの <Term type="element">HTML 要素</Term> は、 <Term type="css">CSS</Term> を用いることで、その見た目を細かくカスタマイズすることができます。
 
-## <Term type="styleAttribute">style 属性</Term>
+![Web開発で用いられる言語](../02-html/web-development-languages.drawio.svg)
 
-`p` <Term type="element">要素</Term>の <Term type="styleAttribute"><code>style</code> 属性</Term>に `color: red;` を指定します。
+CSS の書き方を学び、「World」の文字を赤くしてみましょう。
+
+![Hello World!](./red-hello-world.png)
+
+## <Term type="css">CSS</Term> ファイルを作成する
+
+CSS ファイルの拡張子は通常 `.css` です。今回は `index.html` と併せて `style.css` を作成しました。
+
+![CSSを書き始める](./begin-css.png)
+
+次の例では、`Hello World` の `World` の部分を赤色にしています。
 
 ```html title="index.html"
-<p style="color: red">Hello CSS!</p>
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Title</title>
+  </head>
+  <body>
+    Hello <strong id="world">World</strong>!
+  </body>
+</html>
 ```
 
-<ViewSource url={import.meta.url} path="_samples/first-css" />
+```css title="style.css"
+#world {
+  color: red;
+}
+```
+
+<ViewSource url={import.meta.url} path="_samples/red-hello-world" />
 
-次のように、<Term type="styleAttribute">style 属性</Term>を指定した<Term type="element">要素</Term>内のテキストが赤色で表示されます。
+## `link` 要素
 
-![CSSを書き始める](./write-css.png)
+```html title="index.html"
+<link rel="stylesheet" href="style.css" />
+```
 
-## <Term type="styleAttribute">style 属性</Term>に指定できる値
+まず注目すべきは `link` 要素です。HTML で、`link` 要素を用いることにより、外部の CSS ファイルを読み込ませることができます。
 
-前項で <Term type="styleAttribute">`style` 属性</Term>に指定した値を詳しく見ていきましょう。
+## セレクタとID
 
-```css
-color: red;
+CSS を記述する際には、まずスタイルを適用する対象となる HTML 要素を指定する必要があります。このために用いることができるのが、HTML 要素の `id` 属性です。(上の例では、 <code>index.html</code> の 9行目)
+
+![セレクタ](selector.png)
+
+そして、CSS 側に書くのが **セレクタ**です。上の例では、 <code>style.css</code> 1行目の`#world` がセレクタで、「`id` 属性が `world` である要素」を示します。
+
+`id` 属性は、全ての HTML 要素に対して開発者が自由に設定できますが、ひとつの HTML 内に同じ `id` 属性を持つ要素が複数存在してはならない、というルールがあります。
+
+また、`id` 属性と似た使い方ができる属性として、`class` 属性があります。この属性は、開発者が好きな値を設定できるのは同じですが、同じ値を複数の要素が持つことを許されています。また、スペース区切りで複数の値を設定することもできます。
+
+| セレクタ   | 意味                                    |
+| ---------- | --------------------------------------- |
+| `#element` | `id` 属性が `element` である要素        |
+| `.element` | `class` 属性に `element` が含まれる要素 |
+| `element`  | タグ名が `element` である要素           |
+
+:::info 高度なセレクタ
+
+また、セレクタをスペースで区切ると子孫要素、`>`で区切ると直属の子要素を表すことができます。そのまま繋げば and 条件とみなされます。
+
+| セレクタ         | 意味                                                                           |
+| ---------------- | ------------------------------------------------------------------------------ |
+| `div.element`    | `class` 属性に `element` が含まれる `div` 要素                                 |
+| `#parent .child` | `id` 属性が `parent` である要素の子孫の、`class` 属性に `child` が含まれる要素 |
+| `#parent > div`  | `id` 属性が `parent` である要素の直属の子の `div` 要素                         |
+
+セレクタを上手に活用すると、変更に強くて柔軟な CSS を作成することができます。
+
+:::
+
+## <Term type="cssProperty">プロパティ</Term>とプロパティ値
+
+いよいよ仕上げです。
+
+```css title="style.css"
+#world {
+  color: red;
+}
 ```
 
-この<Term type="attribute">属性</Term>に指定される値は、<Term strong type="css">CSS</Term> と呼ばれる言語により記述されます。<Term type="styleAttribute">`style` 属性</Term>では、<Term strong type="cssProperty">プロパティ</Term>と呼ばれるスタイルの種類と、**プロパティ値**と呼ばれるプロパティに指定できる外観を、コロン記号で区切って記述します。
+CSS の<code>{}</code>内に、<Term strong type="cssProperty">プロパティ</Term>と呼ばれるスタイルの種類と、「プロパティ値」と呼ばれるプロパティに指定できる外観を、コロン記号で区切って記述します。
 
 上の例では、`color` という<Term type="cssProperty">プロパティ</Term>に、`red` というプロパティ値を設定することで、文字色を赤色に設定するよう指示しています。
 
-複数の<Term type="cssProperty">プロパティ</Term>を指定する場合には、下のように `プロパティ: プロパティ値;` の組を並べて記述します。セミコロンの指定が必要であることに注意してください。
+これで、 `Hello World!` の `World` の文字が赤くなりました。
+
+:::tip HTMLの <Term type="styleAttribute">`style` 属性</Term>
+`style.css` を作らずとも、 HTML 内に直接 CSS を指定することもできます。例えば、 `p` <Term type="element">要素</Term> の <Term type="styleAttribute"><code>style</code> 属性</Term>に `color: red;` を指定するとどうなるでしょうか。
 
 ```html title="index.html"
-<p style="color: red; font-size: 30px;">Hello CSS!</p>
+<p style="color: red">Hello CSS!</p>
+```
+
+<ViewSource url={import.meta.url} path="_samples/first-css" />
+
+このプログラムを実行すると、<Term type="styleAttribute">style 属性</Term>を指定した<Term type="element">要素</Term>内のテキストが赤色で表示されます。
+
+しかし、 <code>style</code> 属性を用いて HTML と CSS を1つのファイルに混合するよりも、「構造」のファイル (HTML) 、「スタイル」のファイル (CSS) と役割をはっきり分離させたほうが、コードの可読性が上がり、後から修正するのも簡単です。このため、通常 CSS ファイルは HTML ファイルとは別に用意されます。
+:::
+
+## 複数のプロパティ
+
+```css title="style.css"
+#element {
+  color: red;
+  font-size: 30px;
+}
 ```
 
+複数の<Term type="cssProperty">プロパティ</Term>を指定する場合には、上のように `プロパティ: プロパティ値;` の組を並べて記述します。セミコロンの指定が必要であることに注意してください。
+
 CSS の<Term type="cssProperty">プロパティ</Term>には `color` (文字色) や `font-size` (文字サイズ) だけでなく、`background-color` (背景色)、`text-decoration` (文字装飾)等、数えきれないほどの種類が定義されています。
 
 :::tip どうやって調べたらいいの？
@@ -52,15 +137,66 @@ CSS の<Term type="cssProperty">プロパティ</Term>には `color` (文字色)
 
 #### 2. Google で検索してみる
 
-「CSS 文字色」「CSS 色指定」などと調べてみましょう。課題が十分に細かく分割できていれば、これで直接的な回答が得られるはずです。うまく答えが見つからない場合は、慣れている人に聞いてみてください。Slack の `#質問ルーム` チャンネルの出番です。
+「CSS 文字色」「CSS 色指定」などと調べてみましょう。課題が十分に細かく分割できていれば、これで直接的な回答が得られるはずです。うまく答えが見つからない場合は、慣れている人に聞いてみてください。 Slack でどんどん質問しましょう。
 
 #### 3. 周辺知識を信頼できる情報源で調べる
 
 見つかったウェブサイトに掲載されているコードをもとに、信頼できる情報源を読みなおします。HTML、CSS、JavaScript の場合は、[MDN](https://developer.mozilla.org/ja/)が便利でしょう。例えば「CSS 文字色」と調べて紹介されるのは `color` <Term type="cssProperty">プロパティ</Term>なので、MDN でこの<Term type="cssProperty">プロパティ</Term>について調べておきましょう。
 
 :::
 
-## 課題 (時間が余った場合)
+## 課題
+
+### 基礎課題1 (セレクタ)
+
+次のような条件を満たす要素を選択するセレクタは何でしょうか。
+
+1. `id` 属性が `foo` の要素
+2. `class` 属性に `bar` が含まれる要素の子孫の要素のうち、`button` 要素であるもの
+
+<Answer title="セレクタ">
+
+1. `#foo`
+2. `.bar button`
+
+</Answer>
+
+### 基礎課題2 (Hello CSS!)
+
+下のような、文字色が黄色、背景色が好きな色 (この例では黒) の `Hello CSS!` をブラウザで表示してみましょう。
+
+![Hello CSS!](yellow-hello-css.png)
+
+使用するプロパティは `color`、`background-color` です。
+
+<Answer title="Hello CSS!">
+
+```html title="index.html"
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="style.css" />
+    <title>Title</title>
+  </head>
+  <body>
+    <div id="div">Hello CSS!</div>
+  </body>
+</html>
+```
+
+```css title="style.css"
+#div {
+  color: yellow;
+  background-color: black;
+}
+```
+
+<ViewSource url={import.meta.url} path="_samples/yellow-hello-css" />
+
+</Answer>
+
+### 中級課題
 
 画像のようなシンプルなボックスを作ってみましょう。
 
@@ -76,29 +212,30 @@ CSS の<Term type="cssProperty">プロパティ</Term>には `color` (文字色)
 
 <Answer title="シンプルなボックス">
 
-```html
+```html title="index.html"
 <!doctype html>
 <html lang="ja">
   <head>
     <meta charset="utf-8" />
+    <link rel="stylesheet" href="style.css" />
     <title>Title</title>
   </head>
   <body>
-    <div
-      style="
-        border: 1px solid #aaa;
-        border-radius: 10px;
-        margin: 30px;
-        padding: 30px;
-        box-shadow: 0px 0px 2px 1px #aaa;
-      "
-    >
-      Foo
-    </div>
+    <div id="foo">Foo</div>
   </body>
 </html>
 ```
 
+```css title="style.css"
+#foo {
+  border: 1px solid #aaa;
+  border-radius: 10px;
+  margin: 30px;
+  padding: 30px;
+  box-shadow: 0px 0px 2px 1px #aaa;
+}
+```
+
 <ViewSource url={import.meta.url} path="_samples/foo" />
 
 </Answer>
diff --git a/docs/1-trial-session/12-css/red-hello-world.png b/docs/1-trial-session/12-css/red-hello-world.png
diff --git a/docs/1-trial-session/12-css/selector.png b/docs/1-trial-session/12-css/selector.png
diff --git a/docs/1-trial-session/12-css/yellow-hello-css.png b/docs/1-trial-session/12-css/yellow-hello-css.png
diff --git a/docs/1-trial-session/13-advanced-css/_samples/separate-css-files/style.css b/docs/1-trial-session/13-advanced-css/_samples/separate-css-files/style.css
diff --git a/docs/1-trial-session/13-advanced-css/index.md b/docs/1-trial-session/13-advanced-css/index.md
diff --git a/docs/1-trial-session/13-advanced-css/selector.png b/docs/1-trial-session/13-advanced-css/selector.png
diff --git a/docs/1-trial-session/13-advanced-css/separate-html-css.png b/docs/1-trial-session/13-advanced-css/separate-html-css.png
diff --git a/docs/6-exercise/4-css/index.md b/docs/6-exercise/4-css/index.md
@@ -10,7 +10,7 @@ import headerScrollVideo from "./header-scroll.mp4"
 import placeScrollVideo from "./place-scroll.mp4"
 import Details from "@theme/Details";
 
-この章では教材の「[高度な CSS](/docs/trial-session/advanced-css)」「[CSS による配置](/docs/browser-apps/css-arrangement)」の内容を扱っています。
+この章では教材の「[ Web サイトの見た目を整える](/docs/trial-session/css)」「[CSS による配置](/docs/browser-apps/css-arrangement)」の内容を扱っています。
 
 ---
 

diff --git a/src/components/Term/definitions.js b/src/components/Term/definitions.js
@@ -23,7 +23,7 @@ export default {
     "/docs/browser-apps/class/": "クラス",
     "/docs/browser-apps/array/": "配列",
     "/docs/browser-apps/anonymous-function/": "無名関数",
-    "/docs/advanced/css/": "高度な CSS",
+    "/docs/trial-session/css/": "ウェブサイトの見た目を整える",
     "/docs/browser-apps/git-github/": "Git と GitHub",
     "/docs/web-servers/wsl-setup/": "WSL のセットアップ",
     "/docs/web-servers/node-js/": "はじめての Node.js",