foreachで表示する画像を3列のテーブル表示などにしたいと思っています。


例えば、下のURLサンプルでは、単にforeachで画像を並べただけですが、これを列を指定して「3列」などで並べたいと思っています。
http://www.phppro.jp/school/mashup/vol4/2

ネット調べたらこんな感じ?で書かれているものもあったのですが、もっと簡単に出来ないのかなーと思ったりしています。
<table>
<?php foreach (array_chunk($values, 2) as $row) { ?>
<tr>
<?php foreach ($row as $value) { ?>
<td><?php echo htmlentities($value); ?></td>
<?php } ?>
</tr>
<?php } ?>

何かシンプルで良い方法は無いものでしょうか?ご教授いただけましたら幸いです。

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2011/04/17 12:11:56
  • 終了:2011/04/17 23:31:55

ベストアンサー

id:windofjuly No.1

うぃんど回答回数2625ベストアンサー獲得回数11492011/04/17 13:33:22

ポイント230pt

実現方法にもいろいろありますので、まずはリンク先のコードを少しだけ改造するという方向で回答を考えてみました(テストはしていません)

 

【1】全ての画像の幅が決まっている場合

例えば画像の幅が100pxだとすれば下記のようなスタイルを追加するだけで横3列になります

div.photozou { width:350px; }

HTMLでは「他の要素との余白(margin:マージン)」や「内部要素との余白(padding:パディング)」などが存在するため、単純に3倍の300pxでは思い通りの動作にならないため、大雑把に「画像3枚分以上、3枚分以下の数値」としてざっくりとですが350pxとしてあります

 

【2】画像の幅がそれぞれ違う場合

(a)とにかく3つずつ並べば良いという場合

レイアウトをしているとは言えないので参考にもなりませんが質問文中のものよりは短くなります

<?php
foreach (array_chunk($values, 2) as $row) {
    foreach ($row as $value) {
        echo htmlentities($value);
    }
    echo '<br />';
}
?>

(b)3つをきれいに並べたい

質問文にあげておられるようにTABLEタグを使うという手が古くから使われていますが、現代では「レイアウトのためにTABLEタグを使うことは非推奨」となっており、HTML+CSSで実現するべきこととされています

  div.photozou { width:350px; }
  span.photozou { width:100px; }
foreach ($xml->info->photo as $photo){
    $ret .= '<a href="' . $photo->url . '">';
    $ret .= '<span class="photozou">';
    $ret .= '<img src="' . $photo->thumbnail_image_url . '" alt="' . $photo->photo_title . '">';
    $ret .= '</span>';
    $ret .= "</a>\n";
id:hiroponta

とても素晴らしい回答で満足しました!

具体的なやり方もわかって、とても良かったです。

ありがとうございました。

2011/04/17 23:30:04

その他の回答(2件)

id:windofjuly No.1

うぃんど回答回数2625ベストアンサー獲得回数11492011/04/17 13:33:22ここでベストアンサー

ポイント230pt

実現方法にもいろいろありますので、まずはリンク先のコードを少しだけ改造するという方向で回答を考えてみました(テストはしていません)

 

【1】全ての画像の幅が決まっている場合

例えば画像の幅が100pxだとすれば下記のようなスタイルを追加するだけで横3列になります

div.photozou { width:350px; }

HTMLでは「他の要素との余白(margin:マージン)」や「内部要素との余白(padding:パディング)」などが存在するため、単純に3倍の300pxでは思い通りの動作にならないため、大雑把に「画像3枚分以上、3枚分以下の数値」としてざっくりとですが350pxとしてあります

 

【2】画像の幅がそれぞれ違う場合

(a)とにかく3つずつ並べば良いという場合

レイアウトをしているとは言えないので参考にもなりませんが質問文中のものよりは短くなります

<?php
foreach (array_chunk($values, 2) as $row) {
    foreach ($row as $value) {
        echo htmlentities($value);
    }
    echo '<br />';
}
?>

(b)3つをきれいに並べたい

質問文にあげておられるようにTABLEタグを使うという手が古くから使われていますが、現代では「レイアウトのためにTABLEタグを使うことは非推奨」となっており、HTML+CSSで実現するべきこととされています

  div.photozou { width:350px; }
  span.photozou { width:100px; }
foreach ($xml->info->photo as $photo){
    $ret .= '<a href="' . $photo->url . '">';
    $ret .= '<span class="photozou">';
    $ret .= '<img src="' . $photo->thumbnail_image_url . '" alt="' . $photo->photo_title . '">';
    $ret .= '</span>';
    $ret .= "</a>\n";
id:hiroponta

とても素晴らしい回答で満足しました!

具体的なやり方もわかって、とても良かったです。

ありがとうございました。

2011/04/17 23:30:04
id:Galapagos No.2

Galapagos回答回数963ベストアンサー獲得回数892011/04/17 16:42:05

ポイント3pt

Smartyのhtml_tableを使えば簡単にできます。

id:hiroponta

そのやり方が知りたかったので、URLぐらい欲しかったかも・・・。

回答頂けたのでポイントは気持ちだけ。

2011/04/17 23:30:47
id:pretaroe No.3

pretaroe回答回数531ベストアンサー獲得回数752011/04/17 22:41:35

ポイント100pt

TABLEタグは使わないでCSSを使うほうが簡単になります。

3列に並べたいのなら、float:left指定で横並びでDIVで並べることです。

で3個毎に clear:bothを行って改行すれば、1つのループだけで簡単にできますよ。

イメージとしてはこんな感じです。

<?php
$i=0;
foreach ($xml->info->photo as $photo){
	echo quot;<div style='float:left;'>";
	echo "<img src=''/>";		//画像表示
	echo "</div>"
	$i=$+1;
	if($i % 3){   //3枚に改行
		echo "<div style='both:clear;'></div>";
	} 
}
?>
id:hiroponta

こんなに簡単な方法もあるんですね。

とても勉強になりました。

ありがとうございました。

2011/04/17 23:30:20

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません