A
コンビニのレシート
白い紙、幅380pxの1列、点線とミシン目。
明細、チェックリスト、日報に向いています。
送る文（A）
送る文の中身を見る
index.html のデザインを、下の指定で作り直してください。
記事データの取得はやり直さないでください。いま入っている記事の内容はそのまま使ってください。
別ファイルで保存をお願いします。
【方向性】
コンビニのレシート。感熱紙。幅380pxの1列。白黒だけ。等幅の数字。上から下へ延々と続く。
【配色】
- 机（ページ全体の背景）：#cfcec8
- 紙：#faf9f6（真っ白にしない）
- 文字：#191919
- 薄い文字：#8b8b85
- 色は増やさない。この4色だけ
【フォント】
- 数字と英字は等幅：font-family: "SF Mono", "Menlo", "Consolas", monospace
- 日本語は "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif
- 🔴 日本語に等幅フォントを指定しないこと（環境によって入っておらず崩れる）
- 本文は 12px、記事タイトルは 13.5px、注記は 10.5px
【レイアウト｜ここが最大の指定】
- 🔴 **紙の幅を380pxに固定して、画面の中央に置く**。これがこの型の核心
- 紙の左右のpaddingは20px。上下は18px／22px
- 紙に影を1つだけ付ける（0 6px 16px rgba(0,0,0,.22)）＝紙が机に置かれて見える
- 記事は1件ずつ縦に並べ、あいだを**破線1本**で区切る
- 画面幅420px以下では、紙の幅を100%にする
🔴 **ミシン目（紙の上下のギザギザ）｜この型でいちばん効く**
- 紙の上と下に、高さ9pxのギザギザを付ける。背景のグラデーション2枚を重ねて作る
上端 .tear-top {
height:9px; background-repeat:repeat-x; background-size:14px 9px;
background-image:
linear-gradient(45deg, #faf9f6 50%, transparent 50%),
linear-gradient(-45deg, #faf9f6 50%, transparent 50%); }
下端 .tear-bottom { 同じ指定で、角度を 135deg と -135deg にする }
- 画像も外部ライブラリも使わない
【罫線の使い分け｜レシートらしさの半分はここ】
- 大きな区切り＝**二重線**（border-top: 3px double）
- 小さな区切り＝**破線**（border-top: 1px dashed #b9b8b1）
- 記事と記事のあいだ＝破線1本
- 実線は使いどころを絞る
【この型ならではの要素｜必ず入れること】
- 🔴 **点線リーダー**＝「元記事 >」と分類名を1行に置き、あいだを点線でつなぐ
（レシートの「品名 ……… 金額」と同じ形。**これが入ると一気にレシートに見える**）
背景に点線を敷き、左右の文字の背景を紙の色で塗ってつなぎ目を隠す
.dot { background-image:linear-gradient(to right,#c3c2bb 33%,transparent 0);
background-size:4px 1px; background-repeat:repeat-x; background-position:0 .85em; }
- **ヘッダーを中央揃えにする**
店名「AI NEWS MART」＝17px・等幅・字間を大きく空ける（letter-spacing: .42em）
その下に「ＡＩ・テック速報」を11px・薄い文字で
その下に「2026.09.04 12:42 No.0030」＝いちばん新しい記事の公開日時と、掲載件数
- 🔴 **合計欄**＝記事一覧の下に、二重線で区切って「合計 ........ 30点」を大きく置く（数字は23px）
- **内訳**＝合計の下に、分類別の件数と、ソース別の件数を点線リーダーで並べる
- 🔴 **バーコード**＝いちばん下に、高さ44pxの縞模様を置く。CSSだけで作る
background: repeating-linear-gradient(90deg,
#191919 0 2px, transparent 2px 4px, #191919 4px 5px, transparent 5px 9px,
#191919 9px 12px, transparent 12px 13px, #191919 13px 14px, transparent 14px 18px);
- **バーコードの下に番号**を等幅で（「2026 0904 0030」＝日付と件数）
- **いちばん下に一言**「ご確認は元記事でお願いします」（10.5px・薄い文字・中央）
- 🔴 **記事データに無い数字を作らないこと**
（金額・税額・ポイント・釣銭・レジ番号・店舗の住所や電話番号は**存在しません**）
「合計」は金額ではなく**件数**にする。番号は日付と件数から作る
【記事1件の組み方】
- 1行目＝「001 12:42 ITM」（連番3桁・時刻・ソースの3文字コード）を薄い文字・等幅で
ソースは3文字にする（ITmedia AI＋＝ITM ／ TechCrunch＝TCR ／ Publickey＝PBK）
- 2行目＝記事タイトル（13.5px・太字）。折り返してよい
- 3行目＝要約（10.5px・薄い文字）。**2行までで切って、続きは … にする**
（display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden）
- 4行目＝「元記事 >」……（点線）……「分類名」
- ⚠️ **公開時刻を持たない記事があります**（日付だけの記事が混ざる）。時刻が取れない記事は `--:--` と表示する。空欄にしない
【文言も書き換えてください｜ここを必ず守ること】
CSSだけでなく、HTMLの中の文字そのものも書き換えてください。見た目を変えるだけでは足りません。
⚠️ 下の「今の表記」は一例です。**実際の文言が違っていても、同じ意味の場所を探して置き換えてください**。
- ページの見出し（「AI・テック RSS ダッシュボード」など）→ 中央揃えの店名「AI NEWS MART」に
- ページ全体の説明文（見出しの下にあるリード文）→ **削除する**。レシートに説明文は無い
- 件数の表示（「30件を表示中（全30件）」など）→ 一覧の下の「合計 30点」にまとめる
- 元記事へのリンク → 各記事の4行目に「元記事 >」として置く
（記事のタイトル自体がリンクになっている場合は、タイトルからリンクを外してここへ移す）
- 集計の棒グラフ → **棒をやめて、点線リーダーの一覧にする**（「モデル・新製品 …… 7点」の形）
【日本語の組版｜必ず入れること】
- body { font-feature-settings: "palt"; }
- 記事タイトル { text-wrap: balance; word-break: auto-phrase; line-break: strict; }
- 要約・注記 { text-wrap: pretty; line-break: strict; }
- 🔴 **word-break: auto-phrase を必ず入れる**＝日本語を文節で折り返す指定
これが無いと「サイバ／ー攻撃」のように**長音符が1文字だけ次の行に落ちる**。
幅380pxは1行が短いぶん、この症状が最も出やすい
【禁止】
- 角丸を使わない（border-radius は全て 0）
- 紙以外に影を使わない
- グラデーションで飾らない（ミシン目とバーコードの作図だけ例外）
- 記事をカードにしない。横に並べない。**1列だけ**
- タグに背景色を付けた丸いラベル（バッジ）を使わない
- ボタンを角丸の楕円（ピル型）にしない
- 色を増やさない
【操作部分】
- ヘッダーの二重線の下に置く
- 分類の絞り込みは、中央揃えの文字を**左右の余白だけで区切って**並べる。ボタンの枠線は付けない
⚠️ **「｜」などの区切り文字を入れないこと**＝紙の幅が狭く、分類名が2行に折り返るため、
**行の終わりに区切り文字だけが取り残される**（幅390pxで実測）。余白（左右9px前後）で足りる
- 選択中の分類は、太字＋下線2pxにする
- 検索ボックスは紙の幅いっぱい。細い実線1本の四角で、中の文字は中央揃え・等幅