2行に渡るデータを一括りとして４つの情報を美しく表示させたい

###前提・実現したいこと
htmlとCSSを利用し、2行に渡るデータを美しくレスポンシブ対応で表示させたいのですが、良い方法がわかりません。

追記
初めての質問で、要領がわからず申し訳ありません。
nth-child疑似クラスの順番の解釈が間違っていたようです。
そうなると、リストでなくテーブルを使う方がよいのでしょうか？

###試したこと
初期はバックグラウンドに色を付ける予定ではなかったので、Aのようなhtmlで、それぞれのclassでwidthやpaddingを指定して、一度は思い通りに実現したのですが、バックグラウンド（偶数か奇数のみ）に色をつけることになりul liで囲いBのような形で試したのですが、上手く配色されません。

html
1<img></img>
2<div class="container">
3 <div class="1">日付</div>
4 <div class="2">あああああああああああああ</div>
5 <div class="3">いいい</div>
6 <div class="4">ううう</div>
7</div>

html
1<img></img>
2<div class="container">
3 <ul>
4  <li>
5   <div class="1">日付</div>
6   <div class="2">あああああああああああああ</div>
7   <div class="3">いいい</div>
8   <div class="4">ううう</div>
9  </li>
10  <li>
11   <div class="1">日付</div>
12   <div class="2">あああああああああああああ</div>
13   <div class="3">いいい</div>
14   <div class="4">ううう</div>
15  </li>
16 </ul>
17</div>

css
1.li:nth-child(odd){
2	background: #ff8080;
3}

kei344

2017/11/30 02:34

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、質問テンプレートの文字列が残ってしまっていますので、不要な部分は削除してください。

kei344

2017/11/30 03:11

CSSも提示されたほうが適切な回答がしやすくなります。

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

回答4件

ベストアンサー

img要素に終了タグは必要ありません。
.liとすると、「liクラスが設定された要素」を指します。今回はli要素に対してスタイルを適用したいので、liとする必要があります。
li要素に背景色のスタイルを適用すると、その中のdiv要素にもその背景色が適用されます。今回は、li要素内の偶数、もしくは奇数個目の要素の背景色を変更したいので、li要素に背景色をスタイルを設定するのではなく、li要素の子要素の偶数個、もしくは奇数個目のdiv要素に背景色を設定することで正しい結果が得られます。
クラス名では、先頭文字が数値の場合スタイルが正常に適用できません。javascriptで使うだけ、というならば別に良いと思いますが、後々CSSでスタイルを適用したくなったときのことを考えてちゃんとしたクラス名を設定しておいたほうが良いと思います。
質問文の画像のようなデザインにすることは、現状のHTMLの構造では難しいと思いますので、変更が必要です。

以上のことを踏まえて、質問者さんの実現したいことは、以下のように行うことができると思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        body,
8        ul {
9            margin: 0;
10            padding: 0;
11        }
12
13        body {
14            display: flex;
15            flex-wrap: wrap;
16            align-items: flex-start;
17        }
18
19        ul {
20            list-style-type: none;
21        }
22
23        .container {
24            flex-grow: 1;
25        }
26
27        .container li {
28            display: flex;
29            flex-wrap: wrap;
30            justify-content: space-between;
31        }
32
33        .container li:nth-child(odd) {
34            background: #ff8080;
35        }
36
37        .class1,
38        .class2,
39        .classes {
40            flex: 1;
41        }
42
43        .classes {
44            display: flex;
45            flex-wrap: wrap;
46            justify-content: space-between;
47        }
48
49        .class2 {
50            page-break-after: always;
51            break-after: always;
52        }
53    </style>
54</head>
55<body>
56<img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image" alt>
57<div class="container">
58    <ul>
59        <li>
60            <div class="class1">2017年11月26日</div>
61            <div class="classes">
62                <div class="class2">あああああああああああああ</div>
63                <div class="class3">いいい</div>
64                <div class="class4">ううう</div>
65            </div>
66        </li>
67        <li>
68            <div class="class1">2017年11月26日</div>
69            <div class="classes">
70                <div class="class2">あああああああああああああ</div>
71                <div class="class3">いいい</div>
72                <div class="class4">ううう</div>
73            </div>
74        </li>
75    </ul>
76</div>
77</body>
78</html>

投稿2017/12/02 03:24

s8_chu

総合スコア14731

CSS
1.container div:nth-child(odd) {
2  background: #eee;
3}
4
5.container div:nth-child(even) {
6  background: #fff;
7}

レスポンシブであることがどう影響しているのかわからないので、問題があれば追記願います。

-- 追記。
記述ミスですか？

CSS
1/*.li:nth-child(odd){*/
2li:nth-child(odd) {
3    background: #ff8080;
4}

投稿2017/11/30 02:45

編集2017/11/30 04:37

x_x

総合スコア13749

eitaroichi

2017/11/30 04:58

ミスと言うか、こう表記したところ上手く動作していません。親のdivに対してnth-child疑似クラスを使うという事でしょうか？

x_x

2017/11/30 06:44

んん？このように書いているのなら質問のほうを修正したほうがいいのでは？

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

テーブルはどうかと質問されていたのですが、４つの情報を指示通り（高さを揃えて、改行をする）表現するにはテーブルは難しいと思いました。
htmlを変えるとしたら定義リストです。
レスポンシブにもより対応しやすいかと思います。

<div class="colored">
	<dl>
		<dt>日付</dt>
		<dd>ああああああああああ<br>いいい　ううう</dd>
	</dl>
	<dl>
		<dt>日付</dt>
		<dd>ああああああああああ<br>いいい　ううう</dd>
	</dl>
	<dl>
		<dt>日付</dt>
		<dd>ああああああああああ<br>いいい　ううう</dd>
	</dl>
</div>

dl{
	display:flex;  /*日付と情報を横並びにするため*/
	padding:10px;  /*見た目をきれいにする調整*/
	margin:0px;　　/*背景色を入れたとき高さが均一になるようにするため*/

}
.colored dl:nth-child(odd){
	background-color:　　　;
}

投稿2017/11/30 04:19

aizawa

総合スコア8

eitaroichi

2017/11/30 04:56

ありがとうございます。テーブルは難しいのですね。「いいい」と「ううう」は両者とも頭を揃えたく、文字数は可変します。

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

<img>
<div class="container">
 <div class="data">
  <span>日付</span>
  <span>概要1</span>
  <span>概要2</span>
  <span>概要3</span>
 </div>
 <div class="data" style="background-color:">
  <span>日付</span>
  <span>概要1</span>
  <span>概要2</span>
  <span>概要3</span>
 </div>
</div>

レスポンシブに変形がしやすく、偶数部分のバックグラウンドに色をつけたいならこのような感じでどうでしょうか？CSSファイルで色を変えたいなら、

.data:nth-child(2n) {
  background-color: 
}

とすればOK

投稿2017/11/30 02:50

編集2017/11/30 02:58

退会済みユーザー

総合スコア0

eitaroichi

2017/11/30 04:59

ありがとうございます。同様に記述してみたのですが、バックグラウンドに色が付きませんでした。

退会済みユーザー

2017/11/30 05:01

background-color:だけでは色はつきませんよ？ background-color:red　とか入れてみましたか？

eitaroichi

2017/11/30 05:29

はい入れています。カラーが記載されていないためでなく、class="4"のfloar:left;をはずしたところ、上手くいきました。ただ、表示が崩れてしまっているので、もう少し検討してみます。ありがとうございました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

2行に渡るデータを一括りとして４つの情報を美しく表示させたい

関連した質問