”Webサイトの見た目を整える”改訂、高度なCSSと統合。。ＯＫなら"高度なCSS"は消します by RRRyoma · Pull Request #498 · ut-code/utcode-learn

RRRyoma · 2023-10-20T16:26:52Z

No description provided.

cloudflare-workers-and-pages · 2023-10-20T16:29:10Z

Deploying with Cloudflare Pages

Latest commit:	`2012fb2`
Status:	✅ Deploy successful!
Preview URL:	https://1087e313.utcode-learn.pages.dev
Branch Preview URL:	https://website-no-mitame.utcode-learn.pages.dev

View logs

chvmvd

ありがとう。

chvmvd · 2023-10-21T01:49:51Z

+### セレクタとID
+
+```html title="index.html"
+Hello, <strong id="world">World</strong>!


これは意味論的によくなさそう。

Worldを強調するために、文字色を赤色にしたいのだと思う。
だけど、このコードが表す意味は、まずWorldを強調する。さらに、Worldという文字自体が特殊でそれ自体を赤くして強調するという意味になっちゃう。

Worldを強調するために、文字色を赤色にしたいのなら、id属性はなしでstrong要素に対して文字色を赤にする方が良さそう。

これは確かスライドレビューの時に
strong要素が全部赤色になるよりこれだけをidで指定して赤色にしたほうがいいよね、トいう結論になった気がします。

それはidを使わせる練習にならないから、授業スライドでもidを決めさせるという話になってました

それは、HTML側を変えればいいのでは？

<p id="greeting">Hello World!</p>

とか？

chelproc

日本語と英語の間にはスペース1文字分あけましょう

chelproc · 2023-10-21T01:26:25Z

 import ViewSource from "@site/src/components/ViewSource";

-多くの<Term type="element">HTML 要素</Term>は、<Term strong type="styleAttribute" strong>style 属性</Term>を用いることで、その見た目を細かくカスタマイズすることができます。
+多くの<Term type="element">HTML 要素</Term>は、<Term type="css">CSS</Term>を用いることで、その見た目を細かくカスタマイズすることができます。


「CSSとはなんぞや」の話を冒頭に入れましょう。HTML、CSSとの関連性も

chelproc · 2023-10-21T01:27:02Z

+多くの<Term type="element">HTML 要素</Term>は、<Term type="css">CSS</Term>を用いることで、その見た目を細かくカスタマイズすることができます。

-## <Term type="styleAttribute">style 属性</Term>
+## <Term type="css">CSS</Term>用のファイルを作成する


CSS「用の」ファイル

「用の」が何をさしているかわからないです。「CSS ファイル」で十分ですね

chelproc · 2023-10-21T01:31:32Z

+## <Term type="css">CSS</Term>用のファイルを作成する

-`p` <Term type="element">要素</Term>の <Term type="styleAttribute"><code>style</code> 属性</Term>に `color: red;` を指定します。
+CSS ファイルの拡張子は通常 `.css` です。今回は `index.html` と併せて `style.css` を作成しました。CSSの書き方を勉強して、`World`の文字を赤くしてみましょう。先に完成コードを下に示しておきます。


「勉強して」が少々口語的です。

「完成コード」という言い方は普通しないです。「次の例では、Hello World の World の部分を赤色にしています。」くらいでどうでしょうか。

またコードを示すときにスクリーンショットだけだと不親切なので、必ずコピーできるコードブロックも含めた方がいいですね。あと CodeSandbox も欲しいです

スクリーンショットの解像度が低いかと思います。スクリーンショットを撮る時は、Electron アプリやブラウザアプリであれば Ctrl + + で拡大できるのでその状態で取るといいです。高解像度モニタを持っている場合は OS のスケーリング設定を 200% とかにして撮影するといいと思います。

対応しました

chelproc · 2023-10-21T01:32:13Z

+
+## CSSの書き方
+
+### link属性


link 要素

link はインラインコードにしましょう

chelproc · 2023-10-21T01:33:12Z

 ```

