(HTML,CSS)文章の折り返しの方向を上でなく下にしたいです。

htmlページで文章が一定の長さを超えたとき、改行させたいのですが、
改行すると、二行目が一行目があった位置に来てしまい、一行目だったものが上方向に積み重なってしまいます。
一行目の位置はそのままで、下方向に二行目以降が連なるようにしたいのですが、CSSではどう指定すればよろしいでしょうか？
お分かりになる方、どなたか教えていただければ幸いです。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta http-equiv="X-UA-Compatible" content="IE=edge">
5<title></title>
6<meta charset="utf-8">
7<meta name="description" content="">
8<meta name="author" content="">
9<meta name="viewport" content="width=device-width, initial-scale=1">
10<link rel="stylesheet" href="css/test.css">
11</head>
12<body id="group">
13	<section id="printoutput">
14		<div id="contents" class="contentsPage1">
15			<div id="headerCont">
16				<div id="titles">
17					<h1>
18						<span>強調される場所</span>見出しの文章
19					</h1>
20					<div class="names">
21						<p class="subtitles">サブタイトル</p>
22						<p class="group">ここにはグループ名が入ります。長いグループ名を入れると、グループ名が２行になることがあり、そちらが現在直面している問題です。どなたか教えていただければ幸いです。</p>
23					</div>
24				</div>
25			</div>
26		</div>
27	</section>
28</body>
29</html>

test.cssの内容です

