Skip to content

「CSS による配置」を改訂 #891

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
chvmvd merged 21 commits into from
Jan 11, 2026
Merged

「CSS による配置」を改訂 #891

chvmvd merged 21 commits into from
Jan 11, 2026

Conversation

@nakaterm
Copy link
Contributor

@nakaterm nakaterm commented Oct 25, 2025 •
edited
Loading

「CSS による配置」で扱う内容を抜本的に見直し、例題のテーマも実用的なものに変更した

注意点

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Oct 25, 2025 •
edited
Loading

Deploying utcode-learn with  Cloudflare Pages  Cloudflare Pages

Latest commit: 0646d44
Status: ✅  Deploy successful!
Preview URL: https://cbbf9b44.utcode-learn.pages.dev
Branch Preview URL: https://rewrite-css-arrangement.utcode-learn.pages.dev

View logs

@nakaterm nakaterm force-pushed the rewrite-css-arrangement branch 2 times, most recently from 3f0bd0b to 86bec36 Compare November 1, 2025 12:01
@nakaterm nakaterm force-pushed the rewrite-css-arrangement branch 2 times, most recently from b40ab58 to 4b0f703 Compare November 8, 2025 13:21
@nakaterm nakaterm closed this Nov 8, 2025
@nakaterm nakaterm force-pushed the rewrite-css-arrangement branch from 4b0f703 to cceb0dd Compare November 8, 2025 13:43
@nakaterm nakaterm reopened this Nov 8, 2025
@nakaterm nakaterm marked this pull request as ready for review November 8, 2025 13:52
chvmvd
chvmvd reviewed Nov 13, 2025
View reviewed changes
Copy link
Contributor

@chvmvd chvmvd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

途中ですが

chvmvd
chvmvd reviewed Nov 14, 2025
View reviewed changes
@chvmvd chvmvd requested a review from Copilot November 14, 2025 09:12
Copilot AI reviewed Nov 14, 2025
View reviewed changes
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This pull request revises the CSS layout documentation (「CSS による配置」を改訂) by simplifying and reorganizing the content. The PR introduces a new, more streamlined tutorial focused on building pricing plan cards while teaching CSS layout fundamentals.

Key Changes:

  • Creates new simplified CSS layout guide with step-by-step card building examples
  • Removes the advanced "CSS arrangement" content (box model, positioning, grid)
  • Adds multiple progressive code samples demonstrating width, border, padding, margin, flexbox, and responsive design

Reviewed Changes