-<ViewSource url={import.meta.url} path="_samples/first-css" />
+まず注目すべきは `link` 要素です。HTMLファイルで、`link` 要素の `href` 属性を指定することにより、外部の CSS ファイルを読み込ませることができます。


HTML ファイル -> HTML の方が正確かと思います

chelproc · 2023-10-21T02:06:34Z

+</Answer>
+
+:::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ファイル -> HTML
「書き込む」-> 「指定する」
「color: red; を指定します。」-> 指定することでどうなる？

chelproc · 2023-10-21T02:07:18Z


+<ViewSource url={import.meta.url} path="_samples/first-css" />
+
+「このプログラムを実行する」を押すと解るとおり、<Term type="styleAttribute">style 属性</Term>を指定した<Term type="element">要素</Term>内のテキストが赤色で表示されます。


「このプログラムを実行する」を押すと解るとおり -> このプログラムを実行すると

chelproc · 2023-10-21T02:10:45Z

+
+「このプログラムを実行する」を押すと解るとおり、<Term type="styleAttribute">style 属性</Term>を指定した<Term type="element">要素</Term>内のテキストが赤色で表示されます。
+
+しかし、この方法ではHTML要素に逐一CSSを書きこむ必要があるため、HTMLが大きくなると大変になります。さらに、社会の要求の高まりに応えて CSS のプロパティの種類は増え続け、現在では数えきれないほどのプロパティが定義されています。このため、CSS をすべて<Term type="styleAttribute">`style` 属性</Term>で記述するのは現実的ではありません。数が多すぎて、見通しが悪くなってしまうからです。このため、通常 CSS ファイルは HTML ファイルとは別に用意されます。


「逐一」->「スタイルを設定したい全ての HTML 要素に」
「CSSを書き込む」 -> 「style 属性を指定する」
「HTMLが大きくなると大変」->「HTML 要素の数が多くなると見通しが悪くなります。」また後半部分と内容がかぶっているので修正

プログラムは非常に重要なものなので、「大変だから」という理由でプログラムの書き方を変えることはいかなる場合でも許されません。「大変」なだけであれば、エディタによる支援を入れれば解決できます。

「しかし、 style 属性で HTML と CSS をごちゃ混ぜに書くよりも、 HTML は「構造」、 CSS は「スタイル」と役割をはっきり分離させておけば、コードの可読性が上がったり、後から修正するのも簡単です。このため、通常 CSS ファイルは HTML ファイルとは別に用意されます。」に直してみました

chelproc · 2023-10-21T02:13:32Z


+## 初級課題2
+
+下のような、文字色が緑、背景色が好きな色(この例では黒)の`Hello, CSS!`をブラウザで表示してみましょう。


カッコは前後にスペースを入れます。
英語と同じですね

chelproc · 2023-10-21T02:14:44Z

+しかし、この方法ではHTML要素に逐一CSSを書きこむ必要があるため、HTMLが大きくなると大変になります。さらに、社会の要求の高まりに応えて CSS のプロパティの種類は増え続け、現在では数えきれないほどのプロパティが定義されています。このため、CSS をすべて<Term type="styleAttribute">`style` 属性</Term>で記述するのは現実的ではありません。数が多すぎて、見通しが悪くなってしまうからです。このため、通常 CSS ファイルは HTML ファイルとは別に用意されます。
+:::
+
+## CSSのプロパティ


課題の後に新情報を入れない

chelproc · 2023-10-21T05:29:04Z

-`p` <Term type="element">要素</Term>の <Term type="styleAttribute"><code>style</code> 属性</Term>に `color: red;` を指定します。

+CSS の書き方を学び、`World`の文字を赤くしてみましょう。
+![Hello World!](./red-hello-world.png)


画像の前後には空行を！（次の画像もです）

chelproc · 2023-10-21T05:29:18Z

+
+CSS ファイルの拡張子は通常 `.css` です。今回は `index.html` と併せて `style.css` を作成しました。
+![CSSを書き始める](./begin-css.png)
+次の例では、<code>Hello World</code> の <code>World</code> の部分を赤色にしています。


前後に改行をあけたら普通にバッククォーとでかけると思います。

chelproc · 2023-10-21T05:29:40Z

