日本語で壊れない会話画面の組み方

<!-- 発言は時系列の並びなので ol で組む。読み上げで「リスト、6項目」と伝わる -->
<ol class="thread" aria-label="メッセージ">
  <li class="msg them">
    <span class="avatar" aria-hidden="true">み</span>
    <span class="who">みさき</span>
    <div class="line">
      <p class="bubble">明日の打ち合わせ、資料は共有フォルダに入れておきました</p>
      <time class="time" datetime="2026-09-24T21:14">21:14</time>
    </div>
  </li>
  <li class="msg them">
    <span class="avatar" aria-hidden="true">み</span>
    <span class="who">みさき</span>
    <div class="line">
      <p class="bubble">https://example.com/share/project-2026/meeting-notes-final-version-v3</p>
      <time class="time" datetime="2026-09-24T21:14">21:14</time>
    </div>
  </li>
  <li class="msg me">
    <span class="who">あなた</span>
    <div class="line">
      <p class="bubble">ありがとうございます！</p>
      <time class="time" datetime="2026-09-24T21:20">21:20</time>
    </div>
  </li>
  <li class="msg me">
    <span class="who">あなた</span>
    <div class="line">
      <p class="bubble">先に目を通しておきます</p>
      <time class="time" datetime="2026-09-24T21:20">21:20</time>
    </div>
  </li>
  <li class="msg them">
    <span class="avatar" aria-hidden="true" style="background:#5a8dd6">け</span>
    <span class="who">けんた</span>
    <div class="line">
      <p class="bubble">僕は少し遅れて参加します</p>
      <time class="time" datetime="2026-09-24T21:31">21:31</time>
    </div>
  </li>
</ol>