Copilot reviewed 50 out of 80 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
docs/2-browser-apps/05-css-layout/index.mdx New tutorial teaching CSS layout through building pricing cards, covering width/height, borders, padding, margin, flexbox, and media queries
docs/2-browser-apps/05-css-layout/_samples/* Multiple sample code directories added to demonstrate each concept progressively
docs/2-browser-apps/05-css-layout/final-image.png Screenshot showing the completed pricing card layout
docs/2-browser-apps/05-css-arrangement/index.mdx Previous advanced CSS content removed (box model, position, grid)
docs/2-browser-apps/05-css-arrangement/_samples/* All previous sample code removed

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@nakaterm
Copy link
Contributor Author

nakaterm commented Nov 15, 2025

(メモ) 演習問題と、コードブロックのハイライトの CSS 以外を一旦修正

chvmvd
chvmvd reviewed Nov 20, 2025
View reviewed changes
Copy link
Contributor

@chvmvd chvmvd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

他はわかりやすく正確で非常にいいと思います！

@chvmvd chvmvd requested a review from Copilot November 20, 2025 14:35
Copilot AI reviewed Nov 20, 2025
View reviewed changes
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

Copilot reviewed 50 out of 80 changed files in this pull request and generated no new comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@nakaterm nakaterm force-pushed the rewrite-css-arrangement branch from 7b743f7 to d87255a Compare December 14, 2025 13:44
chvmvd
chvmvd reviewed Dec 20, 2025
View reviewed changes
Copy link
Contributor

@chvmvd chvmvd left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

すみません。操作を誤り、途中でレビューを完了してしまいました。

chvmvd
chvmvd reviewed Dec 20, 2025
View reviewed changes
Copy link
Contributor

@chvmvd chvmvd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

説明がわかりやすくかなり正確で非常に良いと思います！！！

@nakaterm nakaterm mentioned this pull request Dec 22, 2025
Merged
@nakaterm nakaterm requested review from chvmvd and Copilot December 22, 2025 04:56
Copilot AI reviewed Dec 22, 2025
View reviewed changes
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 62 out of 99 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

chvmvd
chvmvd approved these changes Dec 28, 2025
View reviewed changes
Copy link
Contributor

@chvmvd chvmvd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

もう問題ないと思います！
難易度も適切で、説明もわかりやすく、問題と演習問題の例も素敵だと思います。
ありがとうございます。

@nakaterm nakaterm requested a review from chvmvd December 29, 2025 12:49
chvmvd
chvmvd approved these changes Dec 29, 2025
View reviewed changes
Copy link
Contributor

@chvmvd chvmvd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

完璧だと思います！

chelproc
chelproc reviewed Jan 11, 2026
View reviewed changes
Copy link
Contributor

@chelproc chelproc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ありがとうございます！3桁カラーコードってあえて紹介しますかね？？どちらかに揃えちゃっても良い気がします！

docs/2-browser-apps/05-css-layout/index.mdx Outdated
```

:::tip[16進数カラーコード]
`#f0f0f0`や`#0d6efd`のように、6桁の英数字で色を指定する記法を16進数カラーコードと呼びます。左から順に2桁ずつが、それぞれ赤・緑・青の成分を16進数で表しています。
Copy link
Contributor

@chelproc chelproc Jan 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

これって正式な言葉でしたっけ？
「CSSでは、#記号に続く6桁の16進数で色を指定できます」とかの方が正確だったりしません？？

Copy link
Contributor Author

@nakaterm nakaterm Jan 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MDN ではあくまで CSS のデータ型の一つとして紹介されており「16進数カラーコード」という単語は出ていないので、確かに「16進数カラーコードと呼びます」という言い方は良くなさそうですね。
そのように修正します。

Copy link
Contributor Author

@nakaterm nakaterm Jan 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

3桁は紹介しなくてもいいかもしれませんね。

docs/2-browser-apps/05-css-layout/index.mdx Outdated
Comment on lines 9 to 11
この節では、CSSを使用してHTML要素のレイアウトを調整する方法を学びます。

例として、次のような料金プランを表すカードを作ることを目標に進めていきます。
Copy link
Contributor

@chelproc chelproc Jan 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

重箱の隅ですが、「例として」より言葉として適切かと！

Suggested change
この節では、CSSを使用してHTML要素のレイアウトを調整する方法を学びます。
例として、次のような料金プランを表すカードを作ることを目標に進めていきます。
この節では、次のような料金プランを表すカードを題材に、CSSを使用してHTML要素のレイアウトを調整する方法を学びます。

Copy link
Contributor Author

@nakaterm nakaterm Jan 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

そうですね、例ではなく題材が適切ですね！

chelproc
chelproc reviewed Jan 11, 2026
View reviewed changes
docs/2-browser-apps/05-css-layout/index.mdx Outdated

![料金プランのカードの完成形](./pricing-cards-final.png)

まずは、HTMLとCSSで料金プランのカードを作り始めてみます。
Copy link
Contributor

@chelproc chelproc Jan 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

冒頭の文との対応が浅い感じがあります！ 最初の「幅と高さ」だけbeforeもafterもスクリーンショットがあるので、そのbeforeだけ冒頭におくとまとまりが良さそうです。

Suggested change
まずは、HTMLとCSSで料金プランのカードを作り始めてみます。
まずは、次のような土台となるHTMLとCSSを用意します。ここから、各要素のレイアウトを調整していきましょう。

Copy link
Contributor Author

@nakaterm nakaterm Jan 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

before を導入部分で示すようにします！

chelproc
chelproc approved these changes Jan 11, 2026
View reviewed changes
Copy link
Contributor

@chelproc chelproc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

よさそう！！

@chvmvd chvmvd merged commit 7a5e038 into main Jan 11, 2026
3 checks passed
@chvmvd chvmvd deleted the rewrite-css-arrangement branch January 11, 2026 11:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@chelproc chelproc chelproc approved these changes

@chvmvd chvmvd chvmvd approved these changes

@Yokomi422 Yokomi422 Awaiting requested review from Yokomi422

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@nakaterm @chelproc @chvmvd