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

nakaterm · 2025-10-25T12:08:15Z

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

注意点

css-arrangement から css-layout にパスを変更した
コードブロックの行ハイライトを使用しているので、コードブロックの行ハイライトの設定を追加 #903 に依存

cloudflare-workers-and-pages · 2025-10-25T12:09:52Z

Deploying utcode-learn with Cloudflare Pages

Latest commit:	`dd65319`
Status:	✅ Deploy successful!
Preview URL:	https://cda16bda.utcode-learn.pages.dev
Branch Preview URL:	https://rewrite-css-arrangement.utcode-learn.pages.dev

View logs

chvmvd

途中ですが

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

Copilot

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.

docs/2-browser-apps/05-css-layout/_samples/media-query/index.html

nakaterm · 2025-11-15T16:29:36Z

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

chvmvd

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

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

docs/2-browser-apps/05-css-layout/_samples/width/style.css

Copilot

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.

Copilot

Pull request overview

Copilot reviewed 62 out of 100 changed files in this pull request and generated 1 comment.

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

Copilot · 2025-12-14T12:07:57Z

docs/2-browser-apps/05-css-layout/_samples/responsive-header/index.html

+        <div id="logo">MySite</div>
+        <button id="hamburger">
+          <img
+            src="https://raw.githubusercontent.com/ut-code/utcode-learn/main/docs/2-browser-apps/05-css-arrangement/hamburger.svg"


The image source path in the hamburger button references an incorrect directory. The path points to '05-css-arrangement/hamburger.svg' but based on the file structure, it should point to '05-css-layout/hamburger.svg' since the hamburger.svg file is being added to the 05-css-layout directory.

chvmvd

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

chvmvd · 2025-12-20T06:44:19Z

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

「CSS」の節の演習問題3はここでの内容と被っているので合わせて削除してもよいかもしれません cf.

utcode-learn/docs/1-trial-session/03-css/index.mdx

Line 146 in 4ad2be6

## 演習問題3（発展）

@chvmvd #905 にしました。

chvmvd · 2025-12-20T07:19:22Z

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

