やりたい事

html + css を使ってピアノ発表会のプログラム表を作っています。
曲順、曲名、作曲者名、演奏者名
を表形式に表示させることを考えてるのですが、
作曲者名、演奏者名は左右均等に表示させたいです。

困っていること

１人が２曲弾く場合及び２人で１つの曲を演奏する場合、
作曲者名または演奏者名を２行にして表示させたいのですが、
均等割りが崩れてしまいます。
<br> を入れてるのでその分が１行目に空白文字となって
右端がちょっと空いてしまうのかなと想像しているのですが、
対策が分かりません。
（このデータの場合、
２番目の作曲者「ビール」さんが「三善晃」さんに比べ右端にスペースが出来てる、
及び、
４番目の曲の２人の内、神吉さんの右端にスペースが出来てる。）
（演奏者の名前は架空です）

やった事

下のソースを書きました。
display: flex; や display: inline_flex など、
flexbox 絡みの記述も css の中に出てきますが、
flexbox は存在を知ったばかりで理解はまだあまり出来ていません。

html
1<!DOCTYPE html>
2<html>
3<head>
4	<style>
5		* {
6			padding: 0;
7			margin: 0;
8			font-family: serif;
9			font-size: 9pt;
10			vertical-align: top;
11		}
12		div#container {
13			display: flex;
14			justify-content: space-between;
15			width: 100%;
16		}
17		h1 {
18			margin: 20px 0 20px 0;
19			text-align: center;
20			font-size: 12pt;
21		}
22		div#left {
23			padding: 30px;
24			width: 33.3%;
25		}
26		div#contents p {
27			padding-bottom: 2.8em;
28		}
29		p.entry {
30			display: flex;	
31			width: 100%;
32			padding-bottom: 1em;
33		}
34		p.no_padding_bottom {
35			padding-bottom: 0.25em !important;
36		}
37		span.number {
38			display: inline-flex;
39			font-size: 10pt;
40			width: 5%;
41			white-space: nowrap;
42		}
43		p.caption {
44			display: inline-block;
45			vertical-align: bottom;
46			font-family: "ＭＳ 明朝", serif;
47			font-size: 6pt;
48			padding-bottom: 0 !important;
49		}
50		span.kyokumei {
51			display: inline-flex;
52			font-family: "ＭＳ ゴシック", sans-serif;
53			font-weight: bold;
54			width: 40%;
55			white-space: nowrap;
56		}
57		span.artist {
58			display: inline-block;
59			width: 20%;
60			text-align-last: justify;
61			/*text-align: justify;*/
62			white-space: nowrap;
63		}
64		span.spacer_10 {
65			display: inline-block;
66			width: 10%;
67			white-space: nowrap;
68		}
69		span.player {
70			display: inline-block;
71			font-size: 10pt;
72			width: 25%;
73			text-align-last: justify;
74			/*text-align: justify;*/
75			font-weight: bold;
76			white-space: nowrap;
77		}
78	</style>
79</head>
80<body>
81	<div id="container">
82		<div id="left">
83			<div id="contents">
84				<h1>≪ 第1部 ≫ 〜ピアノ〜</h1>
85				<p class="entry"><span class="number">1.</span><span class="kyokumei">星に願いを</span><span class="artist">ハーライン</span><span class="spacer_10">&nbsp;</span><span class="player">畑井 照雄</span></p>
86<p class="entry"><span class="number">2.</span><span class="kyokumei">ソナチネ<br>小さな探検</span><span class="artist">ビール<br>三善 晃</span><span class="spacer_10">&nbsp;</span><span class="player">篠田 美奈子</span></p>
87<p class="entry"><span class="number">3.</span><span class="kyokumei">ソナタ K.545 第1楽章</span><span class="artist">モーツァルト</span><span class="spacer_10">&nbsp;</span><span class="player">稲益 一臣</span></p>
88<p class="entry caption"><span class="number">&nbsp;</span><span class="caption">連弾</span></p>
89<p class="entry"><span class="number">4.</span><span class="kyokumei">タイスの瞑想曲</span><span class="artist">マスネ</span><span class="spacer_10">&nbsp;</span><span class="player">神吉 ゆうこ<br>井本 理沙</span></p>
90<p class="entry"><span class="number">5.</span><span class="kyokumei">ワルツ op. 64-2</span><span class="artist">ショパン</span><span class="spacer_10">&nbsp;</span><span class="player">川向 幸洋</span></p>
91<p class="entry"><span class="number">6.</span><span class="kyokumei">乙女の祈り</span><span class="artist">バダジェフスカ</span><span class="spacer_10">&nbsp;</span><span class="player">添田 あすか</span></p>
92<p class="entry caption"><span class="number">&nbsp;</span><span class="caption">「幻想小曲集」より</span></p>
93<p class="entry"><span class="number">7.</span><span class="kyokumei">飛翔</span><span class="artist">シューマン</span><span class="spacer_10">&nbsp;</span><span class="player">百合 喜博</span></p>
94<p class="entry"><span class="number">8.</span><span class="kyokumei">ソナタ 第2番 第1楽章</span><span class="artist">シューマン</span><span class="spacer_10">&nbsp;</span><span class="player">大平 麻友</span></p>
95			</div>
96		</div>
97	</div>
98</body>
99</html>

質問

そもそも、text-align-last: justify は動いているけど text-align: justify 働いてくれないのですが、理由は分かりますでしょうか？
<br> があっても右端が揃う方法はありますか？
そもそもこのような書類を作るのに p と span で作るという方針は妥当なのでしょうか？

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

回答1件

ベストアンサー

これは表・・・tableではないですか？
tableをお勧めしますが、一応。

HTML
1<span class="player"><span>神吉 ゆうこ</span><span>井本 理沙</span></span>

CSS
1span.player span {
2    display: block;
3    text-align: justify;
4    text-align-last: justify;
5}

投稿2017/08/10 08:55

x_x

総合スコア13749

taro_nii_chan

2017/08/10 10:26

なるほどです。 table がお勧めなのも納得です。ありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

css の justify が思い通りに動かない

やりたい事

困っていること

やった事

質問

関連した質問