表の項目名とか１行のテキストを両端揃えにする CSS + jQuery

表の項目名を、両端揃えにするやつやりたい！

こういうやつ！

なるほど、やってみましょう。

実装

真っ先に思い浮かんだのは、text-align: justify; ですが、これはなんとまだSafariで使えないとのこと。

みんなIEのことなんやかんや言ってるけど、Safariも大概しんどいよ・・・。

というわけで、以下のように考えてみました。

まず基本のhtmlはこんな感じ。今回は説明を省くため、表ではなく項目名だけリストにしてますが、だいたいどんな構造でもいけます。

<ul class="list">
  <li><p class="justify">設立</p></li>
  <li><p class="justify">代表者</p></li>
  <li><p class="justify">住所</p></li>
  <li><p class="justify">事業内容</p></li>
</ul>

①要素内のテキストを１文字ずつspanで囲む

<span>設</span><span>立</span>

みたいな感じで１文字ずつ囲っていくわけですが、これを全部手動でやるのはめんどくさすぎるので、ここはjQueryのパワーを借りましょう。

$('.justify').each(function() {
  var content = $(this).html();
  var text = $.trim(content);
  var newHtml = "";
  text.split("").forEach(function(v) {
    newHtml += "<span>" + v + "</span>";
  });
  $(this).html(newHtml);
});

これで、.justifyごとに全て１文字ずつspanで囲まれます。
もちろんjQueryでなくてもできますので、自分の環境に合わせ、「JS １文字ずつ span」でググってみてください。

②display: flex; で、両端揃えにする

両端揃えにする前に、横幅を確定しておく必要があります。
ここは、一番多い文字数に合わせ、emで設定してみました。

.justify {
  width: 5em;
  display: flex;
  justify-content: space-between;
}

これで、両端揃えになります！

現場からは以上です。