省略した文字の確認方法を決める：一行の題名から全文を開く

一覧の高さをそろえるため、長い作品名を途中で「…」にした。ところが、末尾にある「午前の部」と「午後の部」が読めず、どちらを選べばよいか分からない。省略した文字の確認方法を決めるときは、三点リーダーを出すCSSと、全文へ進む操作を一緒に設計します。

ここでは架空の手製本展の作品一覧を作ります。HTMLとCSSのクラス指定が読める人向けに、題名を一行に収めつつ、押すと全文を読める小さな見本を用意します。エディターとブラウザーがあれば試せ、JavaScriptは使いません。

題名を省いても、作品を選べるか

短く見せたい理由が「カードを全部同じ高さにしたい」だけなら、まず折り返す案を試してください。識別に必要な言葉が末尾へ集まる一覧では、一行にそろえることが選びにくさにつながります。料金、締切、参加条件のように、その場で判断する情報も、見た目の都合だけでは省きません。

今回は作品番号と題名の冒頭で候補を探し、気になる作品の正式名を開いて読む一覧とします。展覧会の申込先を選ぶ操作ではなく、作品名を読む課題です。「全文」という操作の案内を常に残し、短い題名でも同じ場所を開けるようにします。

全文をそのまま折り返す方法は、長い文字を収める記事で扱っています。今回はその方法で十分かを考えたうえで、一行表示を採る場合の入口と到着先を確認します。省略自体を便利な装飾として追加するのではありません。

一行の題名から全文を開く見本

次をtitle-list.htmlとして保存し、ブラウザーで開きます。作品番号と「全文」は省略の外へ置き、題名の部分だけを切り詰めています。作品名は説明用の架空原稿です。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>作品名の一覧｜練習</title>
<style>
  * { box-sizing: border-box; }
  body { margin: 1rem; color: #222; background: #fff; font-family: sans-serif; line-height: 1.8; }
  main { max-width: 32rem; margin-inline: auto; }
  details { margin-block: 1rem; border: 1px solid #777; padding: 0.75rem; }
  summary { display: flex; align-items: baseline; gap: 0.5rem; cursor: pointer; }
  summary:focus-visible { outline: 3px solid #175ca4; outline-offset: 4px; }
  .number, .action { flex: 0 0 auto; }
  .name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .action { text-decoration: underline; }
  .full-name { overflow-wrap: anywhere; }
</style>
</head>
<body>
<main>
  <h1>手製本展の作品名（練習例）</h1>
  <p>題名が途中で省かれている場合は、その行を押すと全文を読めます。
     キーボードでは行へ移動し、EnterまたはSpaceで開閉します。</p>
  <details>
    <summary><span class="number">01</span><span class="name">雨の日に集めた街の色と、旅先で拾った紙を綴じる手製本ノート</span><span class="action">全文</span></summary>
    <p class="full-name">雨の日に集めた街の色と、旅先で拾った紙を綴じる手製本ノート</p>
  </details>
  <details>
    <summary><span class="number">02</span><span class="name">夜の栞</span><span class="action">全文</span></summary>
    <p class="full-name">夜の栞</p>
  </details>
</main>
</body>
</html>

長い題名は幅が足りなければ末尾が省かれます。行を押すと、その下に同じ題名が折り返して表示されます。短い「夜の栞」には、収まる幅なら三点リーダーは出ません。どちらも原稿の文字列そのものは切っていない点が重要です。

開閉にはdetailsとsummaryを使っています。補足を開く部品の基礎はdetailsの記事で確認できます。この見本ではsummaryの標準の印を使わない配置にしているので、「全文」の文字と操作説明を残しています。色が変わることだけを開ける手掛かりにしません。

三点リーダーは、幅からはみ出した結果を示す

MDNのtext-overflowの説明にあるとおり、このプロパティだけで文字がはみ出す状態を作れるわけではありません。例ではnowrapで一行にし、overflowで枠外を隠し、ellipsisで省略を示します。

さらに、題名の箱には使える幅が必要です。今回は横並びの残り幅を題名へ渡し、min-widthで縮小を妨げないようにしています。番号や「全文」まで同じ箱へ入れると、操作の手掛かりも一緒に隠れるため分けました。

一方、開いた後のfull-nameにはnowrapを指定しません。長い英字も折り返せるようにし、固定の高さも付けずに本文を下へ伸ばします。一行の制約を一覧全体へ付けると、全文を開いても結局読めないという矛盾が生じます。

原稿を切った失敗と、マウスだけの入口を直す

一つ目の失敗は、HTMLへ「雨の日に集めた街の色…」と短縮済みの題名を書き、全文欄にもそれをコピーすることです。見た目は整っても、元の題名がページ内から失われています。修正では両方を正式名へ戻し、省略をCSSだけに任せます。開いた欄の最後に「手製本ノート」まであるか、元原稿と照合してください。

この見本では題名を二か所に書いています。更新時に片方だけ変えると、閉じた行と全文で違う作品名になります。複数件を管理する実装では同じ元データから両方を出力する方法を検討できますが、この静的な練習では二か所を一組で見直します。短い題名への変更も、長い題名への変更も同じ手順です。

二つ目の失敗は、title属性へ全文を入れ、マウスを止めたときの表示だけを頼りにすることです。MDNのtitle属性の注意点では、タッチやキーボード、支援技術での利用に問題があることが説明されています。属性へ全文を入れただけで、全員がそこへ到達できるとは考えません。

修正では、完成例のように実際に開ける欄を用意します。マウスを使わず、Tabで行へ移り、開いて末尾を読むところまで試してください。フォーカス枠が消える場合は、フォーカス表示の記事の確認も行います。属性に文字が存在することと、画面で読めることを分けて判断します。

幅と操作を変えて、同じ正式名へたどる

確認では、まず画面幅を320pxにし、長い題名の行を開きます。次に幅を広げ、同じ内容が残るかを見ます。開閉する前後で文字を短く入れ替える必要はありません。

• 狭い幅でも番号と「全文」が残り、題名の一部が省略されていることを判断できる。
• 行を開くと、正式名の末尾「手製本ノート」まで折り返して読める。
• Tabで二行へ順に移動でき、EnterまたはSpaceで開閉し、フォーカス枠が見える。
• 文字を拡大しても、開いた題名の下端が切れず、ページ全体へ横スクロールが出ない。

短い題名も開いて内容が一致するか確かめます。読み上げを試す場合は、題名と開閉状態が伝わるかを実際に聞き、画面だけの点検と区別して残します。レスポンシブCSSの無料レッスンで一覧を作る際も、閉じた行の整列だけでなく、全文を読む状態まで含めて仕上げてください。