-<ViewSource url={import.meta.url} path="_samples/first-css" />

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


インラインコードブロックはバッククォートで
かけます

chelproc · 2023-10-21T05:37:49Z

セレクタは #world なので矢印がセレクタというわけではないですね

chelproc · 2023-10-21T05:42:08Z

+
+このプログラムを実行すると分かるとおり、<Term type="styleAttribute">style 属性</Term>を指定した<Term type="element">要素</Term>内のテキストが赤色で表示されます。
+
+しかし、 <code>style</code> 属性で HTML と CSS をごちゃ混ぜに書くよりも、 HTML は「構造」、 CSS は「スタイル」と役割をはっきり分離させておけば、コードの可読性が上がったり、後から修正するのも簡単です。このため、通常 CSS ファイルは HTML ファイルとは別に用意されます。


HTML が「構造」、CSS が「見た目」であることは、別ファイルにしてもしなくても変わりません。

「〜よりも」に呼応する部分がないです。「AよりもB(のほうが/は)C」が基本形かなと

「〜たり」を使ったらもう一つ「〜たり」を入れる

「ごちゃ混ぜ」->もっと文語的な表現がありそうかも？

chelproc · 2023-10-21T05:44:21Z

+
+<ViewSource url={import.meta.url} path="_samples/first-css" />
+
+このプログラムを実行すると分かるとおり、<Term type="styleAttribute">style 属性</Term>を指定した<Term type="element">要素</Term>内のテキストが赤色で表示されます。


「〜するとわかるとおり」は冗長じゃないですかね？「このプログラムを実行すると」だけで十分では？

chelproc · 2023-10-21T06:00:11Z

-## <Term type="styleAttribute">style 属性</Term>に指定できる値

-前項で <Term type="styleAttribute">`style` 属性</Term>に指定した値を詳しく見ていきましょう。
+外部のファイルに記述された CSS では、その CSS を適用する要素を明示的に指定する必要があります。準備として、まず CSS を適用したい HTML 要素にIDを付けます。(上の例では、 <code>index.html</code> の 9行目) 


「外部のファイルに記述された」が「CSS」を限定修飾しているように読めます。多分今までの教材の名残です。まだインラインCSSには触れていないので、非限定な書き方をするといいと思います。また、id 属性以外の方法もあることが分かりづらいです。
また HTML の id 属性を ID と呼ぶことはあまりない気がします。id 属性と言ってあげるのがいいんじゃないでしょうか。
「CSS を記述する際には、まずスタイルを適用する対象となる HTML 要素を指定する必要があります。このために用いることができるのが、HTML 要素の id 属性です。」と言った感じででどうでしょう。

chelproc · 2023-10-21T06:00:48Z

+:::
+
+## 複数のプロパティ
+```css title="style.css"


1行開ける

chelproc · 2023-10-21T06:05:55Z

+<link rel="stylesheet" href="style.css" />
+```
+
+まず注目すべきは `link` 要素です。HTML で、`link` 要素の `href` 属性を指定することにより、外部の CSS ファイルを読み込ませることができます。


この書き方だと link 要素の href 属性さえ指定すれば CSS が読み込めるように読めます。実際は rel="stylesheet" 以外もあるので少し情報が足りません。
ただ厳密に書く必要もないので、「HTML の link 要素を用いることにより」くらいの表現でどうでしょう

chelproc · 2023-10-21T06:06:28Z

-color: red;
+![セレクタ](selector.png)
+
+そして、CSS 側に書くのが **セレクタ**です。上の例では 、 <code>style.css</code> 1行目の`#world` がセレクタで、「`id` 属性が `world` である要素」を示します。


「でわ」と「、」の間にスペースが？

…nto website-no-mitame

chvmvd

~~この2つを直してプルリクエスト送ります！~~

”Webサイトの見た目を整える”改訂、高度なCSSと統合。。ＯＫなら"高度なCSS"は消します

9075559

begin-css.png差し替え

caefded

chvmvd reviewed Oct 21, 2023

View reviewed changes

chelproc reviewed Oct 21, 2023

