PHP と CSS を使って文字や画像をループで表示させたい。

###前提・実現したいこと
PHP と CSS で入力されたデータや画像が
並んだスマホサイトを作っています。
PHP, CSS初心者で初の質問です、よろしくお願いいたします。

具体的には「売り上げ数」と「クレーム数」をビジュアル化させるために
関連つけた画像を表示させようとしています。

###発生している問題・エラーメッセージ

わかる方なら凄く簡単なことだと思いますが
順を追って表示される ”画像” や ”文字” が全部一箇所に重なってしまう。

最後に「実際の表示」と「希望の完成イメージ」を添付しましたので
ご確認頂けたら幸いです。

###該当のソースコード

<?php

print'<!DOCTYPE html>';
print'<html>';
print'<head>';
print'<meta charset="UTF-8">';
print'<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">';

print'<link rel="stylesheet" href="style.css">';

print'</head>';
print'<body>';



$code['0']='0';
$code['1']='1';

$staff['0'] ='田中';
$staff['1'] ='鈴木';

$customer['0']['0']='佐藤';
$customer['1']['0']='佐藤';
$customer['1']['1']='高橋';


$sale['0']['0']='2';
$sale['1']['0']='2';
$sale['1']['1']='5';

$claim['0']['0']='4';
$claim['1']['0']='3';
$claim['1']['1']='2';


for($i=0;$i<count($code);$i++)
{
	foreach($sale[$i] as $key => $value)
	{
		print'<a class="name">'.$staff[$i].'⇒'.$customer[$i][$key].'</a>';

		switch(true)
		{
			case ($sale[$i][$key]<=3):
				print'<a class="pic_gray_l"></a>';
				break;

			case ($sale[$i][$key]>3) && ($sale[$i][$key]<=5):
				print'<a class="pic_pink_l"></a>';
				break;

			default:
		}
	}


	foreach($claim[$i] as $key => $value)
	{
		switch(true)
		{
			case ($claim[$i][$key]<=3):
				print'<a class="pic_gray_r"></a>';
				break;

			case ($claim[$i][$key]>3) && ($claim[$i][$key]<=5):
				print'<a class="pic_pink_r"></a>';
				break;

				default:
		}
	}


	foreach($claim[$i] as $key => $value)
	{
		print'<div class="OK">';
			print'<a class="OK2">売り上げ</a>';
		print'</div>';

		print'<div class="NG">';
			print'<a class="NG2">クレーム</a>';
		print'</div>';
	}
}

print'</body>';
print'</html>';

?>


■以下CSS
html,body{margin:0;padding:0;}

.pic_pink_l
{
	width:49.9%;
	height:89px;

	background: url(images/front-page-home_pink_l.jpg) center no-repeat;
	background-size:contain;

	position:absolute;
	left:0%;
	z-index:0;
}

.pic_pink_r
{
	width:50%;
	height:89px;

	background: url(images/front-page-home_pink_r.jpg) center no-repeat;
	background-size:contain;

	position:absolute;
	left:50%;
	z-index:0;
}





.pic_gray_l
{
	width:49.9%;
	height:89px;

	background: url(images/front-page-home_gray_l.jpg) center no-repeat;
	background-size:contain;

	position:absolute;
	left:0%;
	z-index:0;
}

.pic_gray_r
{
	width:50%;
	height:89px;

	background: url(images/front-page-home_gray_r.jpg) center no-repeat;
	background-size:contain;

	position:absolute;
	left:50%;
	z-index:0;
}


.name
{
	font-size:15px;
	color:#FFFFFF;
	float:left;
	text-align:left;
	width:50%;
	height:20px;

	position:absolute;
	left:0%;
	z-index:1;
}


.OK
{
	display:inline;
	float:left;
	width:49%;
	height:64px;

	position:absolute;
	left:0%;
	top:8%;
	z-index:1;
}

.OK2
{
	font-size:20px;
	border:0;
	width:100%;
	height:100%;
	float:left;
	color:#FFFFFF;
	text-align:center;

	position:absolute;
	z-index:1;
}


.NG
{
	display:inline;

	float:left;
	width:49%;
	height:64px;

	position:absolute;
	left:50%;
	top:8%;
	z-index:1;
}

