検索結果 · 検索結果ページ

図書館カード目録風の検索結果

保存した一覧を見る 0 →

このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。

印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。

Vibehaus · デザイン資料
https://vibe.itlibra.com/design/library-catalog-search/
完全無料・著作権フリー(CC0)· 料金¥0 · 商用利用・改変自由

プレビュー

画面に合わせる

指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。

vibe.itlibra.com/preview/library-catalog-search/

AIへの指示文

アーカイブ・ナレッジベースの検索結果ページを、図書館の目録カードカタログとして作ってください。

要件:
- 配色: 古紙 #f3ead6 + 古色 #e8dcbe(カード)+ 墨 #1a1410 + 朱赤 #b8281c + 緑 #2c5a3a。
- 全画面に淡いドットノイズ(radial-gradient、4×4px)+ 朱・緑の薄いシミ(radial-gradient ぼかし)。
- 上部ヘッダー: 4px 二重線 + 1px 線で挟んだ帯。「図書館目録 · CATALOG」太明朝 + サブ「NIPPON CENTRAL LIBRARY · EST. 1948」モノスペース、letter-spacing 0.4em。
- 検索フォーム: 2px 黒ボーダー、左上にラベルを背景でくり抜き「FORM 04 — QUERY ENTRY」。中央に下線型大型入力欄(Special Elite フォント、22px)。右に「検索 →」スタンプ風ボタン(hover で白黒反転)。
- フィルタ行: チェックボックス(在庫あり/貸出中)+ select(分類・並び順)。欧文標識は字間を広げ、和文ラベルと本文の letter-spacing は0にする。
- 結果メタ: 掲載した見本数・絞り込み後の実件数・現在の表示範囲を表示し、1.5px 黒線で下区切り。架空の処理時間は出さない。
- 検索結果カード5枚を縦積み:
  - 古色 #e8dcbe 背景 + 1.5px 黒ボーダー + 微妙な傾き(rotate -0.4 〜 +0.5deg、margin-left を交互に変えてバラけさせる)
  - 100px 幅の請求記号ボックス(赤ボーダー、CALL № 表記、太字)
  - メインタイトル(明朝22px、強調語は <em> + 黄色マーカー風 background-color)
  - 著者・ローマ字表記・出版年
  - 在庫スタンプ(緑「在庫 / AVAILABLE」or 赤「貸出中 / BORROWED」、rotate -4deg)
  - メタグリッド(出版社/ISBN/所在/蔵書年)4カラム
  - 朱赤の登録済スタンプ印(円形、rotate 8deg、明朝書体)
- hover で rotate(0deg) + translateX(4px) + shadow 強化。
- ページネーション: PREV / 1 2 3 4 ... / NEXT、現在ページは黒地白文字。
- フォント: Special Elite + Courier Prime(タイプライター系)+ Yu Mincho / Hiragino Mincho ProN(明朝、見出し)+ JetBrains Mono フォールバック。
- 検索・在庫・分類・出版年順・ページ送りはJavaScriptで掲載5件だけを処理し、入力を外部送信・保存しない。JavaScriptなしでは全件と説明リンクを残し、動かない操作を無効にする。フルレスポンシブ(メタグリッドは2カラムへ、card-headは1カラムへ)。

バリエーション

アーカイブ図書館版(黒地)