View reviewed changes

RRRyoma added 18 commits October 21, 2023 11:43

写真の解像度アップ

48dde32

hello worldの表記統一

452e91c

htmlの章の画像をもってくる

b3a1685

処理のない波括弧にコメント

8489385

「波括弧{}」重複表現回避

11015c4

tipの改良

a3c60fb

チップスの並び替え

33af62e

緑の見にくさ修正

64d473d

日本語と英語の間にスペースあける

17a8c8e

codesandbox追加

5e00025

表現訂正

4b54163

codesandboxもう一つ追加

e69c4b1

_samplesのコードにプリティア！

6fc418e

上の10個のコメントに対応

db1511f

章立て訂正、段落整理

561e553

高度なCSS削除

33be79e

高度なセレクタをinfo化

843d533

課題に名前付ける

57bb1ac

chelproc reviewed Oct 21, 2023

View reviewed changes

RRRyoma added 3 commits October 21, 2023 15:14

高度なCSSのリンク削除

77c989a

Merge branch 'website-no-mitame' of github.com:ut-code/utcode-learn i…

18e89c1

…nto website-no-mitame

初級課題を基礎課題になまえ統一

748b2a9

chelproc approved these changes Oct 21, 2023

View reviewed changes

aster-void added 2 commits October 21, 2023 15:44

カンマ追加, PRETTIER

c16d2db

definition.jsのリンクの調整

c162853

aster-void and others added 2 commits October 21, 2023 16:20

Merge branch 'website-no-mitame' of github.com:ut-code/utcode-learn i…

d8cc6d7

…nto website-no-mitame

Merge branch 'website-no-mitame' of github.com:ut-code/utcode-learn i…

2012fb2

…nto website-no-mitame

RRRyoma merged commit 4df8a30 into master Oct 21, 2023

RRRyoma deleted the website-no-mitame branch October 21, 2023 10:45

chvmvd reviewed Oct 21, 2023

View reviewed changes

Comment thread docs/1-trial-session/12-css/index.md

Comment thread src/components/Term/definitions.js


		<ViewSource url={import.meta.url} path="_samples/first-css" />

		「このプログラムを実行する」を押すと解るとおり、<Term type="styleAttribute">style 属性</Term>を指定した<Term type="element">要素</Term>内のテキストが赤色で表示されます。


		「このプログラムを実行する」を押すと解るとおり、<Term type="styleAttribute">style 属性</Term>を指定した<Term type="element">要素</Term>内のテキストが赤色で表示されます。

		しかし、この方法ではHTML要素に逐一CSSを書きこむ必要があるため、HTMLが大きくなると大変になります。さらに、社会の要求の高まりに応えて CSS のプロパティの種類は増え続け、現在では数えきれないほどのプロパティが定義されています。このため、CSS をすべて<Term type="styleAttribute">`style` 属性</Term>で記述するのは現実的ではありません。数が多すぎて、見通しが悪くなってしまうからです。このため、通常 CSS ファイルは HTML ファイルとは別に用意されます。


		## 初級課題2

		下のような、文字色が緑、背景色が好きな色(この例では黒)の`Hello, CSS!`をブラウザで表示してみましょう。


		このプログラムを実行すると分かるとおり、<Term type="styleAttribute">style 属性</Term>を指定した<Term type="element">要素</Term>内のテキストが赤色で表示されます。

		しかし、 <code>style</code> 属性で HTML と CSS をごちゃ混ぜに書くよりも、 HTML は「構造」、 CSS は「スタイル」と役割をはっきり分離させておけば、コードの可読性が上がったり、後から修正するのも簡単です。このため、通常 CSS ファイルは HTML ファイルとは別に用意されます。

Conversation

RRRyoma commented Oct 20, 2023

Uh oh!

cloudflare-workers-and-pages Bot commented Oct 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying with Cloudflare Pages

Uh oh!

chvmvd left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chelproc left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chvmvd left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

cloudflare-workers-and-pages Bot commented Oct 20, 2023 •

edited

Loading

chvmvd left a comment •

edited

Loading

chvmvd left a comment •

edited

Loading