サイトの記事中に文字数が同じではない文字列を並べたとします。

例えば「北海道支社　青森営業所　岩手営業所　宮城営業所　秋田営業所　山形営業所....」のような一覧です。

ベタ打ちしたら文字数によって当然きれいに整列してくれることはありません。たまたま文字数が同じでスペースを駆使して並べたとしても、表示幅や表示フォントが変わるとモザイクと化します。

結局、なんだかんだで１年間考え続けたある日、ふとスタイルシートで出来るんじゃないかなと。やってみたら等間隔に整列させることができました。

ボクのとある秘密ブログに単語を羅列するリストがあって、レスポンシブにする前はスペースを入れて対応してましたが、レスポンシブにして一気にこの文字列モザイク問題が浮上。こんな感じに。

北海道支社　青森営業所　岩手営業所　宮城営業所　秋田営業所　山形営業所　福島営業所　茨城営業所　栃木営業所　群馬営業所　埼玉営業所　千葉営業所　東京都　神奈川営業所　新潟営業所　富山営業所　石川営業所　福井営業所　山梨営業所　長野営業所　岐阜営業所　静岡営業所　愛知営業所　三重営業所　滋賀営業所　京都府　大阪府.....

なんとか綺麗に整列させることはできないかなと考えながらも全然アイデアが出てこない。文字数を計算して動的に配列を考えてくれる JavaScript とか考えたけど、そんなスキルもない。探したけど見つからない。

整列、文字列、きれいに並べる、文字列を等間隔・・・。検索したキーワードが悪かったのか、こういったニーズがないのか。

とにかくめちゃくちゃアナログなやり方ですが、同じようなレアな悩みをお持ちの方の参考になれば幸いです。

記事ごとに異なる文字数リストにも対応するスタイルシート

ある記事では「北海道支社　青森営業所　岩手営業所　宮城営業所　秋田営業所　山形営業所　福島営業所　茨城営業所.....」。文字数はだいたい５文字。

別の記事では「ソーラーパネル１　ソーラーパネル２　ソーラーパネル３　ソーラーパネル４　ソーラーパネル５.....」。文字数は８文字。

そして別のページでは文字数が３文字、また別のページでは６文字などなど。記事によってリストされる文字数が異なります。だから、単純にリストの幅を固定することができません。そのリストの文字数に応じたそれぞれの文字幅で等間隔に整列させるスタイルシートが必要になります。

まず、文字列全体のフレームを作るために list というクラスセレクタを作ります。

.list{width: 100%; margin: 0; padding: 0;}

続いて文字数に対応したリストを定義。

.list ul.em04 li{display: block; float: left; width: 17%;}
.list ul.em05 li{display: block; float: left; width: 19%;}
.list ul.em06 li{display: block; float: left; width: 20%;}
.list ul.em07 li{display: block; float: left; width: 21%;}
.list ul.em08 li{display: block; float: left; width: 23%;}
.list ul.em09 li{display: block; float: left; width: 24%;}
.list ul.em10 li{display: block; float: left; width: 25%;}
※ width はあくまでも参考値です。padding なども考慮してパーセンテージを決めてください。

上記のスタイルを適用している CSS に追記しておきます。

em04, em05, em06.....em10 というのはそれぞれの文字数(em)を表わしています。記事を書いているときにリストになる文字を数えてどのクラスを割り当てるのか判断しますから直感的なほうがよいです。

冒頭の営業所の例だとリストの最長文字が６文字ですから、CSS の em06 が参照されます。

.list{width: 100%; margin: 0; padding: 0;}
.list ul.em06 li{display: block; float: left; width: 20%;}

記事中の文字列リストの書き方

<div class="list">
<ul class="em06">
<li>北海道支社</li><li>青森営業所</li><li>岩手営業所</li><li>宮城営業所</li><li>秋田営業所</li><li>山形営業所</li><li>福島営業所</li><li>茨城営業所</li><li>栃木営業所</li><li>群馬営業所</li><li>埼玉営業所</li><li>千葉営業所</li><li>東京本社</li><li>神奈川営業所</li><li>新潟営業所</li><li>富山営業所</li><li>石川営業所</li><li>福井営業所</li><li>山梨営業所</li><li>長野営業所</li><li>岐阜営業所</li><li>静岡営業所</li><li>愛知営業所</li><li>三重営業所</li><li>滋賀営業所</li><li>京都支社</li><li>大阪支社</li><li>兵庫営業所</li><li>奈良営業所</li><li>和歌山営業所</li><li>鳥取営業所</li><li>島根営業所</li><li>岡山営業所</li><li>広島営業所</li><li>山口営業所</li><li>徳島営業所</li><li>香川営業所</li><li>愛媛営業所</li><li>高知営業所</li><li>福岡営業所</li><li>佐賀営業所</li><li>長崎営業所</li><li>熊本営業所</li><li>大分営業所</li><li>宮崎営業所</li><li>鹿児島営業所</li><li>沖縄営業所</li>
</ul>
</div>

表示結果

• 北海道支社
• 青森営業所
• 岩手営業所
• 宮城営業所
• 秋田営業所
• 山形営業所
• 福島営業所
• 茨城営業所
• 栃木営業所
• 群馬営業所
• 埼玉営業所
• 千葉営業所
• 東京本社
• 神奈川営業所
• 新潟営業所
• 富山営業所
• 石川営業所
• 福井営業所
• 山梨営業所
• 長野営業所
• 岐阜営業所
• 静岡営業所
• 愛知営業所
• 三重営業所
• 滋賀営業所
• 京都支社
• 大阪支社
• 兵庫営業所
• 奈良営業所
• 和歌山営業所
• 鳥取営業所
• 島根営業所
• 岡山営業所
• 広島営業所
• 山口営業所
• 徳島営業所
• 香川営業所
• 愛媛営業所
• 高知営業所
• 福岡営業所
• 佐賀営業所
• 長崎営業所
• 熊本営業所
• 大分営業所
• 宮崎営業所
• 鹿児島営業所
• 沖縄営業所

ソーラーパネルの例だと、ソーラーパネル10の９文字に幅を合わせるので CSSの em09 クラスが参照されます。

.list{width: 100%; margin: 0; padding: 0;}
.list ul.em09 li{display: block; float: left; width: 24%;}

記事中の文字列リストの書き方

<div class="list">
<ul class="em09">
<li>ソーラーパネル１</li><li>ソーラーパネル２</li><li>ソーラーパネル３</li><li>ソーラーパネル４</li><li>ソーラーパネル５</li><li>ソーラーパネル６</li><li>ソーラーパネル７</li><li>ソーラーパネル８</li><li>ソーラーパネル９</li><li>ソーラーパネル10</li>
</ul>
</div>

表示結果

• ソーラーパネル１
• ソーラーパネル２
• ソーラーパネル３
• ソーラーパネル４
• ソーラーパネル５
• ソーラーパネル６
• ソーラーパネル７
• ソーラーパネル８
• ソーラーパネル９
• ソーラーパネル10

ニーズがない

ググっても出てこないということはニーズがないのか、こんなこと誰でも知っているので記事にするような話題でないのか。もっと他に良い方法があるのか（普通は table なんでしょうが）。

まあ、ボクはこのパターンが頻発するブログが結構あるので、自画自賛で重宝しています。