【一文字ずつspanで囲むjs×space-between】ピタッと揃うスマート年表レイアウト

経歴や沿革の見た目、地味に悩んでませんか？

企業の沿革やプロフィールの経歴を表示する際、<dl>タグでシンプルに書くのが定番です。
でも、年号（2024年など）が**見た目として左右で揃っていないと、どうしてもズレて見える…**という悩み、ありませんか？

完成イメージ

See the Pen
dlタグで年号を左右にきっちり揃える方法 by webmoyou (@yydliugt-the-animator)
on CodePen.

解決法：年号を1文字ずつ<span>で囲んで、space-betweenで均等配置！

まずはHTMLが例えばこんなかんじの場合…

<dl class="history">
  <dt>2024年</dt>
  <dd>新サービスを開始</dd>
  <dt>2025年</dt>
  <dd>ブランド「ABC」リリース</dd>
</dl>

ここに以下のjQueryを加えます👇

jQuery：年号を1文字ずつspanで囲む

本来なら <span> を1文字ずつ手で書いていく必要があるところを、このスクリプトを使えばテキストを自動で分割して、1文字ずつ <span> でくるんでくれるのでめちゃくちゃ便利です。
年号や見出しの整列も、HTMLをいじらずそのままでOK。ちょっとした手間を省けて、見た目もスマートに仕上がります。

$('dl dt').each(function() {
  const text = $(this).text();
  const wrapped = text.split('').map(char => `<span>${char}</span>`).join('');
  $(this).html(wrapped);
});

このスクリプトにより、HTMLはこう変わります

<dt><span>2</span><span>0</span><span>2</span><span>4</span><span>年</span></dt>

CSS：justify-content: space-between で左右ピタッ！

.history {
  display: flex;
  flex-wrap: wrap;
}
.history dt {
  display: flex;
  justify-content: space-between;
  width: 3.5em; /* 必要に応じて調整 */
  font-weight: bold;
}

.history dd {
  width: calc(100% - 5em);
  margin-left: 1.5em;
}

これで、年号内の数字と「年」が均等に並び、自然と「左右にピタッと揃った見た目」になります。

どうしてspanが必要？

justify-content: space-between は 複数の子要素が必要。
1文字ごとに <span> に分けることで、スペースを均等に配置できるようになります。

これがないと、文字列全体は一塊のインラインテキストとして扱われ、両端揃えができません。

このテクニックの良いところ

このテクニックのいいところは、見た目がちゃんと整うのに、手作業いらずでラクできるところ。文字を1文字ずつ <span> で囲むのって普通なら地味に大変ですが、jQueryで自動変換してしまえば、HTMLはそのままでOK。修正も入れやすいので、メンテナンス性もばっちりです。
さらに、justify-content: space-between が効くことで年号の文字が左右にきれいに並び、読みやすく美しいUIになります。見た目は控えめだけど、ちゃんと効いてる——まさに**「地味に効く」デザインの底力**。しかもレスポンシブでも崩れにくいので、実務で使うにも安心です。

まとめ

年表や経歴を並べるときって、見た目がそろってないとなんとなくモヤっとしませんか？
今回ご紹介した方法では、年号を1文字ずつ <span> で囲って、CSSの justify-content: space-between を使うことで、数字と「年」がきれいに左右に分かれてくれます。たったそれだけなのに、一覧がぐっと見やすく整って、ちゃんとしてる感じに！

しかも、jQueryを使えばHTMLをひとつひとつ書き換えなくてもOK。自動で分割できるから、実装もメンテもらくらくです。沿革や経歴をすっきりきれいに見せたいときは、ぜひ試してみてくださいね。