From 221c4e643419eae38a94cc78263ed750196c1fe3 Mon Sep 17 00:00:00 2001 From: ma91n Date: Tue, 1 Sep 2026 09:22:03 +0900 Subject: [PATCH] =?UTF-8?q?=E7=89=B9=E8=A8=AD=E3=83=9A=E3=83=BC=E3=82=B8?= =?UTF-8?q?=E3=81=A8=E9=80=A3=E8=BC=89=E4=B8=80=E8=A6=A7=E3=81=AE=E3=83=91?= =?UTF-8?q?=E3=83=8D=E3=83=AB=E3=81=AE=E5=9B=B2=E3=81=BF=E3=82=92=E5=A4=96?= =?UTF-8?q?=E3=81=97=E3=81=A6=E3=83=95=E3=83=A9=E3=83=83=E3=83=88=E3=81=AB?= =?UTF-8?q?=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 記事へ送るカードは一覧の1件 (#2747)、We're hiring (#2820) の順に囲みを外してきて、 枠が残っていたのは連載・特設のパネルだけだった。枠と内側の余白 (18px) のぶん 中身が狭く、1枚の高さも 38px 増えていた。 囲みを持つのは強調のために枚数を絞った枠だけにする。いま該当するのは トップページの「特集」（旬で2枚 #2892）で、包みに series-panels-boxed を足して 枠線・高さそろえ・24px のガターを持つ。全件を並べる /series/ ・ /specials/{guidelines,httf,advent-calendar,techcast}/ はフラットになる。 1枚のまとまりは間隔の比が作る。外の空きは縦横で違い、比べる相手が軸ごとに違う。 横は 48px（中のサムネ↔文字 12px の4倍。24px では2倍にしかならず、同じ形の We're hiring が同じ判断をしている #2820）、縦は 24px のまま（縦に並ぶ相手との 間に挟まる中の空きは題と添えの 4px しかなく、48px にすると帯そのもの 59px と ほぼ同じ高さの空きになる）。 /series/ の78枚で実測すると、行の送りが 123px → 83px、グリッド全体が 3,201px → 2,169px（-32%）、高さ900pxの画面に入る枚数が 21枚 → 30枚。 Closes #3152 Co-Authored-By: Claude --- CLAUDE.md | 26 ++++++++ source/specials/styleguide/index.md | 2 +- themes/future/css-src/_variables.styl | 7 +- themes/future/css-src/theme-styles.styl | 64 +++++++++++++++---- themes/future/layout/_partial/archive.ejs | 8 ++- themes/future/layout/_partial/panel-card.ejs | 5 +- .../layout/_partial/post-panel-grid.ejs | 2 +- themes/future/layout/gallery.ejs | 8 +-- themes/future/layout/httf.ejs | 2 +- themes/future/layout/series.ejs | 5 +- 10 files changed, 103 insertions(+), 26 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 35c2429401f7..d5d1961e844f 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -1394,6 +1394,32 @@ bootstrap-subset → theme-styles.styl の順で `/css/site.css` に連結する ホームの本文にあった「連載から探す」2枚はこれに置き換えた。 **「連載がある」ことは新着一覧自体が名乗る**——1ページ目の25本のうち12本が連載所属で、 7本はタイトルに「連載」と入っている +- **パネルの既定はフラット。囲みを持つのは強調のために枚数を絞った枠だけ**（#3152）。 + 記事へ送るカードは一覧の1件（#2747）・We're hiring（#2820）の順に囲みを外してきて、 + 枠が残っていたのは連載・特設のパネルだけだった。**1枚のまとまりは間隔の比が作る** + - 囲みを持つのは `.series-panels-boxed` を足した枠だけで、いまはホームの「特集」 + （旬で2枚 #2892）だけが該当する。**「特設ページだから枠」ではなく「選んで + 絞ったから枠」**。全件を並べる `/series/` ・ `/specials/guidelines/` ・ + `/specials/httf/` ・ `/specials/advent-calendar/` ・ `/specials/techcast/` は + フラットになる + - **外の空きは縦横で違う。比べる相手（中の空き）が軸ごとに違うため**。 + **横は 48px**——隣の列との境目で近づくのは「左のカードの文字」と「右のカードの + サムネ」なので、中の空き（サムネと文字の 12px）の4倍を取る。24px では2倍にしか + ならず、**同じ形の We're hiring が同じ判断をしている**（#2820）。 + **縦は 24px のまま**——1枚は［サムネ｜文字］の横帯なので、縦に並ぶ相手との間に + 挟まる中の空きは題と添えの 4px しかない。48px にすると帯そのもの（59px）と + ほぼ同じ高さの空きになり、囲みを外した意味（情報密度）が消える + - **枠を外すと情報密度が上がる。** 内側の余白（18px）と枠（1px）が消えるぶん、 + 本文列3列で題の幅が 164px → 190px、1枚の高さが 97px → 59px（題1行のとき）。 + `/series/` の78枚で実測すると、行の送りが 123px → 83px、グリッド全体が + 3,201px → 2,169px（-32%）、**高さ900pxの画面に入る枚数が 21枚 → 30枚**。 + 題が2行に折り返す連載も6件から2件に減る（幅が広がるため） + - **内側の余白を持たないので、サムネの左端が節見出し・本文とそろう**（#2820 と同じ） + - ガターの値は CSS（`.series-panels.row`）が持つ。**呼び出し側に `.g-4` を書かない** + ——markup と CSS の2箇所に同じ値を持つことになる + - hover はどちらもカードの型（題に下線・画像が一段引く）のまま。We're hiring が + 行の型（面）に移った（#3113）のは1枚＝1行き先だからで、パネルは HTTF の + メタと「特集」の全件導線に別のリンクを含む - **ホームの「特集」枠は旬で2枚選ぶ**（#2880 / #2892）。優先順は アドベントカレンダー（開催年が今年）→ Tech Cast（新エピソード）→ HTTF（開催中）→ 連載（走り終えたもの。#3135）→ ガイドライン。前3つが季節もので、常設は後ろから落ちる diff --git a/source/specials/styleguide/index.md b/source/specials/styleguide/index.md index c704fde2879c..10761098c104 100644 --- a/source/specials/styleguide/index.md +++ b/source/specials/styleguide/index.md @@ -322,7 +322,7 @@ career: true ### 影は持たない -影は1段階も持ちません。**読み物を並べる場所では輪郭をなるべく作りません。** 一覧の1件は囲みを持たず間隔だけで分け、記事へ送るカードで枠線を持つのは**横に並んで箱でないと成立しない部品**（連載・特設パネル / リンクプレビュー）だけです。タブも枠を持たず、切り替わる範囲は帯の下辺の線が示します。操作部品（検索窓・ドロップダウン）と、中身をまとめて囲む枠（統計・折りたたみ・年月のカード）はこの範囲の外です。枠がその部品の範囲そのものを作っているので、外すと境目が読めなくなります。 +影は1段階も持ちません。**読み物を並べる場所では輪郭をなるべく作りません。** 記事へ送るカードは囲みを持たず、1件のまとまりは**外の空きが中の空きより十分大きいこと**が作ります。[連載一覧](/series/)や特設ページのパネルは、隣の列との間が 48px で、サムネイルと文字の間（12px）の4倍です。枠線を持つのは**強調のために枚数を絞った枠**（[トップページ](/)の「特集」）と、リンクプレビューだけです。タブも枠を持たず、切り替わる範囲は帯の下辺の線が示します。操作部品（検索窓・ドロップダウン）と、中身をまとめて囲む枠（統計・折りたたみ・年月のカード）はこの範囲の外です。枠がその部品の範囲そのものを作っているので、外すと境目が読めなくなります。 ### hover は1部品1反応 diff --git a/themes/future/css-src/_variables.styl b/themes/future/css-src/_variables.styl index 8a3ccd34767d..708042997ef2 100644 --- a/themes/future/css-src/_variables.styl +++ b/themes/future/css-src/_variables.styl @@ -276,9 +276,10 @@ sidebar = hexo-config("sidebar") // 影は持たない（#2747）。以前は静止（card-shadow）と持ち上がり // （card-shadow-raised）の2段を置いていたが、カード＋影の見せ方をやめて // 「輪郭はなるべく作らない」方針に寄せた。 -// 一覧の1件は囲みを持たず間隔だけで分け、横に並んで箱でないと成立しない -// 部品（連載・特設パネル / We're hiring / タブ / リンクプレビュー）だけが -// 枠線（rule-base）を持つ。hover はどのカードも「中身が一段引く」。 +// 記事へ送るカードは囲みを持たず間隔だけで分ける。一覧の1件 (#2747)、 +// We're hiring (#2820)、連載・特設のパネル (#3152) の順に外してきた。 +// 枠線（rule-base）が残るのは、強調のために枚数を絞った枠（トップの「特集」）と +// リンクプレビューだけ。hover はどのカードも「中身が一段引く」。 // **新しい影を足さない。** 1つ足すと「どこに影を使うか」の判断が戻ってくる // （角丸を3段・ink を3段に絞ったのと同じ理屈 #2534） // diff --git a/themes/future/css-src/theme-styles.styl b/themes/future/css-src/theme-styles.styl index 8502f713fce0..0a318cbb7606 100644 --- a/themes/future/css-src/theme-styles.styl +++ b/themes/future/css-src/theme-styles.styl @@ -1909,8 +1909,8 @@ body { 中央値5行・最大7行で、1件は幅375pxで中央値460px・最大530pxある。 **カードの区切り（80px）が節の区切り（56px）より大きいのは階層が逆で、** さらに #2911 で区切り線が入ったので、空きだけが分ける役を負っていない。 - 横に並んで箱でないと成立しない部品（連載・特設パネル / タブ）は - 個別に枠線を持つ */ + 横に並ぶパネル（連載・特設）も #3152 で囲みを外した。枠線が残るのは + 強調のために枚数を絞った枠（トップの「特集」）だけ */ /* 一括指定にしない (#2951)。margin-left / margin-right まで 0 になり、 一覧カード（.row）が持つ負のマージン（ガターの半分）を打ち消していた。 カードの中身だけが本文列の左端から 12px 右にいて、節見出しとそろっていなかった */ @@ -2106,20 +2106,62 @@ body { font-size: text-body; } -/* 連載・特設・HTTF のパネルカード。We're hiring と同じ横並びの作り */ +/* 連載・特設・HTTF のパネルカード。We're hiring と同じ横並びの作り。 + + **既定は囲みを持たない (#3152)。** 一覧の1件 (#2747) と We're hiring (#2820) が + 先に囲みを外していて、記事へ送るカードで枠が残っていたのはここだけだった。 + 枠と内側の余白のぶん中身が狭くなり（本文列の3列で題の幅が 164px → 190px）、 + 1枚の高さも 38px 増える（題1行で 97px 対 59px）。 + 1枚のまとまりは間隔の比が作る（下の .series-panels.row）。 + 内側の余白を持たないので、サムネの左端が節見出し・本文とそろう (#2820 と同じ) */ .series-panels .article-card { display: flex; - /* 「特集」のパネルは本文が4行（ラベル・タイトル・メタ・導線）で 91px あり、 - 88×59 のサムネの 1.5 倍の高さになる。12px では文字の塊がサムネに寄って見える - ので一段広げた (#2892)。他の6箇所も同じ部品なので一緒に動かす */ - gap: 16px; + /* 囲みが無いぶん中の空きは最小段に寄せる。We're hiring と同じ 12px で、 + 外の空き（48px）の 1/4 (#2747) */ + gap: 12px; /* 固定59pxのサムネより本文（1行タイトル＋メタ）が低いことが多く、 上揃えだと本文が上に張り付く。hiring カードと同じ垂直中央 (#2347) */ align-items: center; - padding: 18px; margin: 0; - /* 囲みは .article-card ではなくここが持つ (#2747)。枠は「カード・箱を囲む線」 - なので rule-weak（区切りの線）ではなく rule-base */ +} +/* 外の空きは縦横で違う。**比べる相手（中の空き）が軸ごとに違う**ため。 + + 横は 48px。隣の列との境目で近づくのは「左のカードの文字」と「右のカードのサムネ」で、 + 中の空き（サムネと文字の 12px）の4倍を取る。24px では中の2倍にしかならず、 + We're hiring が同じ形で同じ判断をしている (#2820)。 + 広げても外側の左右の揃いは動かない（Bootstrap のガターは列の padding と + 行の負のマージンで作るので、相殺される）。 + + 縦は 24px のまま。1枚は［サムネ｜文字］の横帯なので、縦に並ぶ相手との間に + 挟まる中の空きは題と添えの 4px しかない。48px にすると帯そのもの（59px）と + ほぼ同じ高さの空きになり、囲みを外した意味（情報密度 #3152）が消える。 + + 呼び出し側に .g-4 は書かない——ガターの値をここが決めるので2箇所に持たない。 + 包み自身が行のとき（3列のグリッド）と、節の中に行を持つとき（ホームの「特集」）の + 両方に当てる */ +.series-panels.row, +.series-panels > .row { + --bs-gutter-x: 48px; + --bs-gutter-y: 24px; +} +/* 強調のために枚数を絞った枠だけが囲みを持つ (#3152)。いまはトップの「特集」 + （旬で2枚 #2892）だけ。枠は「カード・箱を囲む線」なので rule-weak（区切りの線） + ではなく rule-base。 + 高さをそろえるのもここ。囲みがあると2枚の下辺のズレが線として見える。 + + **列の間は 24px に戻す。** 切れ目は枠が作っているので、間隔で作り直す必要が無い */ +.series-panels-boxed.row, +.series-panels-boxed > .row { + --bs-gutter-x: 24px; + --bs-gutter-y: 24px; +} +.series-panels-boxed .article-card { + /* 「特集」のパネルは本文が4行（ラベル・タイトル・メタ・導線）で 91px あり、 + 88×59 のサムネの 1.5 倍の高さになる。12px では文字の塊がサムネに寄って見える + ので一段広げた (#2892) */ + gap: 16px; + padding: 18px; + height: 100%; border: 1px solid var(--rule-base); border-radius: card-radius; } @@ -3561,7 +3603,7 @@ ul.tag-list { font-size: text-meta; font-weight: 400; } -/* row(g-4) の負のトップマージンが見出しに食い込むので外す。 +/* row の負のトップマージンが見出しに食い込むので外す。 見出しとカードの間隔がカード同士の間隔（24px）と同じになる */ .group-heading + .series-panels { margin-top: 0; diff --git a/themes/future/layout/_partial/archive.ejs b/themes/future/layout/_partial/archive.ejs index 86c1890a84a6..c409fccad84d 100644 --- a/themes/future/layout/_partial/archive.ejs +++ b/themes/future/layout/_partial/archive.ejs @@ -121,11 +121,15 @@ <% const shownPanels = specialPanels.slice(0, 2); %> <% const sharedMore = new Set(shownPanels.map(function(p){ return p.more.url; })).size === 1 ? shownPanels[0].more : null; %> -
+ <%# ここだけ囲みを持つ (#3152)。パネルの既定はフラットで、枠線は「強調のために + 枚数を絞った」ときの印。この枠は候補の中から旬の2枚を選んで出している (#2892) + ので、その条件に当たる。行き先の全件は /series/ ・ /specials/ が持ち、 + そちらはフラットな一覧になる %> +
<%# 連載の索引は記事なので「特設ページ」では名前が実態と合わない (#2892)。 連載も特設ページも「記事1本ではない、まとまった読み物への入口」なので特集で束ねる %> <%- partial('section-heading', {id: 'specials', text: '特集'}) %> -
+
<% shownPanels.forEach(function(p){ %>
<%# 旬の2枚に専用の絵が無いときは空き枠。サムネの無い連載（/series/）と行頭を揃える。 diff --git a/themes/future/layout/_partial/panel-card.ejs b/themes/future/layout/_partial/panel-card.ejs index bb1787ba97d5..c94c0e5f0364 100644 --- a/themes/future/layout/_partial/panel-card.ejs +++ b/themes/future/layout/_partial/panel-card.ejs @@ -4,6 +4,9 @@ **列は呼び出し側が持つ。** 2列（ホームの特集）と3列（それ以外）で違い、 グリッドの都合はカードの都合ではない。ここが描くのはカード1枚だけ。 + **囲みも呼び出し側が持つ。** 既定はフラットで、強調のために枚数を絞った枠だけが + 包みに `series-panels-boxed` を足して枠線と高さそろえを持つ (#3152)。 + 引数: url 行き先（必須） title 題（必須） @@ -25,7 +28,7 @@ const panelMore = typeof more === 'undefined' ? null : more; const panelBlank = (typeof external !== 'undefined' && external) ? ' target="_blank" rel="noopener"' : ''; %> -
+
<% if (panelThumb) { %>