.thread {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin: 0;
  padding: 1rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.msg {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: .5rem;
  /* 話者が変わるところだけ間を空ける。同じ人の連投は詰めて1段落に見せる */
  margin-top: .9rem;
}
.msg:first-child { margin-top: 0; }

.avatar {
  grid-row: span 2;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  font-size: .75rem; font-weight: 700; color: #fff;
  background: #e07a5f; border-radius: 50%;
}
.who { font-size: .75rem; color: var(--muted); line-height: 1.5; }

.line {
  display: flex;
  align-items: flex-end;
  gap: .4rem;
  min-width: 0;
}
.bubble {
  /* 吹き出しは中身の幅だけ。長文でも75%で折り返し、残りを時刻の置き場にする */
  max-width: 75%;
  padding: .45rem .8rem;
  line-height: 1.7;
  background: #eef1f6;
  border-radius: 4px 16px 16px 16px;
  /* URL や英数字の長い連続は単語の途中でも折る。
     break-word では「折れる場所が無い長い語」が吹き出しを突き破る */
  overflow-wrap: anywhere;
}
.time { flex: none; font-size: .7rem; color: var(--muted); line-height: 1.4; }

/* ---- 自分の発言 ---- */
.msg.me { grid-template-columns: minmax(0, 1fr); }
.msg.me .line { flex-direction: row-reverse; }
.msg.me .bubble { color: #fff; background: var(--accent); border-radius: 16px 4px 16px 16px; }

/* ---- 連投のまとめ方（JavaScript を使わない） ----
   直前が同じ話者なら、名前とアイコンを見た目の上で消して間を詰める。
   名前は display:none にせず、画面外に残す。消すと読み上げでは
   「誰の発言か」が分からなくなる */
.msg.them + .msg.them,
.msg.me + .msg.me { margin-top: 0; }
.msg.them + .msg.them .avatar { visibility: hidden; height: 0; }
.msg.them + .msg.them .who {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* 角の尖り（しっぽの代わり）も先頭の1通だけ */
.msg.them + .msg.them .bubble { border-radius: 16px; }
.msg.me + .msg.me .bubble { border-radius: 16px; }

/* 自分の発言の話者名は常に画面外。見た目では右寄せで自明だが、
   読み上げでは位置が伝わらない */
.msg.me .who {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

<div class="chat">
  <!-- role="log" は「末尾に追記されていく領域」の役割。
       既定で aria-live="polite" になり、追加分だけが読み上げられる -->
  <div class="log" id="log" role="log" aria-label="メッセージ" tabindex="0"></div>
  <button class="jump" id="jump" type="button" hidden>新着 <span id="unread">0</span> 件 ↓</button>
</div>

.chat { position: relative; }

.log {
  height: 320px;
  overflow-y: auto;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  /* ブラウザの自動のスクロール固定（scroll anchoring）を切る。
     下端に要素が足されるたびにブラウザが位置を補正すると、
     こちらの「追従する／しない」の判定と喧嘩する */
  overflow-anchor: none;
  overscroll-behavior: contain;
}
.log p {
  margin: 0 0 .5rem;
  padding: .45rem .8rem;
  width: fit-content;
  max-width: 80%;
  line-height: 1.7;
  background: #eef1f6;
  border-radius: 14px;
}

/* 読み返し中に新着が来たときだけ出す。押すと最下部へ戻る */
.jump {
  position: absolute;
  left: 50%;
  bottom: .8rem;
  translate: -50% 0;
  padding: .35rem .9rem;
  font: inherit; font-size: .82rem; font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 6px 16px -6px rgba(37, 99, 235, .6);
  cursor: pointer;
}
.jump[hidden] { display: none; }

const log = document.getElementById("log");
const jump = document.getElementById("jump");
const unreadEl = document.getElementById("unread");
const reduce = matchMedia("(prefers-reduced-motion: reduce)");
// 下端からこの距離以内なら「最新を見ている」とみなす。
// 0 にすると、慣性スクロールや小数点の丸めで簡単に外れる
const FOLLOW_PX = 80;
let unread = 0;

const atBottom = () =>
  log.scrollHeight - log.scrollTop - log.clientHeight <= FOLLOW_PX;

// 追従は瞬時に行う。smooth にすると、動いている途中に次の
// メッセージが届いたとき「下端から離れている」と判定されて追従が切れる。
// 滑らかに動かすのは、利用者が「新着」を押して戻るときだけにする
function toBottom(smooth = false) {
  log.scrollTo({
    top: log.scrollHeight,
    behavior: smooth && !reduce.matches ? "smooth" : "auto",
  });
}

// メッセージを足す前に位置を測る。足した後に測ると、
// 増えた高さのぶん必ず「下端から離れている」と判定されてしまう
function append(text, { mine = false } = {}) {
  const follow = mine || atBottom();
  const p = document.createElement("p");
  p.textContent = text;
  log.append(p);
  if (follow) {
    toBottom();
  } else {
    unread += 1;
    unreadEl.textContent = unread;
    jump.hidden = false;
  }
}

// 利用者が自分で最下部まで戻ったら、新着の表示を消す
log.addEventListener("scroll", () => {
  if (atBottom() && unread) {
    unread = 0;
    jump.hidden = true;
  }
}, { passive: true });

jump.addEventListener("click", () => {
  toBottom(true);
  log.focus({ preventScroll: true });
});

<form class="composer" id="composer">
  <!-- ラベルは画面に出さないが、必ず付ける。placeholder はラベルの代わりにならない
       （入力を始めると消え、読み上げでも扱いが一定しない） -->
  <label for="msg" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)">メッセージ</label>
  <textarea id="msg" rows="1" maxlength="1000"
    placeholder="メッセージを入力"
    aria-describedby="msg-hint"
    enterkeyhint="send"></textarea>
  <button type="submit" id="send" aria-label="送信" disabled>↑</button>
</form>
<div class="meta">
  <span id="msg-hint">Enter で送信 ／ Shift＋Enter で改行</span>
  <span class="count" id="count" aria-live="polite"></span>
</div>

.composer {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  padding: .5rem .5rem .5rem .9rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
}
.composer:focus-within { border-color: var(--accent); }

.composer textarea {
  flex: 1;
  min-width: 0;
  padding: .25rem 0;
  font: inherit;
  line-height: 1.7;
  color: inherit;
  background: none;
  border: 0;
  outline: 0;
  resize: none;
  /* 中身に合わせて伸びる。対応ブラウザでは CSS だけで済み、
     非対応ブラウザでは JavaScript が高さを入れる */
  field-sizing: content;
  min-height: 1.7lh;
  /* 伸ばし続けると会話が押し出されて見えなくなる。上限を決めて中でスクロール */
  max-height: 8lh;
}

.composer button {
  flex: none;
  width: 2.2rem; height: 2.2rem;
  font-size: 1rem; line-height: 1;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.composer button:disabled { opacity: .3; cursor: default; }

.meta {
  display: flex;
  justify-content: space-between;
  margin: .35rem .6rem 0;
  font-size: .75rem;
  color: var(--muted);
}
/* 残り字数は、上限に近づいたときだけ目立たせる */
.count[data-near] { color: var(--warn); font-weight: 600; }

const form = document.getElementById("composer");
const input = document.getElementById("msg");
const send = document.getElementById("send");
const count = document.getElementById("count");
const MAX = Number(input.maxLength);
// 残りがこの字数を切ったら表示する。常に出すと、短い発言でも数字が目に入る
const NEAR = 100;

// field-sizing に対応していないブラウザだけ、高さを JavaScript で入れる
const autoSize = !CSS.supports("field-sizing", "content");
function resize() {
  if (!autoSize) return;
  input.style.height = "auto";
  input.style.height = input.scrollHeight + "px";
}

function update() {
  // 空白と改行だけの送信を防ぐ
  send.disabled = input.value.trim() === "";
  const left = MAX - input.value.length;
  if (left <= NEAR) {
    count.textContent = `残り ${left} 字`;
    count.dataset.near = "";
  } else {
    count.textContent = "";
    delete count.dataset.near;
  }
  resize();
}
input.addEventListener("input", update);

input.addEventListener("keydown", (e) => {
  if (e.key !== "Enter" || e.shiftKey) return;
  // 日本語入力の変換中・変換確定の Enter では送らない。
  // isComposing は Chrome / Firefox の変換中、keyCode 229 は
  // Safari の確定直後を拾う。片方だけだとどちらかで誤送信する
  if (e.isComposing || e.keyCode === 229) return;
  e.preventDefault();
  form.requestSubmit();
});

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const text = input.value.trim();
  if (!text) return;
  form.dispatchEvent(new CustomEvent("chat:send", { detail: text }));
  input.value = "";
  update();
  input.focus();
});

<!-- role="log" は追記されていく領域。aria-live="polite" が既定で付く。
     生成中は各回答の aria-busy="true" で読み上げを保留し、
     終わってから全文を1回だけ読ませる -->
<div class="answer-log" id="answers" role="log" aria-label="回答"></div>
<div class="controls">
  <button type="button" id="start">回答を生成</button>
  <button type="button" id="stop" class="stop" disabled>止める</button>
</div>

.answer-log {
  min-height: 12rem;
  padding: 1rem 1.2rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.answer { margin: 0 0 1rem; line-height: 1.85; white-space: pre-wrap; }
.answer:last-child { margin-bottom: 0; }
.stopped { color: var(--muted); font-size: .85rem; }

/* 生成中の目印。文字の後ろに置く四角いカーソル */
.answer[aria-busy="true"]::after {
  content: "";
  display: inline-block;
  width: .55em; height: 1.05em;
  margin-left: 2px;
  vertical-align: -.15em;
  background: var(--ink);
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.controls { display: flex; gap: .5rem; margin-top: .8rem; }
.controls button {
  padding: .45rem 1rem;
  font: inherit; font-size: .88rem; font-weight: 600;
  color: #fff; background: var(--accent);
  border: 0; border-radius: 999px; cursor: pointer;
}
.controls button:disabled { opacity: .35; cursor: default; }
.controls .stop { background: var(--stop); }

@media (prefers-reduced-motion: reduce) {
  .answer[aria-busy="true"]::after { animation: none; }
}

const answers = document.getElementById("answers");
const startBtn = document.getElementById("start");
const stopBtn = document.getElementById("stop");
const reduce = matchMedia("(prefers-reduced-motion: reduce)");
let controller = null;

// 実際の API の代わりに、文字を少しずつ返す。
// 本物では fetch のレスポンスの body.getReader() から同じ形で受け取る
async function* fakeStream(text, signal) {
  for (let i = 0; i < text.length; i += 3) {
    if (signal.aborted) return;
    await new Promise((r) => setTimeout(r, 40));
    yield text.slice(i, i + 3);
  }
}

async function generate(text) {
  controller = new AbortController();
  const { signal } = controller;
  const p = document.createElement("p");
  p.className = "answer";
  p.setAttribute("aria-busy", "true");
  answers.append(p);
  startBtn.disabled = true;
  stopBtn.disabled = false;

  // テキストノードに足していく。innerHTML に連結すると、
  // 返ってきた文字列がタグとして解釈される（生成AIの出力は信用しない）
  const node = document.createTextNode("");
  p.append(node);

  if (reduce.matches) {
    // 動きを減らす設定では、ためてから一度に出す
    let all = "";
    for await (const chunk of fakeStream(text, signal)) all += chunk;
    node.data = all;
  } else {
    for await (const chunk of fakeStream(text, signal)) node.data += chunk;
  }

  if (signal.aborted) {
    const s = document.createElement("span");
    s.className = "stopped";
    s.textContent = "（ここで止めました）";
    p.append(" ", s);
  }
  // ここで読み上げが解禁され、全文が1回だけ読まれる
  p.setAttribute("aria-busy", "false");
  startBtn.disabled = false;
  stopBtn.disabled = true;
  controller = null;
}

stopBtn.addEventListener("click", () => controller?.abort());