人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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 } ?>

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


●質問者: ぽこたん
●カテゴリ:インターネット ウェブ制作
✍キーワード:URL いもの シンプル ネット 教授
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● うぃんど
●230ポイント ベストアンサー

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

【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";
◎質問者からの返答

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

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

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


2 ● Galapagos
●3ポイント

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

◎質問者からの返答

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

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


3 ● pretaroe
●100ポイント

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>";
} 
}
?>
◎質問者からの返答

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