もくじ
経歴や沿革の見た目、地味に悩んでませんか？
企業の沿革やプロフィールの経歴を表示する際、<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。自動で分割できるから、実装もメンテもらくらくです。沿革や経歴をすっきりきれいに見せたいときは、ぜひ試してみてくださいね。