色を完全反転(黒地 #1a1410、紙白文字)。スタンプはネガポジ反転。
ノイズを少し強めて古い文書感を強化。

美術館収蔵品検索版

請求記号を「accession number」風に変更(M-2024-0421)。タイトルに作品メディウム・寸法を追加。
在庫を「展示中 / 収蔵中」に置換。

このプレビューのコード

HTML・CSS・JavaScriptの1ファイルです。外部依存・広告・解析コードはありません。架空の書籍5件をページ内で検索する見本です。在庫・分類・出版年順とページ送り、0件からの条件解除を試せます。実際の蔵書照会・貸出予約・外部送信・保存は行いません。

CC0 · 改変・商用利用自由 · revision 9856fd0cd92a

コードを表示
<!doctype html>
<!-- Vibehaus · CC0 · 架空の検索デモ。外部依存・送信・永続保存なし。 -->
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex,nofollow">
<title>library-catalog-search preview</title>
<style>
  :root {
    --paper: #f3ead6;
    --paper-aged: #e8dcbe;
    --ink: #1a1410;
    --ink-soft: #5a4a38;
    --ink-faint: #8a7a60;
    --red: #b8281c;
    --green: #2c5a3a;
    --rule: #5a4a38;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: "Special Elite", "Courier Prime", "Courier New", "Yu Mincho", "Noto Serif JP", serif;
    line-height: 1.7;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    background-image:
      radial-gradient(rgba(90,74,56,0.08) 1px, transparent 1px),
      radial-gradient(circle at 18% 22%, rgba(184,40,28,0.04), transparent 50%),
      radial-gradient(circle at 82% 78%, rgba(44,90,58,0.04), transparent 50%);
    background-size: 4px 4px, auto, auto;
  }
  .stage {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 56px);
    position: relative;
  }

  /* Top bar - library system header */
  .topbar {
    border-top: 4px double var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 14px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .topbar .system {
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 20px;
    letter-spacing: 0.2em;
    text-transform: none;
    font-weight: 700;
  }
  .topbar .system span { color: var(--red); }
  .topbar .system small {
    display: block;
    font-family: "Special Elite", monospace;
    font-size: 9.5px;
    letter-spacing: 0.4em;
    color: var(--ink-soft);
    margin-top: 2px;
  }

  /* Search box */
  .search {
    border: 2px solid var(--ink);
    background: rgba(255,255,255,0.5);
    padding: 18px 22px 14px;
    margin-bottom: 28px;
    position: relative;
  }
  .search::before {
    content: "FORM 04 — QUERY ENTRY";
    position: absolute;
    top: -10px; left: 16px;
    background: var(--paper);
    padding: 0 10px;
    font-size: 9.5px;
    letter-spacing: 0.35em;
    color: var(--red);
  }
  .search-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: end;
    gap: 14px;
  }
  .search label {
    display: block;
    font-size: 9.5px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 4px;
  }
  .search-row .field {
    border-bottom: 1.5px solid var(--ink);
    padding-bottom: 4px;
  }
  .search-row .field input {
    width: 100%;
    border: 0;
    background: transparent;
    font: 700 22px/1.3 "Special Elite", "Courier Prime", monospace;
    color: var(--ink);
    outline: none;
    letter-spacing: 0.04em;
  }
  .search-row .stamp {
    border: 1.5px solid var(--ink);
    padding: 10px 18px;
    font-size: 11px;
    letter-spacing: 0.35em;
    color: var(--ink);
    background: var(--paper);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
  }
  .search-row .stamp:hover { background: var(--ink); color: var(--paper); }

  /* Filter row */
  .filters {
    display: flex;
    gap: 14px 22px;
    align-items: center;
    margin-top: 14px;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    flex-wrap: wrap;
    color: var(--ink-soft);
  }
  .filters label {
    display: flex; align-items: center; gap: 6px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--ink);
  }
  .filters label input {
    width: 12px; height: 12px;
    accent-color: var(--ink);
  }
  .filters select {
    border: 1px solid var(--ink);
    background: rgba(255,255,255,0.4);
    padding: 4px 10px;
    font: 11px "Special Elite", monospace;
    letter-spacing: 0.18em;
    color: var(--ink);
    outline: none;
  }

  /* Results meta */
  .results-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1.5px solid var(--ink);
    padding-bottom: 10px;
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: 0.25em;
  }
  .results-meta .left {
    color: var(--ink);
    font-weight: 700;
  }
  .results-meta .left b { color: var(--red); font-size: 18px; margin-right: 6px; }
  .results-meta .right { color: var(--ink-soft); font-size: 10.5px; }

  /* Cards stack */
  .cards {
    display: grid;
    gap: 14px;
    margin-top: 16px;
  }

  .card {
    --tilt: 0deg;
    background: var(--paper-aged);
    border: 1.5px solid var(--ink);
    padding: 18px 22px;
    position: relative;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.5) inset,
      0 6px 14px -8px rgba(26,20,16,0.45);
    transform: rotate(var(--tilt));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: inherit;
    display: block;
  }
  .card.t-a { --tilt: -0.4deg; }
  .card.t-b { --tilt: 0.3deg; margin-left: 8px; }
  .card.t-c { --tilt: -0.2deg; }
  .card.t-d { --tilt: 0.5deg; margin-left: 4px; }
  .card.t-e { --tilt: -0.3deg; margin-left: 12px; }

  .card:hover {
    transform: rotate(0deg) translateX(4px);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.6) inset,
      0 12px 24px -8px rgba(26,20,16,0.55);
    z-index: 2;
  }

  /* Card header row */
  .card-head {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 22px;
    align-items: start;
    border-bottom: 1px dashed var(--ink-soft);
    padding-bottom: 8px;
    margin-bottom: 8px;
  }
  .call {
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--red);
    border: 1.2px solid var(--red);
    padding: 4px 8px;
    text-align: center;
    line-height: 1.2;
  }
  .call b { display: block; font-size: 16px; letter-spacing: 0.05em; margin-top: 1px; }

  .title {
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: var(--ink);
    margin: 0;
  }
  .title em {
    font-style: normal;
    font-weight: 700;
    background: rgba(245,185,56,0.5);
    padding: 0 3px;
  }
  .title small {
    display: block;
    margin-top: 4px;
    font-family: "Special Elite", monospace;
    font-size: 11px;
    font-weight: 400;
    color: var(--ink-soft);
    letter-spacing: 0.18em;
  }

  .stamp-status {
    border: 2px solid var(--green);
    color: var(--green);
    padding: 6px 10px;
    font-size: 10.5px;
    letter-spacing: 0.3em;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    transform: rotate(-4deg);
    background: rgba(255,255,255,0.4);
  }
  .stamp-status small {
    display: block;
    font-size: 8px;
    letter-spacing: 0.2em;
    margin-top: 2px;
  }
  .stamp-status.borrowed { color: var(--red); border-color: var(--red); }

  .meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 18px;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--ink);
  }
  .meta-grid .lbl {
    display: block;
    font-size: 9px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 1px;
  }
  @media (max-width: 720px) {
    .meta-grid { grid-template-columns: repeat(2, 1fr); }
    .card-head { grid-template-columns: 1fr; gap: 12px; }
  }

  /* Stamp impressions on cards */
  .imprint {
    position: absolute;
    bottom: 6px; right: 18px;
    color: var(--red);
    border: 1.5px solid var(--red);
    border-radius: 50%;
    width: 56px; height: 56px;
    display: grid;
    place-items: center;
    text-align: center;
    transform: rotate(8deg);
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 9.5px;
    letter-spacing: 0.15em;
    background: rgba(184,40,28,0.06);
    line-height: 1.2;
    font-weight: 700;
  }
  .imprint b { display: block; font-size: 12px; }

  /* Pagination */
  .pagination {
    margin-top: 28px;
    border-top: 1.5px solid var(--ink);
    padding-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    letter-spacing: 0.25em;
    color: var(--ink-soft);
  }
  .pagination .pages {
    display: flex; gap: 6px;
    align-items: center;
  }
  .pagination .pages a, .pagination .pages span {
    border: 1px solid var(--ink-soft);
    padding: 6px 10px;
    text-decoration: none;
    color: var(--ink);
    font-family: "Special Elite", monospace;
    transition: all 0.18s ease;
  }
  .pagination .pages a:hover { background: var(--ink); color: var(--paper); }
  .pagination .pages .now { background: var(--ink); color: var(--paper); }