css
1@charset "UTF-8";
2
3body {
4	-webkit-text-size-adjust: 100%;/* テキストサイズバグ回避 */
5	-webkit-tap-highlight-color: rgba(0,0,0,0);
6	line-height: 1.6em;
7	font-family:sans-serif;
8	min-width: 320px;
9	font-size: 14px;
10}
11p,li,dd {
12	background: url("../t.gif");
13	max-height: 99999px;
14}
15dt,h2,h3,h4,h5 {max-height: 99999px;}
16img {
17	vertical-align: bottom;
18	max-width: 100%;
19}
20a {
21	text-decoration: none;
22	color:inherit;
23}
24.sp_only {display: none;}
25.print_only {display: none;}
26@media (max-width: 500px) {
27	.pc_only {display: none;}
28	.sp_only {display: block;}
29}
30
31/*
32box-sizing: border-box;
33-webkit-box-sizing:border-box;
34*/
35
36header {
37	width: 100%;
38	min-width: 500px;
39	margin: 0 auto;
40	text-align: center;
41	padding: 0 30px 0;
42	box-sizing:border-box;
43	position: fixed;
44	top: 0;
45	left: 0;
46	z-index: 999;
47	background: #ffffff;
48	/*overflow: hidden;*/
49}
50
51header #headerCont {
52	margin: 10px auto;
53	width: 1050px;
54	box-sizing: border-box;
55	padding: 0 25px;
56}
57header #titles {
58	width: 100%;
59	background: #2196F3;
60	box-sizing: border-box;
61	padding: 10px;
62
63}
64header #titles h1 {
65	color: #fff;
66	font-size: 200%;
67	height: 48px;
68	line-height: 48px;
69	text-align: left;
70}
71header #titles h1 span:first-child {
72	font-size: 130%;
73	letter-spacing: 0.1em;
74}
75header #titles > div {
76	overflow:hidden;
77	background: #E3F2FD;
78	padding: 8px;
79}
80header #titles > div > p {
81	float: left;
82}
83header #titles > div > .name {
84	float: right;
85}
86
87header #menuArea {
88	float: right;
89	position: relative;
90	padding-top: 30px;
91}
92header #menuArea .menuBtn {
93	position: absolute;
94	top: 0;
95	right: 0;
96	overflow:hidden;
97	z-index: 9999;
98}
99header #menuArea .menuBtn p {
100	cursor: pointer;
101	position: relative;
102	width: 40px;
103	height: 32px;
104	float: right;
105	z-index: 9999;
106}
107header #menuArea .menuBtn  span {
108	background: #2196F3;
109	width: 40px;
110	height: 6px;
111	display: block;
112	position: absolute;
113	right: 0;
114	-webkit-transition: all .4s cubic-bezier(0.000, 0.605, 0.435, 1.000);
115	transition: all .4s cubic-bezier(0.000, 0.605, 0.435, 1.000);
116	z-index: 9999;
117}
118
119header #menuArea .menuBtn #bar1 { -webkit-transform: translateY(0); transform: translateY(0);}
120header #menuArea .menuBtn #bar2 { -webkit-transform: translateY(13px); transform: translateY(13px);}
121header #menuArea .menuBtn #bar3 { -webkit-transform: translateY(26px); transform: translateY(26px);}
122
123header #menuArea .menuBtn.close #bar1 { -webkit-transform: translateY(13px) rotate(45deg); transform: translateY(13px) rotate(45deg);}
124header #menuArea .menuBtn.close #bar2 { opacity: 0; /*-webkit-transform: translate(30px,13px); transform: translate(30px,13px);*/}
125header #menuArea .menuBtn.close #bar3 { -webkit-transform: translateY(13px) rotate(-45deg); transform: translateY(13px) rotate(-45deg);}
126
127header #menuArea .menuBtn h2 {
128	float: left;
129	margin-right: 0.5em;
130	font-size: 12px;
131	line-height: 12px;
132	color: #2196F3;
133	letter-spacing: 0.1em;
134}
135
136
137
138#menu {
139	display: none;
140	position: fixed;
141	top: 0;
142	left: 0;
143	width: 100%;
144	height: 100%;
145	box-sizing: border-box;
146	padding: 1em;
147	text-align: center;
148	background: rgba(255,255,255,0.9);
149	z-index: 999;
150}
151
152
153
154@media (max-width: 500px) {
155	header {
156		min-width: 320px;
157		padding: 1em 0 0;
158		/*position: relative;*/
159	}
160	header #titles {
161		width: 100%;
162		text-align: left;
163		overflow:hidden;
164	}
165	header #titles h1 {
166		font-size: 100%;
167		position: relative;
168		height: auto;
169		line-height: 1.5em;
170		padding: 0 0 10px;
171	}
172
173	header #titles h1 span + span {
174		display: none;
175	}
176	header #titles > div {
177		width: 100%;
178		box-sizing: border-box;
179		font-size: 92.8%;
180		padding: 5px 8px;
181	}
182	header #titles > div > p {
183		float: none;
184	}
185	header #titles > div > .name {
186		float: none;
187	}
188	/*header #titles .menuBtn {
189		width: 18%;
190		float: right;
191	}*/
192	header #menuArea .menuBtn {
193		right: 10px;
194		top: 10px;
195	}
196	header #menuArea img,
197	header #menuArea h2 {
198		display: none;
199	}
200	header #menuArea .menuBtn  span {
201		background: #E3F2FD;
202		height: 4px;
203		width: 32px;
204	}
205	header #menuArea .menuBtn #bar2 { -webkit-transform: translateY(10px); transform: translateY(10px);}
206	header #menuArea .menuBtn #bar3 { -webkit-transform: translateY(20px); transform: translateY(20px);}
207
208	header #menuArea .menuBtn.close #bar1 { background: #2196F3;}
209	header #menuArea .menuBtn.close #bar3 { background: #2196F3;}
210}
211strong {
212	font-weight: bold;
213}
214@media (max-width: 500px) {
215	.w990 {
216		width: 100%;
217		box-sizing: border-box;
218		padding-left: 3%;
219		padding-right: 3%;
220	}
221}
222
223#contents {
224	width: 1050px;
225	margin: 0 auto 0;
226	overflow:hidden;
227	padding: 0 25px 100px;
228	box-sizing:border-box;
229	position: relative;
230	z-index: 1;
231	border-bottom: 1px dotted #ccc;
232}
233
234#contents #titles{
235	border-bottom: 5px solid #78909C;
236	/*margin-bottom: 10px;*/
237	margin-top: 30px;
238	margin-bottom: 100px;/*追加*/
239	height: 50px;
240	position: relative;
241}
242#contents #titles.title_comment{
243	margin-bottom: 30px;
244	margin-top: 10px;
245}
246#contents #titles.title_step{
247	margin-bottom: 80px;
248	margin-top: 10px;
249}
250#contents #titles h1{
251	position: absolute;
252	color: #78909C;
253	font-size: 140%;
254	left:0;
255	bottom: 4px;
256}
257#contents #titles h1 span{
258	font-size: 180%;
259	font-weight: bold;
260	margin-right: 10px;
261}
262#contents #titles .names{
263	position: absolute;
264	right:0;
265	bottom: 4px;
266	text-align: right;
267}
268#contents #titles .names .subtitles{
269	color: #78909C;
270	font-weight: bold;
271	margin-bottom: 15px;
272	font-size: 120%;
273}
274#contents #titles .names .group{
275	margin-bottom: -28px;
276    font-size: 95%;
277    line-height: 1.0em;
278}

kei344

2018/02/23 06:29

書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）か、再現するURLを提示されたほうが回答を得やすいと思います。

m.ts10806

2018/02/23 07:02

提示のccsは「css/test.css」のもので良いですよね？（ソースコード冒頭などに書いてあると助かります）

riohik

2018/02/23 07:03

はい、そうです。不備ですみません。

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

回答1件

ベストアンサー

原因はposition: absolute;に頼ったレイアウトにしているためです。
下記の部分でbottom: 4px;を指定しているため、下からの位置が固定されるので当然要素の高さが増えると上に伸びます。

CSS
1#contents #titles .names {
2	position: absolute;
3	right: 0;
4	bottom: 4px;
5	text-align: right;
6}

最終的にどうしたいかはわかりませんが、スクリーンショットのような構成であれば#contents #titles .names .subtitles 以外の位置決めにposition: absolute;は不要です。

投稿2018/02/23 07:28

kei344

総合スコア69407

riohik

2018/02/23 08:19

無事解決できました。未熟なもので恐縮です。誠にありがとうございます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

(HTML,CSS)文章の折り返しの方向を上でなく下にしたいです。

関連した質問