.NG2
{
	font-size:20px;
	width:100%;
	height:100%;
	float:left;
	color:#FFFFFF;
	text-align:center;

	position:absolute;
	z-index:1;
}

###補足情報(言語/FW/ツール等のバージョンなど)

toutou

2016/09/25 13:07

答えのほうじゃなくて気になってしまったんですが <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="style.css"> </head> <body> <?php $code['0']='0'; $code['1']='1'; $staff['0'] ='田中'; $staff['1'] ='鈴木'; $customer['0']['0']='佐藤'; $customer['1']['0']='佐藤'; $customer['1']['1']='高橋'; $sale['0']['0']='2'; $sale['1']['0']='2'; $sale['1']['1']='5'; $claim['0']['0']='4'; $claim['1']['0']='3'; $claim['1']['1']='2'; for($i=0;$i<count($code);$i++) { foreach($sale[$i] as $key => $value) { print'<a class="name">'.$staff[$i].'⇒'.$customer[$i][$key].'</a>'; switch(true) { case ($sale[$i][$key]<=3): print'<a class="pic_gray_l"></a>'; break; case ($sale[$i][$key]>3) && ($sale[$i][$key]<=5): print'<a class="pic_pink_l"></a>'; break; default: } } foreach($claim[$i] as $key => $value) { switch(true) { case ($claim[$i][$key]<=3): print'<a class="pic_gray_r"></a>'; break; case ($claim[$i][$key]>3) && ($claim[$i][$key]<=5): print'<a class="pic_pink_r"></a>'; break; default: } } foreach($claim[$i] as $key => $value) { print'<div class="OK">'; print'<a class="OK2">売り上げ</a>'; print'</div>'; print'<div class="NG">'; print'<a class="NG2">クレーム</a>'; print'</div>'; } } ?> </body> </html> というようなことにするとprintをそんないっぱい書かなくてすむかなと。あとPHPとCCSはコードブロックを二つ使ってやるとわかりやすいかな。 ’’’PHP コード ’’’ ’’’CSS コード ’’’ 見たいな感じでやると読みやすいかもです。右のプレビューで確認しながらやるといいかも。失礼しました。

kei344

2016/09/25 13:12

出力されたHTML（ブラウザで「ページのソースを表示」）を質問文に追記されたほうが回答を得られやすいと思います。

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

回答1件

ベストアンサー

本題とは関係ないですが、foreachは1個にまとめていいと思います。
absoluteやtopは親ボックスを基準とした絶対位置になるので、このままだと常にbodyタグが親ボックスとなり、３列とも同じ位置に重なってしまいます。そうならない為に、親ボックス「position:relative」でサイズ指定したdivタグで囲うと、画像が改行されるようになると思います。
このままでは、nameクラスが画像の中に表示されると思うので、<br>で改行すれば良いです。
希望完成イメージ通りだと最後に<br>改行があったほうが良いと思います。

php
1    foreach($sale[$i] as $key => $value)
2    {
3    	print'<div style="position:relative;width:100%;height:109px;">';	/* 追加 */
4        print'<a class="name" style="color:#000000;">'.$staff[$i].'⇒'.$customer[$i][$key].'</a>';
5        print'<br>';	/* 追加 */
6        switch(true)
7        {
8            case ($sale[$i][$key]<=3):
9                print'<a class="pic_gray_l"></a>';
10                break;
11
12            case ($sale[$i][$key]>3) && ($sale[$i][$key]<=5):
13                print'<a class="pic_pink_l"></a>';
14                break;
15
16            default:
17        }
18        switch(true)
19        {
20            case ($claim[$i][$key]<=3):
21                print'<a class="pic_gray_r"></a>';
22                break;
23
24            case ($claim[$i][$key]>3) && ($claim[$i][$key]<=5):
25                print'<a class="pic_pink_r"></a>';
26                break;
27
28            default:
29        }
30
31        print'<div class="OK">';
32        print'<a class="OK2">売り上げ</a>';
33        print'</div>';
34
35        print'<div class="NG">';
36        print'<a class="NG2">クレーム</a>';
37        print'</div>';
38
39        print'</div>';	/* 追加 */
40        print'<br>';	/* 追加 */
41    }