[hidden]{display:none!important}button,input,select{font-family:inherit}button,a,input,select{scroll-margin-top:calc(var(--header-height,0px) + 16px)}
:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid currentColor!important;outline-offset:3px}button{cursor:pointer}button:disabled{cursor:default;opacity:.6}
.demo-note{margin:2rem 0 0;border-top:1px solid currentColor;padding-top:1rem;font-size:13px;line-height:1.8;letter-spacing:0;overflow-wrap:anywhere}.demo-note h2{font-size:17px;line-height:1.5;letter-spacing:0}.demo-note h3{font-size:15px;line-height:1.5;letter-spacing:0}.demo-note p{letter-spacing:0}
.demo-note section{scroll-margin-top:calc(var(--header-height,0px) + 16px)}.demo-note a{display:inline-flex;align-items:center;min-height:44px}
.demo-caption,.search-error,.empty p{font-size:13px;line-height:1.8;letter-spacing:0;overflow-wrap:anywhere}.empty{padding:1.25rem;border:1px solid currentColor;margin:1rem 0}.empty h2{font-size:18px;line-height:1.5;letter-spacing:0}
.empty button,.reset-all{font:inherit;min-height:44px;min-width:44px;background:transparent;color:inherit;border:1px solid currentColor;padding:.5rem .75rem;letter-spacing:0}.reset-all{font-size:13px}
.pager button,.pagination button{font:inherit;min-width:44px;min-height:44px;border:1px solid currentColor;color:inherit;background:transparent;padding:.4rem .6rem;letter-spacing:0}.pager,.pagination{flex-wrap:wrap;gap:.5rem}.pager [aria-current],.pagination [aria-current]{background:var(--ink);color:#fff}
[data-results-heading]{scroll-margin-top:calc(var(--header-height,0px) + 16px);overflow-wrap:anywhere}.search-error{color:inherit;border-left:3px solid currentColor;padding-left:.75rem}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.stage{padding:clamp(16px,4vw,48px)}.topbar{flex-wrap:wrap;gap:1rem}.system{overflow-wrap:anywhere}.system small{letter-spacing:.12em!important}.search-row{grid-template-columns:minmax(0,1fr) auto auto}.search-row .field{min-width:0}.search-row .field input{min-height:44px;font-size:18px;font-family:inherit;line-height:1.7;letter-spacing:0}.search-row .stamp{min-height:44px;min-width:44px;letter-spacing:0;font:inherit;font-size:13px}.filters{letter-spacing:0;gap:.5rem 1rem}.filters .opt{min-height:44px;margin:0;font-size:13px}.filters .opt input{width:20px;height:20px;flex:none}.filters select{min-height:44px;max-width:100%;font:inherit;font-size:16px;letter-spacing:0}.filters .n{margin-left:.5rem}.applied{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}.tag{font:inherit;font-size:13px;min-height:44px;min-width:44px;background:var(--paper-aged);border:1px solid var(--ink);color:var(--ink);padding:.5rem}.results-meta{letter-spacing:0}.card{padding-bottom:76px}.card-head{grid-template-columns:100px minmax(0,1fr) auto}.meta-grid{grid-template-columns:repeat(4,minmax(0,1fr));overflow-wrap:anywhere}.meta-grid .lbl{color:var(--ink-soft);letter-spacing:0}.imprint{bottom:12px}.title mark{background:rgba(245,185,56,.5);color:inherit}.title{letter-spacing:0}.title small{letter-spacing:0}.call{overflow-wrap:anywhere}.demo-caption{color:var(--ink-soft)}
@media(max-width:720px){.card-head{grid-template-columns:1fr}.meta-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:540px){.search-row{grid-template-columns:1fr 1fr}.search-row .field{grid-column:1/-1}.search{padding:18px 14px 14px}.card{padding-left:14px;padding-right:14px}.card.t-b,.card.t-d,.card.t-e{margin-left:0}}
.applied>button{min-height:44px;min-width:44px;font:inherit;font-size:13px;padding:.4rem .6rem;background:var(--paper);border:1px solid var(--ink);color:var(--ink)}.imprint{color:#9c2118;border-color:#9c2118}
.stage>h1{font-size:clamp(22px,3vw,32px);line-height:1.5;letter-spacing:0;margin:.75rem 0 1rem}
.topbar{margin-bottom:16px}.stage>h1{margin:.5rem 0 1rem;font-size:clamp(22px,3vw,28px)}.search{padding:14px 18px 10px;margin-bottom:12px}.search .demo-caption{margin:.5rem 0 0;font-size:12px}.filters{margin-top:8px}.applied{margin:.75rem 0}
</style>
</head>
<body data-demo="library">
  <div class="stage">
    <header class="topbar">
      <div class="system">図書館目録 <span>·</span> CATALOG<small>FICTIONAL LIBRARY · CARD DEMO</small></div>
      <div>BRANCH 04 · CARD INDEX</div>
    </header>

    <h1 id="results-heading" data-results-heading tabindex="-1">すべての目録</h1><form class="search" role="search" method="dialog" autocomplete="off"><div class="search-row"><div class="field"><label for="query">QUERY · 検索語</label><input type="search" id="query" value="" maxlength="120" placeholder="例:デザイン、朝岡" autocomplete="off" data-js-control disabled></div><button class="stamp" type="button" data-search data-js-control disabled>検索 →</button><button class="stamp" type="button" data-clear-query data-js-control disabled>検索語を消す</button></div><div class="filters"><label class="opt"><input id="available" type="checkbox" data-filter="availability" value="available" data-label="在庫あり" data-js-control disabled><span>在庫あり</span><span class="n" data-count-for="available">—</span></label><label class="opt"><input id="borrowed" type="checkbox" data-filter="availability" value="borrowed" data-label="貸出中" data-js-control disabled><span>貸出中</span><span class="n" data-count-for="borrowed">—</span></label><label for="classification">分類</label><select id="classification" data-js-control disabled><option value="">すべての分類</option><option value="7">007 情報科学</option><option value="674">674・675 デザイン</option></select><label for="sort">並び順</label><select id="sort" data-js-control disabled><option value="default">掲載順</option><option value="new">新しい順</option><option value="old">古い順</option></select></div><p class="demo-caption">架空の5件を検索。空白区切りはすべての語に一致し、入力は送信・保存しません。右の件数は項目を切り替えた後の結果数です。</p></form><p class="search-error" data-error role="status" hidden></p><div class="applied" data-applied hidden></div>

    <div class="results-meta"><div class="left" data-count role="status">5件の表示見本</div></div><section class="empty" data-empty hidden><h2>条件に合う見本がありません</h2><p>検索語や絞り込みを緩めて、掲載した見本から探せます。</p><button type="button" data-relax-query>検索語を消す</button> <button type="button" data-relax-filters>絞り込みを外す</button> <button type="button" data-reset-all>すべての見本を見る</button></section><section class="cards" data-results aria-label="目録の検索結果">
      <a href="#demo-item-1" data-result data-availability="available" data-classification="674" data-year="2024" data-id="1" class="card t-a">
        <div class="card-head">
          <div class="call">CALL №<b>674.6 / VH</b></div>
          <h3 class="title"><span data-title>ブランディングのデザイン論 — 100 年史</span><small>ASAOKA YUSUKE · 朝岡 雄介 · 2024</small></h3>
          <div class="stamp-status">在庫<small>AVAILABLE</small></div>
        </div>
        <div class="meta-grid">
          <div><span class="lbl">出版社</span>武蔵野書房</div>
          <div><span class="lbl">ISBN</span>978-4-902370-22-4</div>
          <div><span class="lbl">所在</span>本館 · 3F-DESIGN</div>
          <div><span class="lbl">蔵書年</span>2024-09-12</div>
        </div>
        <span class="imprint">登録<b>済</b></span>
      </a>

      <a href="#demo-item-2" data-result data-availability="available" data-classification="7" data-year="2025" data-id="2" class="card t-b">
        <div class="card-head">
          <div class="call">CALL №<b>007.6 / WD</b></div>
          <h3 class="title"><span data-title>Web デザインの現代史 — タイポグラフィから AI まで</span><small>NISHIMURA KAORI · 西村 香織 · 2025</small></h3>
          <div class="stamp-status">在庫<small>AVAILABLE</small></div>
        </div>
        <div class="meta-grid">
          <div><span class="lbl">出版社</span>サマー社</div>
          <div><span class="lbl">ISBN</span>978-4-902370-31-6</div>
          <div><span class="lbl">所在</span>本館 · 3F-DESIGN</div>
          <div><span class="lbl">蔵書年</span>2025-03-21</div>
        </div>
        <span class="imprint">登録<b>済</b></span>
      </a>

      <a href="#demo-item-3" data-result data-availability="borrowed" data-classification="674" data-year="2023" data-id="3" class="card t-c">
        <div class="card-head">
          <div class="call">CALL №<b>675.4 / BB</b></div>
          <h3 class="title"><span data-title>ブランディングの言語学 — 名前と物語の力</span><small>SATO YOKO · 佐藤 葉子 · 2023</small></h3>
          <div class="stamp-status borrowed">貸出中<small>BORROWED</small></div>
        </div>
        <div class="meta-grid">
          <div><span class="lbl">出版社</span>東洋大学出版会</div>
          <div><span class="lbl">ISBN</span>978-4-902370-44-9</div>
          <div><span class="lbl">所在</span>分館 · 2F-MEDIA</div>
          <div><span class="lbl">返却予定</span>2026-05-08</div>
        </div>
        <span class="imprint">登録<b>済</b></span>
      </a>

      <a href="#demo-item-4" data-result data-availability="available" data-classification="7" data-year="2024" data-id="4" class="card t-d">
        <div class="card-head">
          <div class="call">CALL №<b>007.3 / DG</b></div>
          <h3 class="title"><span data-title>デジタルプロダクトのデザイン原則</span><small>YAMADA TAKESHI · 山田 健 · 2024</small></h3>
          <div class="stamp-status">在庫<small>AVAILABLE</small></div>
        </div>
        <div class="meta-grid">
          <div><span class="lbl">出版社</span>白夜書林</div>
          <div><span class="lbl">ISBN</span>978-4-902370-58-0</div>
          <div><span class="lbl">所在</span>本館 · 3F-DESIGN</div>
          <div><span class="lbl">蔵書年</span>2024-11-04</div>
        </div>
        <span class="imprint">登録<b>済</b></span>
      </a>

      <a href="#demo-item-5" data-result data-availability="available" data-classification="674" data-year="2022" data-id="5" class="card t-e">
        <div class="card-head">
          <div class="call">CALL №<b>674.0 / TY</b></div>
          <h3 class="title"><span data-title>タイポグラフィ100選 — 明朝・ゴシック・モダン</span><small>TAKAGI HIROSHI · 高木 寛 · 2022</small></h3>
          <div class="stamp-status">在庫<small>AVAILABLE</small></div>
        </div>
        <div class="meta-grid">
          <div><span class="lbl">出版社</span>北星社</div>
          <div><span class="lbl">ISBN</span>978-4-902370-12-5</div>
          <div><span class="lbl">所在</span>本館 · 3F-DESIGN</div>
          <div><span class="lbl">蔵書年</span>2022-04-18</div>
        </div>
        <span class="imprint">登録<b>済</b></span>
      </a>
    </section>

    <nav class="pagination" data-pager aria-label="結果のページ送り" hidden></nav><aside class="demo-note" id="demo-about"><h2>この見本について</h2><p>架空の図書館と書籍を使った検索デモです。掲載した5件だけをこのページ内で検索し、在庫・分類の絞り込み・並び替え・ページ送りを試せます。入力は外部へ送信・保存せず、URLにも含めません。配布HTMLはCC0・利用料¥0です。</p><p>書名・著者・出版社・ISBN・所在・蔵書年・在庫は表示見本です。実在の蔵書照会・貸出予約は行いません。</p><section id="demo-service" tabindex="-1"><h3>蔵書サービスの見本</h3><p>実際の在庫取得や貸出は含みません。</p></section><section id="demo-item-1" tabindex="-1"><h3>ブランディングのデザイン論 — 100 年史</h3><p>書名・著者・出版情報・在庫と請求記号の配置を示す架空の資料です。外部の目録照会や貸出予約は行いません。</p><a href="#results-heading">検索結果へ戻る</a></section><section id="demo-item-2" tabindex="-1"><h3>Web デザインの現代史 — タイポグラフィから AI まで</h3><p>書名・著者・出版情報・在庫と請求記号の配置を示す架空の資料です。外部の目録照会や貸出予約は行いません。</p><a href="#results-heading">検索結果へ戻る</a></section><section id="demo-item-3" tabindex="-1"><h3>ブランディングの言語学 — 名前と物語の力</h3><p>書名・著者・出版情報・在庫と請求記号の配置を示す架空の資料です。外部の目録照会や貸出予約は行いません。</p><a href="#results-heading">検索結果へ戻る</a></section><section id="demo-item-4" tabindex="-1"><h3>デジタルプロダクトのデザイン原則</h3><p>書名・著者・出版情報・在庫と請求記号の配置を示す架空の資料です。外部の目録照会や貸出予約は行いません。</p><a href="#results-heading">検索結果へ戻る</a></section><section id="demo-item-5" tabindex="-1"><h3>タイポグラフィ100選 — 明朝・ゴシック・モダン</h3><p>書名・著者・出版情報・在庫と請求記号の配置を示す架空の資料です。外部の目録照会や貸出予約は行いません。</p><a href="#results-heading">検索結果へ戻る</a></section><noscript><p>JavaScriptが無効なため検索・条件変更・ページ送りは動きません。全件を表示し、カードの説明リンクは利用できます。</p></noscript></aside>
  </div>
<script>
const library=document.body.dataset.demo==='library',all=[...document.querySelectorAll('[data-result]')],query=document.querySelector('#query'),search=document.querySelector('[data-search]'),sort=document.querySelector('#sort'),count=document.querySelector('[data-count]'),heading=document.querySelector('[data-results-heading]'),pager=document.querySelector('[data-pager]'),empty=document.querySelector('[data-empty]'),error=document.querySelector('[data-error]'),filters=[...document.querySelectorAll('[data-filter]')],chips=document.querySelector('[data-applied]');
const normalize=value=>value.normalize('NFKC').toLocaleLowerCase('ja').trim(),terms=value=>normalize(value).split(/\s+/).filter(Boolean);
const records=all.map((el,index)=>({el,index,title:el.querySelector('[data-title]').textContent,text:normalize(el.textContent),...el.dataset}));
let activeQuery=query.value,activeMin=2000,activeMax=5000,currentPage=1,composing=false;const pageSize=library?3:4;
function state(){const result={};for(const input of filters){const group=input.dataset.filter;(result[group]??=[]);if(input.checked)result[group].push(input.value)}return result}
function matches(item,s,skip=''){
 if(!terms(activeQuery).every(term=>item.text.includes(term)))return false;
 if(library){if(skip!=='availability'&&s.availability.length&&!s.availability.includes(item.availability))return false;const category=document.querySelector('#classification').value;return skip==='classification'||!category||item.classification===category}
 if(skip!=='price'&&((activeMin!==null&&Number(item.price)<activeMin)||(activeMax!==null&&Number(item.price)>activeMax)))return false;
 for(const group of ['capacity','brand'])if(skip!==group&&s[group].length&&!s[group].includes(item[group]))return false;
 if(skip!=='shipping'&&!s.shipping.every(value=>item[value]==='true'))return false;
 if(skip!=='rating'&&s.rating.length&&!s.rating.some(value=>Number(item.rating)>=Number(value)))return false;return true;
}
function selection(){return records.filter(item=>matches(item,state()))}
function sorted(items){return [...items].sort((a,b)=>sort.value==='new'?Number(b.year)-Number(a.year):sort.value==='old'?Number(a.year)-Number(b.year):sort.value==='price'?Number(a.price)-Number(b.price):sort.value==='rating'?Number(b.rating)-Number(a.rating):a.index-b.index)}
function highlight(el,text){const fragment=document.createDocumentFragment(),needles=terms(activeQuery),normalized=normalize(text);let pos=0;while(pos<text.length){let start=-1,length=0;for(const term of needles){const found=normalized.indexOf(term,pos);if(found>=0&&(start<0||found<start||(found===start&&term.length>length))){start=found;length=term.length}}if(start<0){fragment.append(document.createTextNode(text.slice(pos)));break}fragment.append(document.createTextNode(text.slice(pos,start)));const mark=document.createElement('mark');mark.textContent=text.slice(start,start+length);fragment.append(mark);pos=start+length}el.replaceChildren(fragment)}
function removeConditions(){for(const input of filters)input.checked=false;if(library)document.querySelector('#classification').value='';else{activeMin=null;activeMax=null;document.querySelector('#min-price').value='';document.querySelector('#max-price').value=''}currentPage=1;error.hidden=true;document.querySelectorAll('[aria-invalid]').forEach(el=>el.removeAttribute('aria-invalid'));render()}
function resetAll(){query.value='';activeQuery='';sort.value='default';removeConditions();heading.focus()}
function makeButton(text,action){const button=document.createElement('button');button.type='button';button.textContent=text;button.addEventListener('click',action);return button}
function addChip(text,action){const button=makeButton(text+' ×',()=>{action();currentPage=1;render();heading.focus()});button.className='tag';button.setAttribute('aria-label',text+'の条件を解除');chips.append(button)}
function render(){
 const items=sorted(selection()),pages=Math.max(1,Math.ceil(items.length/pageSize));currentPage=Math.max(1,Math.min(currentPage,pages));const visible=items.slice((currentPage-1)*pageSize,currentPage*pageSize);
 all.forEach(el=>el.hidden=true);for(const item of items)document.querySelector('[data-results]').append(item.el);for(const item of visible)item.el.hidden=false;
 for(const item of records)highlight(item.el.querySelector('[data-title]'),item.title);
 const range=items.length?((currentPage-1)*pageSize+1)+'〜'+Math.min(currentPage*pageSize,items.length)+'件を表示':'表示できる結果はありません';count.textContent=items.length+'件 / '+range+'(掲載'+records.length+'件の見本)';
 heading.textContent=activeQuery?'「'+activeQuery+'」の検索結果':library?'すべての目録':'すべての商品';
 pager.replaceChildren();if(items.length){for(const [text,page]of [['前へ',currentPage-1],...Array.from({length:pages},(_,i)=>[String(i+1),i+1]),['次へ',currentPage+1]]){const button=makeButton(text,()=>{currentPage=page;render();heading.focus()});button.disabled=page<1||page>pages;if(page===currentPage&&/^\d+$/.test(text))button.setAttribute('aria-current','page');pager.append(button)}}pager.hidden=!items.length;
 empty.hidden=items.length>0;
 chips.replaceChildren();for(const input of filters)if(input.checked)addChip(input.dataset.label,()=>input.checked=false);
 if(library){const classification=document.querySelector('#classification');if(classification.value)addChip(classification.selectedOptions[0].textContent,()=>classification.value='')}
 else if(activeMin!==null||activeMax!==null)addChip('価格 '+(activeMin??'指定なし')+'〜'+(activeMax??'指定なし')+'円',()=>{activeMin=null;activeMax=null;document.querySelector('#min-price').value='';document.querySelector('#max-price').value='';error.hidden=true;document.querySelectorAll('[aria-invalid]').forEach(el=>el.removeAttribute('aria-invalid'))})
 if(!chips.childNodes.length){const label=document.createElement('span');label.textContent='絞り込みなし';chips.append(label)}chips.append(makeButton('絞り込みをすべて解除',()=>{removeConditions();heading.focus()}));
 for(const input of filters){const s=state(),group=input.dataset.filter;s[group]=s[group].includes(input.value)?s[group].filter(value=>value!==input.value):[...s[group],input.value];document.querySelector('[data-count-for="'+input.id+'"]').textContent=records.filter(item=>matches(item,s)).length+'件';input.closest('label').classList.toggle('on',input.checked)}
 const withoutQuery=activeQuery;activeQuery='';const queryCount=selection().length;activeQuery=withoutQuery;document.querySelector('[data-relax-query]').textContent='検索語を消すと '+queryCount+'件';const s=state();for(const group of Object.keys(s))s[group]=[];const savedMin=activeMin,savedMax=activeMax,category=library?document.querySelector('#classification'):null,categoryValue=category?.value;activeMin=null;activeMax=null;if(category)category.value='';const conditionCount=records.filter(item=>matches(item,s)).length;activeMin=savedMin;activeMax=savedMax;if(category)category.value=categoryValue;document.querySelector('[data-relax-filters]').textContent='絞り込みを外すと '+conditionCount+'件';
}
function applyQuery(){if(composing)return;activeQuery=query.value.trim();currentPage=1;error.hidden=true;document.querySelectorAll('[aria-invalid]').forEach(el=>el.removeAttribute('aria-invalid'));render()}
document.querySelector('form').addEventListener('submit',event=>event.preventDefault());query.addEventListener('compositionstart',()=>composing=true);query.addEventListener('compositionend',()=>composing=false);query.addEventListener('keydown',event=>{if(event.key==='Enter'){if(event.isComposing||composing||event.keyCode===229)return;event.preventDefault();applyQuery()}});search.addEventListener('click',applyQuery);
document.querySelector('[data-clear-query]').addEventListener('click',()=>{query.value='';activeQuery='';currentPage=1;error.hidden=true;render();query.focus()});
query.addEventListener('search',()=>{if(!query.value)applyQuery()});sort.addEventListener('change',()=>{currentPage=1;render()});filters.forEach(input=>input.addEventListener('change',()=>{currentPage=1;render()}));
if(library)document.querySelector('#classification').addEventListener('change',()=>{currentPage=1;render()});
else{
 const min=document.querySelector('#min-price'),max=document.querySelector('#max-price');function applyPrice(){error.hidden=true;for(const input of[min,max])input.removeAttribute('aria-invalid');const invalid=[min,max].find(input=>input.value.trim()&&!/^\d{1,7}$/.test(normalize(input.value)));const low=min.value.trim()?Number(normalize(min.value)):null,high=max.value.trim()?Number(normalize(max.value)):null;if(invalid||low!==null&&high!==null&&low>high){const target=invalid||min;target.setAttribute('aria-invalid','true');error.textContent='価格は0以上の整数を7桁以内で入力し、下限を上限以下にしてください。前の適用条件は維持しています。';error.hidden=false;target.focus();return}activeMin=low;activeMax=high;currentPage=1;render()}
 document.querySelector('[data-price-apply]').addEventListener('click',applyPrice);for(const input of[min,max]){input.addEventListener('input',()=>{error.hidden=true;input.removeAttribute('aria-invalid')});input.addEventListener('keydown',event=>{if(event.key==='Enter'&&!event.isComposing&&event.keyCode!==229){event.preventDefault();applyPrice()}})}
 const more=document.querySelector('[data-more]'),extra=document.querySelector('#extra-brands');more.addEventListener('click',()=>{const open=extra.hidden;extra.hidden=!open;more.setAttribute('aria-expanded',String(open));more.textContent=open?'追加の2ブランドを閉じる':'さらに2ブランドを表示'});
 const topbar=document.querySelector('.topbar');new ResizeObserver(()=>document.documentElement.style.setProperty('--header-height',topbar.getBoundingClientRect().height+'px')).observe(topbar);
}
document.querySelector('[data-relax-query]').addEventListener('click',()=>{query.value='';activeQuery='';currentPage=1;render();heading.focus()});document.querySelector('[data-relax-filters]').addEventListener('click',()=>{removeConditions();heading.focus()});document.querySelectorAll('[data-reset-all]').forEach(button=>button.addEventListener('click',resetAll));
document.querySelectorAll('[data-js-control]').forEach(el=>el.disabled=false);chips.hidden=false;render();
</script></body>
</html>

2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。

概要

インターネット以前、調べものの起点は図書館のカード目録でした。木製の引き出しにびっしり詰まったインデックスカード——一枚ごとに請求記号、著者、出版年が几帳面に記されている。あの仕組みは、人類が情報を体系的に整理してきた知の蓄積そのものです。検索結果ページにこの様式を与えるのは、その「整理された知」の信頼感を借用する試みです。

冷たいSERPと、温度のある目録

現代の検索結果ページは効率的ですが、無機質です。タイトルとURLと抜粋が等間隔に並ぶだけで、そこに「集められたもの」という感覚はありません。図書館の目録カードは違う。請求記号、ISBN、在庫スタンプ、蔵書印——こうした細部のひとつひとつが、「これは誰かが選び、分類し、保管したコレクションだ」と語ります。検索が機械的な照会から、アーカイブを探索する文化的な行為へと格上げされます。

カードの厚みが網羅性を語る

物理的なカードの束には、デジタルの検索結果リストにはない説得力があります。それは「厚み」です。一枚一枚が独立した実体として積み重なっている様子は、「このコレクションには深さがある」という印象を視覚的に証明する。学術リポジトリ、出版社のバックカタログ、専門アーカイブのように、収蔵の網羅性そのものが価値になるサイトで、この様式は強く効きます。

崩れる形タイトルとURLと抜粋を等間隔に

効率的ですが無機質です。そこに集められたものという感覚がないので、収蔵の網羅性が価値になるサイトでは強みが伝わりません。

効く形請求記号・ISBN・在庫スタンプ

細部のひとつひとつが、誰かが選び、分類し、保管したコレクションだと語ります。カードの厚みが、そのまま収蔵の深さの証明になります。

見本で試せる範囲

配布HTMLは架空の書籍5件を検索するデモです。検索語を空白で区切ると、すべての語を含む目録を探します。空欄なら全件を対象にし、在庫・貸出中、分類と出版年順を組み合わせられます。在庫の右の件数は、その項目を切り替えた後の結果数です。1ページ3件で、結果が変わると1ページ目へ戻します。

0件では、検索語や絞り込みを外した場合の件数を添えます。カードは書籍の表示見本についての説明へ移動し、蔵書照会や貸出予約は行いません。書名・著者・出版社・ISBN・在庫は架空の表示です。検索語を外部へ送信・保存せず、URLにも含めません。JavaScriptなしでは全5件と説明リンクを残し、検索と条件変更を無効にします。

仕上げの判断軸

検索クエリと一致した語は、結果スニペット内で必ずハイライトを。目録の実用性を演出として捨てないことが、この様式の最低条件です。

在庫スタンプのような色付き要素はカード1枚に1つまでに抑え、紙面を騒がせないこと。結果0件のときの代替提案も、目録らしい落ち着いたトーンで用意します。様式は古典的でも、検索という機能の使いやすさは現代の水準を守るのが鉄則です。

検索結果の構成要素

検索結果の構成要素 検索語 128件中 1〜20件 絞り込み 件数を先に見せる ── 0件かどうかで、次の行動がまったく違う 絞り込みは「いま何が効いているか」を、外せる形で表示する
検索結果は件数と、いま効いている条件が見えることが要点です。0件のときこそ、条件を外す道を近くに置いてください。

使いどころ

  • 大学・研究機関のリポジトリ
  • 出版社のバックカタログ
  • 図書館・博物館・公文書館のサイト内検索
  • 古書店・専門書店の在庫検索
  • 学術論文・古文書のアーカイブ

このデザインの分類

カテゴリ
検索結果
スタイル
エディトリアル / モノクロ / レトロ / ハンドクラフト

背景と狙いどころ

よくある質問

ハイライト処理(強調語の黄色マーカー)はどう実装する?
サーバーサイドで em タグでクエリ語を囲み、CSS で em の background を rgba(245,185,56,0.5)、padding 0 3px、font-style normal に設定すれば良い。font-style normal を忘れると斜体になる。
カードに微妙な傾きを付けると検索結果として読みにくい?
0.5度以下の微小傾きなら可読性は損なわれず、むしろ「物理的なカードの束」感が出る。読みやすさ優先なら hover 時のみ傾き解除する設計が定石。
モバイルで請求記号と在庫スタンプの並びが崩れます。どう直せばいいですか。
card-head の grid-template-columns を 100px 1fr auto から 1fr へ切替(@media 内)。在庫スタンプは右上絶対配置で逃がすのも手。

この画面を実装する

動くサンプルとコピペできるコードを、技術別にまとめています。