HTMLのページ上で日付を複数行で表示したとき、行ごとの日付の桁数が異なる場合に書式を崩さずに桁数を揃えたい

実現方法がございましたら、ご教示願います。

実現したいこと

例）
1月23日
10月7日
↓

補足

・数値は半角で表示したい。
・html,CSSだけを使った簡単でシンプルな記述で実現したい。
（Tableタグなどで囲んで各桁の幅を指定するようなことはしたくない）

試したこと

・<pre></pre>タグで囲んで半角スペースで桁を埋めれば揃えることはできたが、フォント書式が変わるためNG
・cssの"white-space: pre;"を親要素に指定していけるかと思ったが、桁は揃わなかった。

行動規範の内容に同意します

回答3件

フォントに依存しますが、U+2007 Figure Space「」は数字と同じ幅であるべき空白です。
Figure Spaceが適切に設計されたフォントを指定できるなら最も単純に解決できます。
ただ、適切なフォントは数少ないです。Times New Roman・Tahoma・Segoe UIくらいしか見つけられませんでした。

あとは「0」(でなくとも任意の数字でよいが)をvisibility:hiddenで書いておくのはいかがでしょう。

HTML
1<span style="visibility:hidden">0</span>1月23日
210月<span style="visibility:hidden">0</span>7日

サンプル

投稿2021/06/11 21:01

ikadzuchi

総合スコア3047

norton

2021/06/13 10:49

U+2007 Figure Spaceについては初めて知りました。残念ながら使用しているフォントが適切なものには当てはまらないようでした。 visibility:hiddenで対応する方法もよいですね。思いつきませんでした。悩みましたが、itagakiさんのご回答のほうがしっくりきたので、そちらをベストアンサーとさせていただきました。今回ご回答で得た知見は今後に活かしたいと思います。ご回答誠にありがとうございました。

行動規範の内容に同意します

ベストアンサー

こんなのどうでしょう

HTML
1<style>
2  span.month,span.day{
3  display: inline-block;
4  width: 1.2em;
5  text-align: right;
6}
7</style>
8<span class="month">1</span>月<span class="day">23</span>日<br/>
9<span class="month">10</span>月<span class="day">7</span>日<br/>

投稿2021/06/11 14:19

itagagaki

総合スコア8402

norton

2021/06/13 10:48

こういうやり方があるのですね、大変ためになりました。ご回答いただいた内容でソースがすっきりいたしました。こちらの方法を使用させていただきます。ご回答誠にありがとうございました。

行動規範の内容に同意します

この手のやつは割とtableを重宝してしまいますね^^;
tableタグを使用するが幅指定はしないじゃダメですかね？？

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8" />
5<style>
6table{
7  border-collapse:collapse;
8  border:none;
9  border-spacing:0;
10}
11td{
12  border:none;
13  text-align:right;
14}
15</style>
16</head>
17<body>
18<table>
19    <tbody>
20        <tr>
21            <td>1月</td>
22            <td>23日</td>
23        </tr>
24        <tr>
25            <td>10月</td>
26            <td>7日</td>
27        </tr>
28    </tbody>
29</table>
30</body>
31</html>

もしくは、divだけどtableのCSS当てるとか？
(複雑になっちゃいましたかね...)

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8" />
5<style>
6.date{
7    display: table;;
8}
9.date-row {
10    display: table-row;
11}
12.date-cell {
13    display: table-cell;
14    text-align: right;
15}
16</style>
17</head>
18<body>
19<div class="date">
20    <div class="date-row">
21        <div class="date-cell">1月</div>
22        <div class="date-cell">23日</div>
23    </div>
24    <div class="date-row">
25        <div class="date-cell">10月</div>
26        <div class="date-cell">7日</div>
27    </div>
28</div>
29</body>
30</html>

・<pre></pre>タグで囲んで半角スペースで桁を埋めれば揃えることはできたが、フォント書式が変わるためNG

ちなみにこれはpreの書式をCSSで合わせるのはダメなんですか？

投稿2021/06/11 23:19

runnynose

総合スコア497

norton

2021/06/13 10:49

私も今までtableなどで対応しておりました。 tableやdivだと階層が深まり記述量が多くなってしまい、サイト上で日付を表示することが多いので毎回その量を記載するのを回避したく、質問しました。 <pre>にCSSでフォント書式をあててみたのですが、行ごとに数値の位置がズレてしまい、使用できませんでした。今回は、itagakiさんのご回答のほうを採用させていただきました。ご回答誠にありがとうございました。

行動規範の内容に同意します

あなたの回答