+}
+
+.plan {
+  font-weight: bold; /* フォントを太字にする */


「フォント」という対象に「太字にする」という操作をすることが何をすることを指しているかが少し曖昧なので、「文字の太さを太くする」などの方が曖昧でなくなり少し正確になるかもです。

(MTG メモ)「太字にする」にする

chvmvd

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

chvmvd · 2025-12-20T08:00:21Z

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

+
+現在は3枚のカードが縦に並んでいますが、これを横に並ぶようにすることを考えます。
+
+フレックスボックスを使用すると、要素を柔軟にレイアウトすることができます。フレックスボックスを使用してレイアウトするには、`display`プロパティに`flex`を指定します。フレックスボックスでレイアウトされた要素は、デフォルトで横並びになります。


この後に具体例での説明で「次の例では、カードの親要素のdisplayプロパティにflexを指定し、カードが横並びになるようにしています。」との記載はありますが、ここでも「影響を与えたい要素の親要素」などの文言があるとより親切かもです。

chvmvd · 2025-12-20T08:36:21Z

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

+```html
+<div class="card-header">
+  <div class="plan">Free</div>
+  <a href="" class="info">詳細</a>


infoよりもdetailの方がより自然な気もします。

chvmvd · 2025-12-20T08:42:33Z

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

+// highlight-end
+```
+
+次の例では、`justify-content`プロパティを`space-between`に指定することで、プラン名とリンクを水平方向の両端に配置しています。


初学者だと画像を見ても違いがわからなそうですね 🤔
拡大するかガイド線を入れるかするかなどをすると良いかもしれません。

確かにどの部分のことを言っているのか分かりにくいですね。拡大した画像にしました。

chvmvd · 2025-12-20T08:54:00Z

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

+
+```css
+@media (条件) {
+  条件が真の場合に適用されるスタイル;


条件が真の場合に適用されるスタイル;の意味が少し曖昧（複数行書けないと解釈ができてしまう）なので、コメントにして/* 条件が真の場合に適用されるスタイル */などにするのはどうでしょう？

chvmvd · 2025-12-20T09:00:38Z

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

+![ヘッダーの完成形のデスクトップでのイメージ](./responsive-header-desktop.png)
+![ヘッダーの完成形のスマートフォンでのイメージ](./responsive-header-mobile.png)
+
+- 画面幅が広い場合は、ナビゲーションメニューが表示されます。
+- 画面幅が狭い場合は、ナビゲーションメニューの代わりにハンバーガーアイコンが表示されるようにします。


特にライトモードで見た場合に、2つの画像が存在していることに気づかず、1つの画像であるように思ってしまうため、

画面幅が広い場合は、ナビゲーションメニューが表示されます。 ![ヘッダーの完成形のデスクトップでのイメージ](./responsive-header-desktop.png) 画面幅が狭い場合は、ナビゲーションメニューの代わりにハンバーガーアイコンが表示されるようにします。 ![ヘッダーの完成形のスマートフォンでのイメージ](./responsive-header-mobile.png)

などのようにすると良いかもしれません。

もしできれば、動画だとなお良さそうです。

chvmvd · 2025-12-20T09:21:13Z

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

+}
+
+#logo {
+  font-weight: bold; /* フォントを太字にする */


前と同様

chvmvd · 2025-12-20T09:32:04Z

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

+}
+
+#hamburger {
+  display: none;


現状だと、ハンバーガーメニューが表示されなさそうな気がします 🤔

編集する部分が分かりやすいよう整理した際に順番を変えてしまったのが原因でした。 ( feef8c3 で修正)

chvmvd · 2025-12-20T09:44:33Z

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

+
+![親要素にjustify-content: center;を設定したカード](./justify-center-cards.png)
+
+<ViewSource url={import.meta.url} path="_samples/justify-content" />


リンク先が存在していなさそうです。

Suggested change

<ViewSource url={import.meta.url} path="_samples/justify-content" />

<ViewSource url={import.meta.url} path="_samples/justify-center" />

chvmvd · 2025-12-20T09:49:12Z

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

+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./style.css" />


meta要素とlink要素のどちらが上でどちらが下かがものによって変わっていそうです。

utcode-learn/docs/2-browser-apps/05-css-layout/_samples/media-query/index.html

Lines 6 to 7 in d87255a

<link rel="stylesheet" href="./style.css" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Copilot

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.

Copilot · 2025-12-22T04:58:46Z

docs/2-browser-apps/05-css-layout/_samples/width-percent/index.html

+      <div class="card">
+        <div class="plan">Free</div>
+        <div class="price">無料</div>
+        <button type="button" class="button">今すぐ始める</button>


The button elements lack accessible labels. While they have visible text "今すぐ始める", screen readers need context about which plan the button applies to. Consider adding aria-label attributes like aria-label="Free プランで今すぐ始める" to distinguish between the three buttons.

この段階で扱うべき内容ではないので削っている

Copilot · 2025-12-22T04:58:46Z

docs/2-browser-apps/05-css-layout/_samples/width/index.html

+        <div class="plan">Free</div>
+        <div class="price">無料</div>


Using generic div elements for semantic content reduces accessibility. The plan name and price should use semantic HTML elements. Consider using heading elements (h2 or h3) for the plan names and appropriate elements for pricing information to improve document structure and screen reader navigation.

h2 を使うほうがいいのだろうが、マージンのリセットなどで説明が煩雑になるため断念。今回のユースケースでは div でも許容されそうと判断

Copilot · 2025-12-22T04:58:46Z

docs/2-browser-apps/05-css-layout/_samples/responsive-header/index.html

+        <button id="hamburger">
+          <img
+            src="https://raw.githubusercontent.com/ut-code/utcode-learn/main/docs/2-browser-apps/05-css-layout/hamburger.svg"
+            alt="メニュー"
+          />
+        </button>


The hamburger button's img element has alt text "メニュー" which is good, but the button itself should also have an accessible name. Since the image already provides the accessible name through alt text, this is acceptable. However, consider adding aria-label="メニューを開く" or aria-expanded="false" to make the button's purpose and state clearer for screen reader users.

Copilot · 2025-12-22T04:58:46Z

docs/2-browser-apps/05-css-layout/_samples/responsive-header/index.html

+            <li><a href="">HOME</a></li>
+            <li><a href="">ABOUT</a></li>
+            <li><a href="">WORKS</a></li>
+            <li><a href="">CONTACT</a></li>


The navigation links have empty href attributes (href=""). This creates non-functional links that may confuse users and accessibility tools. For example pages, consider using href="#" or providing placeholder URLs like href="#home", href="#about", etc.

# (fragment) のほうがユースケースに合っているのはそうだが、他に説明すべき情報が多いため、非本質の情報として削っている

nakaterm force-pushed the rewrite-css-arrangement branch 2 times, most recently from 3f0bd0b to 86bec36 Compare November 1, 2025 12:01

nakaterm force-pushed the rewrite-css-arrangement branch 2 times, most recently from b40ab58 to 4b0f703 Compare November 8, 2025 13:21

nakaterm closed this Nov 8, 2025

nakaterm force-pushed the rewrite-css-arrangement branch from 4b0f703 to cceb0dd Compare November 8, 2025 13:43

CSS の節を改訂

79f82b0

nakaterm reopened this Nov 8, 2025

slug を css-layoutに変更

e4d1929

nakaterm marked this pull request as ready for review November 8, 2025 13:52

nakaterm requested review from Yokomi422, chelproc and chvmvd November 8, 2025 13:52

chvmvd reviewed Nov 13, 2025

View reviewed changes

chvmvd reviewed Nov 14, 2025

View reviewed changes

chvmvd requested a review from Copilot November 14, 2025 09:12

Copilot started reviewing on behalf of chvmvd November 14, 2025 09:13 View session

Copilot finished reviewing on behalf of chvmvd November 14, 2025 09:13

Copilot AI reviewed Nov 14, 2025

View reviewed changes

docs/2-browser-apps/05-css-layout/_samples/media-query/index.html Outdated Show resolved Hide resolved

docs/2-browser-apps/05-css-layout/_samples/media-query/index.html Outdated Show resolved Hide resolved

nakaterm added 4 commits November 16, 2025 01:12

文言を修正

d32fed4

サンプルを修正

7d2528d

順序・構成を整理

842a7b3

コードブロックのハイライトを利用

805b494

chvmvd reviewed Nov 20, 2025

View reviewed changes

docs/2-browser-apps/05-css-layout/index.mdx Outdated Show resolved Hide resolved

docs/2-browser-apps/05-css-layout/index.mdx Show resolved Hide resolved

docs/2-browser-apps/05-css-layout/_samples/width/style.css Outdated Show resolved Hide resolved

chvmvd requested a review from Copilot November 20, 2025 14:35

Copilot started reviewing on behalf of chvmvd November 20, 2025 14:36 View session

Copilot finished reviewing on behalf of chvmvd November 20, 2025 14:37

Copilot AI reviewed Nov 20, 2025

View reviewed changes

演習問題を追加し構成を変更

2554e79

nakaterm force-pushed the rewrite-css-arrangement branch from 17f985c to 2554e79 Compare December 14, 2025 11:57

nakaterm requested a review from Copilot December 14, 2025 12:05

Copilot started reviewing on behalf of nakaterm December 14, 2025 12:06 View session

Copilot AI reviewed Dec 14, 2025

View reviewed changes

nakaterm added 2 commits December 14, 2025 22:04

SVG のパスを修正

e58f9de

文章を修正

d87255a

nakaterm force-pushed the rewrite-css-arrangement branch from 7b743f7 to d87255a Compare December 14, 2025 13:44

chvmvd reviewed Dec 20, 2025

View reviewed changes

nakaterm added 9 commits December 22, 2025 12:58

演習問題を修正

feef8c3

space-between の説明画像を修正

60b26db

display: flex; の設定対象の説明を修正

12d3ed0

リンクのクラス名を info から detail へ

234d3bd

メディアクエリの構文の説明を修正

2684e2e

演習問題の完成イメージの画像を動画に差し替え

04c5d31

ViewSource のパスを修正

cb192ea

viewport 設定を書く位置を統一

fd75596

font-weight: bold; の説明の文言を修正

dd65319

nakaterm mentioned this pull request Dec 22, 2025

CSS のボックスモデルの演習問題を削除 #905

Open

nakaterm requested review from chvmvd and Copilot December 22, 2025 04:56

Copilot started reviewing on behalf of nakaterm December 22, 2025 04:56 View session

Copilot AI reviewed Dec 22, 2025

View reviewed changes


		現在は3枚のカードが縦に並んでいますが、これを横に並ぶようにすることを考えます。

		フレックスボックスを使用すると、要素を柔軟にレイアウトすることができます。フレックスボックスを使用してレイアウトするには、`display`プロパティに`flex`を指定します。フレックスボックスでレイアウトされた要素は、デフォルトで横並びになります。


		![親要素にjustify-content: center;を設定したカード](./justify-center-cards.png)

		<ViewSource url={import.meta.url} path="_samples/justify-content" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="./style.css" />

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

nakaterm commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Deploying utcode-learn with Cloudflare Pages

Uh oh!

chvmvd left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

nakaterm commented Nov 15, 2025

Uh oh!

chvmvd left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Dec 14, 2025

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

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

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nakaterm commented Oct 25, 2025 •

edited

Loading

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

edited

Loading

chvmvd left a comment •

edited

Loading

nakaterm Dec 22, 2025 •

edited

Loading

nakaterm Dec 22, 2025 •

edited

Loading