Text Box Trim

DEMO

<div class="demo-stage tbt-stage">
  <div class="tbt-grid" id="tbt-grid">
    <div class="tbt-col">
      <p class="tbt-head">いつもの指定</p>
      <span class="tbt-pill">Get started</span>
      <span class="tbt-badge">NEW</span>
      <span class="tbt-big">Motion</span>
    </div>
    <div class="tbt-col tbt-on">
      <p class="tbt-head">text-box: trim-both cap alphabetic</p>
      <span class="tbt-pill">Get started</span>
      <span class="tbt-badge">NEW</span>
      <span class="tbt-big">Motion</span>
    </div>
  </div>
  <button type="button" class="tbt-toggle" id="tbt-toggle" aria-pressed="true">右側に trim を適用</button>
  <p class="tbt-note">このブラウザは text-box に未対応のため、左右が同じ見た目になります</p>
</div>

.tbt-stage { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:2rem 1.25rem; background:#0B0B10; min-height:340px; }
.tbt-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem; width:100%; max-width:520px; }
.tbt-col { display:flex; flex-direction:column; align-items:center; gap:.9rem; padding:1rem .5rem; border-radius:12px; background:#15151B; }
.tbt-head { margin:0; color:#A1A1AA; font-size:.72rem; text-align:center; font-family:ui-monospace,monospace; line-height:1.5; }
.tbt-pill, .tbt-badge, .tbt-big { display:inline-block; outline:1px dashed rgba(244,114,182,.7); outline-offset:0; transition: outline-color .3s; }
.tbt-pill { padding:.7rem 1.2rem; border-radius:999px; background:#D1177A; color:#fff; font-weight:600; font-size:.95rem; line-height:1.6; }
.tbt-badge { padding:.35rem .6rem; border-radius:6px; background:#EDEDED; color:#1A1A1A; font-weight:700; font-size:.72rem; letter-spacing:.12em; line-height:1.6; }
.tbt-big { color:#fff; font-family:'Oswald',sans-serif; font-size:2.6rem; font-weight:600; line-height:1.3; }
/* 右の列だけ、文字の上端（大文字の高さ）から下端（ベースライン）までに箱を切り詰める */
.tbt-on .tbt-pill, .tbt-on .tbt-badge, .tbt-on .tbt-big { text-box: trim-both cap alphabetic; }
.tbt-on.is-off .tbt-pill, .tbt-on.is-off .tbt-badge, .tbt-on.is-off .tbt-big { text-box: normal; }
.tbt-on .tbt-pill, .tbt-on .tbt-badge, .tbt-on .tbt-big { animation: tbt-flash .6s ease-out; }
.tbt-on.is-off .tbt-pill, .tbt-on.is-off .tbt-badge, .tbt-on.is-off .tbt-big { animation: tbt-flash2 .6s ease-out; }
@keyframes tbt-flash { from { outline-color:#fff; outline-offset:4px; } }
@keyframes tbt-flash2 { from { outline-color:#fff; outline-offset:4px; } }
.tbt-toggle { min-height:44px; padding:0 1.1rem; border-radius:10px; border:1px solid rgba(255,255,255,.22); background:transparent; color:#EDEDED; font:inherit; font-size:.84rem; cursor:pointer; }
.tbt-toggle::after { content:"：OFF" / ""; }   /* 状態は aria-pressed で伝え、見た目の ON/OFF は読み上げない */
.tbt-toggle[aria-pressed="true"] { border-color:#F472B6; color:#F9A8D4; }
.tbt-toggle[aria-pressed="true"]::after { content:"：ON" / ""; }
.tbt-toggle:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.tbt-note { display:none; margin:0; color:#FCD34D; font-size:.76rem; text-align:center; }
@supports not (text-box: trim-both cap alphabetic) {
  .tbt-note { display:block; }
}
@media (prefers-reduced-motion: reduce) {
  .tbt-on :is(.tbt-pill, .tbt-badge, .tbt-big), .tbt-on.is-off :is(.tbt-pill, .tbt-badge, .tbt-big) { animation:none; }
}

(function(){
  var btn = document.getElementById('tbt-toggle');
  var col = document.querySelector('.tbt-on');
  if (!btn || !col) return;
  btn.addEventListener('click', function(){
    var off = col.classList.toggle('is-off');
    btn.setAttribute('aria-pressed', String(!off));   /* ラベルは変えず、状態は aria-pressed で伝える */
  });
})();

AI PROMPT

ボタンやバッジの文字が上下の真ん中からずれて見える問題を、CSS の text-box で直す比較デモを作って。2列のグリッドに、左は普通の指定、右は text-box: trim-both cap alphabetic（text-box-trim: trim-both と text-box-edge: cap alphabetic の一括指定）を付けた同じ3つの要素（角丸のボタン風の pill・小さなバッジ・大きな見出し文字）を並べる。各要素は display:inline-block にして、1px の点線の outline で箱の大きさを見えるようにする（右側は大文字の高さからベースラインまでに箱が縮み、padding が上下で同じに見える）。「右側に trim を適用」ボタン（aria-pressed を付け、ラベルの文字は変えない。ON/OFF の表示は ::after の content: "：ON" / "" のように読み上げ用の代替テキストを空にして見た目だけに出す）で右側の指定を text-box: normal と切り替え、切り替えた瞬間に outline を白く少し外側から戻す 0.6秒のアニメーションで変化を目立たせる（同じ名前のアニメーションは付け直しても再生されないので、ON と OFF で別の @keyframes 名にする）。@supports not (text-box: trim-both cap alphabetic) の時は「このブラウザは未対応」の注記を表示する。prefers-reduced-motion: reduce の時はアニメーションを無効化する。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

CREATOR TOOLS · スクール（PR）

※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。