• 締切済み

商品リストの横並び方について

商品リストの横並び方についてご教授ください。 アフィリエイトの商品リストを下記の様に設定していますが このリストを横並び3列に変更したいのですが、どのように変更すればよろしいでしょうか? ネット上で画像の横並びの設定方法を見つけて いじって見ましたが、ダメでした。 宜しくお願い致します。 --------------------------------- 記 --------------------------- <h2>○○○でお探しの【&nbsp;<?php echo h($keyword); ?>&nbsp;】検索結果-NO<?php echo h($pageid); ?>-</h2> <div class="texa"> <table summary="<?php echo h($keyword); ?>" width="620" border="0" cellspacing="1"> <tbody> <?php foreach ($hits as $hit) { ?> <tr> <td class="img"><a href="<?php echo h($hit->linkurl); ?>" rel="nofollow"><img alt="<?php echo h($keyword); ?>" border="0" src="<?php echo h($hit->imageurl); ?>" /></a></td> <td class="prodnote"> <p><span>商品名&nbsp;:&nbsp;<a href="<?php echo h($hit->linkurl); ?>" rel="nofollow"><?php echo h($hit->productname); ?></a></span></p> <p><?php echo h($hit->description->short); ?></p> <p><font class="nedan">[参考価格]&nbsp;&nbsp;<?php echo number_format(h($hit->price)); ?>&nbsp;円</font></p> <p>[ショップ名]&nbsp;&nbsp;<?php echo h($hit->merchantname); ?></p> </td> </tr> <?php } ?>

  • PHP
  • 回答数1
  • ありがとう数2

みんなの回答

  • agunuz
  • ベストアンサー率65% (288/438)
回答No.1

>ネット上で画像の横並びの設定方法を見つけて >いじって見ましたが、ダメでした。 どういじったのかを転記してください。 今のようにtable要素で書き出していると <?php $ct = 0; // カウンタ初期化 ?> <?php foreach ($hits as $hit) { ?> <?php $column = (++$ct % 3); // カウントアップ&列位置設定 ?> <?php if ($column === 1) { echo '<tr>'; } ?> (中略:td要素の出力) <?php if ($column === 0) { echo '</tr>'; } ?> <?php } ?> // foreachのあと、余った列分のtd要素(中身は空)を出力する といった処理が必要だと思いますが、それよりもスタイルシートで並べる方が楽じゃないかと思います(最後の「空のtd要素」出力などは慣れないと面倒でしょ?)。

yuurakushi
質問者

お礼

ご回答有難う御座います。 現在の設定では難しのでスタイルシートでの並べ替えに挑戦してみます。 今後共よろしくお願いいたします。

関連するQ&A

  • 横並びのリストで左端がはみ出る

    リストを横並びにしてメニューバーを作ろうとしているのですが、CSSの参考書に書いてある通りにHTMLとCSSを書いても、添付ファイルのように、どうしても左端がはみ出てしまいます。 (この例ではわかりやすいようにli要素の左にボーダーを入れています) index.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>TITLE</title> <link href="nav.css" rel="stylesheet" type="text/css"> </head> <body> <ul class="nav"> <li class="nav_item"><a href="index.html">ホーム</a></li> <li class="nav_item"><a href="#">リンク1</a></li> <li class="nav_item"><a href="#">リンク2</a></li> </ul> </body> nav.css .nav { display: table; width: 100%; table-layout: fixed; padding-top: 10px; padding-bottom: 10px; background-color: #dddddd; } .nav_item { display: table-cell; border-left: thick solid #000000; } .nav_item > a { display: block; list-style-type: none; text-decoration: none; text-align: center; } どのブラウザで確認しても同じ現象です。 どうやったら正常に表示されるのか、おわかりになれば教えてください。

    • ベストアンサー
    • CSS
  • cssでリストを横並びのセンタリング

    現在、サイトをHTMLからHTML5に移行中なのですが、リストを横並びにするところまではできたのですが、それをセンタリングするにはどうしたら良いでしょうか? さまざまなサイトを巡ってやり方を拝見したのですが、目的とするものがありませんでした。 現在のHTML <!-- ヘッダ開始 --> <div id="header"> <h1>サイトタイトル</h1> <p class="catch"><strong>サイト説明</strong></p> <div class="opening"> <h2><img src=".jpg" alt="表示されなかった画像の説明的な" width="900" height="260"></h2> </div> <ul class="nl clearFix"> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> </ul> <hr class="none"> </div> <!-- ヘッダ終了 --> 現在のcss /* --- ヘッダメニュー --- */ #header ul.nl { width: 100%; /* IE 6のために幅の指定が必要 */ margin: 0 auto; padding: 0; background-color: #ffffff; /* ヘッダメニューの背景色 */ list-style-type: none; text-align: center; } /* メニュー項目 */ #header ul.nl li { width: 124px; /* 項目の幅 */ float: left; line-height: 100%; } /* 最初の項目と最後の項目 */ #header ul.nl li.first, #header ul.nl li.last { width: 125px; /* 項目の幅 */ } わかりにくいと思いますが、上のように配置したいのです。 まだイマイチ理解しきれていないのですが、回答していただければと思います。 ↓HPの現状。 http://dateme.web.fc2.com/top.html

    • ベストアンサー
    • CSS
  • 問い合わせフォームでの確認画面について

    phpで問い合わせフォームを作成しているのですが、修正ヵ所があれば問い合わせフォームの下に「戻る」ボタンだけを表示し、正確に入力されていれば「戻る」ボタンと「OK」ボタンを表示することができました。 しかし、問い合わせフォームの上に表示する、修正ヵ所があれば「入力内容に誤りがあります。※印の項目は必ずご記入ください。」、正確に入力されていれば「以下の内容で送信しますか?」を表示させることができません。 この場合、どのようなコードを、どの部分に記述したら良いのでしょうか? ちなみに、submit後のphpファイルのコードは以下となります。 かなり無駄が多いかもしれません。 <table class="table margin01" width="592" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="190" align="left" bgcolor="#FFF09D">お名前<span class="tabletext1"></span></td> <td> <?php $name=$_POST['name']; if($name=='') { echo'<FONT COLOR="#cc3333">※必ず入力してください。</FONT>';; } else { echo $name; } ?> </td> </tr> <tr> <td align="left" bgcolor="#FFF09D">メールアドレス<span class="tabletext1"></span></td> <td> <?php $mail=$_POST['mail']; if (!preg_match( '/^[a-z0-9][a-z0-9_\.\-]*@[a-z0-9][a-z0-9_\.\-]+[a-z]$/i', $mail)) { echo'<FONT COLOR="#cc3333">※正しいメールアドレスを指定してください。</FONT>';; }elseif($_POST['mail']!==$_POST['mail2']) { echo '<FONT COLOR="#cc3333">※確認用メールアドレスと一致していません。</FONT>';; }else{ echo $mail; } ?> </td> </tr> <tr> <td align="left" bgcolor="#FFF09D">メールアドレス(確認)<span class="tabletext1"></span></td> <td> <?php $mail2=$_POST['mail2']; if($mail2=='') { echo'<FONT COLOR="#cc3333">※必ず入力してください。</FONT>';; } else { echo $mail2; } ?> </td> </tr> <tr> <td align="left" bgcolor="#FFF09D">お問い合せ内容<span class="tabletext1"></span></td> <td> <?php $list=$_POST['list']; if($list=='お問い合せ内容をお選びください') { echo'お問い合せ内容をお選びください<FONT COLOR="#cc3333">&nbsp;※必ず入力してください。</FONT>';; } else { echo $list; } ?> </td> </tr> <tr> <td align="left" bgcolor="#FFF09D">内容<span class="tabletext1"></span></td> <td> <?php $content=$_POST['content']; if($content=='') { echo'<FONT COLOR="#cc3333">※必ず入力してください。</FONT>';; } else { echo $content; } ?> </td> </tr> </table> <?php if($name==''|| $mail==''|| $mail2==''|| $list==''|| $content=='') { echo'<form>'; echo'<p align="center" class="margin01"><input type="button" value="戻る" onclick="history.back()"</p>'; echo'</form>'; } elseif($_POST['mail']!==$_POST['mail2']) { echo'<form>'; echo'<p align="center" class="margin01"><input type="button" value="戻る" onclick="history.back()"</p>'; echo'</form>'; } elseif(!preg_match( '/^[a-z0-9][a-z0-9_\.\-]*@[a-z0-9][a-z0-9_\.\-]+[a-z]$/i', $mail)) { echo'<form>'; echo'<p align="center" class="margin01"><input type="button" value="戻る" onclick="history.back()"</p>'; echo'</form>'; } elseif($list=='お問い合せ内容をお選びください') { echo'<form>'; echo'<p align="center" class="margin01"><input type="button" value="戻る" onclick="history.back()"</p>'; echo'</form>'; } else { echo'<form method="post"action="thanks.php">'; echo'<input type="hidden" name="name" value="'.$name.'">'; echo'<input type="hidden" name="mail" value="'.$mail.'">'; echo'<input type="hidden" name="mail2" value="'.$mail2.'">'; echo'<input type="hidden" name="list" value="'.$list.'">'; echo'<input type="hidden" name="content" value="'.$content.'">'; echo'<p align="center" class="margin01"><input type="button"onclick="history.back()"value="戻る">'; echo'<input type="submit"value="OK"></p>'; echo'</form>'; } ?>

    • ベストアンサー
    • PHP
  • サニタイズについて教えて下さい。

    PHPで問い合わせフォームを作成しましたが、サニタイズされているかがわかりません。 以下は、submit後のphpファイルですが、サニタイズされていなければ、どこにどのようなコードを記述すれば良いのでしょうか? また、サニタイズはhtmlsprcialcharsの他になにかあるのでしょうか? function myEcho($errorBool, $value) { if($errorBool) { echo'<FONT COLOR="#cc3333">',$value,'</FONT><br/>';; } else { echo $value; } } // list用? function myListEcho($errorBool, $value) { if($errorBool) { echo'お問い合せ内容をお選びください<FONT COLOR="#cc3333">&nbsp;※必ず入力してください。</FONT>';; } else { echo $value; } } // 名前のチェック $name=$_POST['name']; $nameError = false; if($name=='') { $nameError = true; $name = '※必ず入力してください。';; } // E-mailのチェック $mail=$_POST['mail']; $mailError = false; $mail2=$_POST['mail2']; $mail2Error = false; if (!preg_match( '/^[a-z0-9][a-z0-9_\.\-]*@[a-z0-9][a-z0-9_\.\-]+[a-z]$/i', $mail)) { $mailError = true; $mail='※正しいメールアドレスを指定してください。'; }elseif($mail!==$mail2) { $mailError = true; $mail='※確認用メールアドレスと一致していません。'; } // 確認用チェック if($mail2=='') { $mail2Error = true; $mail2='※必ず入力してください。'; } // お問い合わせ内容確認? $list=$_POST['list']; $listError = false; if($list=='お問い合せ内容をお選びください') { $listError = true; } // 内容 $content=$_POST['content']; $contentError = false; if($content=='') { $contentError = true; $content='※必ず入力してください。';; } ?> <?php if($nameError || $mailError || $mail2Error || $listError || $contentError) { echo'<p align="center"><FONT COLOR="#cc3333">入力内容に誤りがあります。※印の項目は必ずご記入ください。</FONT></p>';; } else{ echo'<p class="text4">以下の内容で送信しますか?</p>';; } ?> <table class="table margin01" width="592" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="190" align="left" bgcolor="#FFF09D">お名前<span class="tabletext1"></span></td> <td> <?php myEcho($nameError,$name);; ?> </td> </tr> <tr> <td align="left" bgcolor="#FFF09D">メールアドレス<span class="tabletext1"></span></td> <td> <?php myEcho($mailError,$mail);; ?> </td> </tr> <tr> <td align="left" bgcolor="#FFF09D">メールアドレス(確認)<span class="tabletext1"></span></td> <td> <?php myEcho($mail2Error,$mail2);; ?> </td> </tr> <tr> <td align="left" bgcolor="#FFF09D">お問い合せ内容<span class="tabletext1"></span></td> <td> <?php myListEcho($listError,$list);; ?> </td> </tr> <tr> <td align="left" bgcolor="#FFF09D">内容<span class="tabletext1"></span></td> <td> <?php myEcho($contentError,$content);; ?> </td> </tr> </table> <?php if($nameError || $mailError || $mail2Error || $listError || $contentError) { echo'<form>'; echo'<p align="center" class="margin01"><input type="button" value="戻る" onclick="history.back()"</p>'; echo'</form>'; } else { echo'<form method="post"action="thanks.php">'; echo'<input type="hidden" name="name" value="'.$name.'">'; echo'<input type="hidden" name="mail" value="'.$mail.'">'; echo'<input type="hidden" name="mail2" value="'.$mail2.'">'; echo'<input type="hidden" name="list" value="'.$list.'">'; echo'<input type="hidden" name="content" value="'.$content.'">'; echo'<p align="center" class="margin01"><input type="button"onclick="history.back()"value="戻る">'; echo'<input type="submit"value="OK"></p>'; echo'</form>'; } ?>

    • ベストアンサー
    • PHP
  • phpで読み込んだcsvが文字化けします

    PHPでCSVよ読み込んで名簿を作っています。 出力まではうまくいったのですが、なぜか一字だけ文字化けしてしまいます。(「務」→「冶」になってしまいます) 普段あまりプログラムはしないので、原因がわからず困りはてております。よろしくお願いいたします。 PHP部分の記述は以下になります。 ――――――――――――――――――――――――――――――――――― <?php $fname = "csv/meibo.csv"; $file = fopen($fname, "r"); $nowrap = "nowrap=\"nowrap\""; $tcent = "class=\"center\""; $tbg = "class=\"even\""; while (list($name, $post, $add, $add2, $tel, $http, $url, $mail) = fgetcsv($file, 1000, ",")){ $name = strtr($name, "﨑", "崎"); $add2 = strtr($add2, "﨑", "崎"); $tline ++; if($tline % 2 == 0){ echo "<tr $tbg>\n"; }else{ echo "<tr>\n"; } echo "<td $nowrap>$name</td>\n"; echo "<td $tcent>$post</td>\n"; echo "<td>$add<br />$add2</td>\n"; echo "<td $tcent>$tel</td>\n"; if($http == "http://"){ echo "<td $tcent><a href=\"$http$url\" target=\"_blank\"><img src=\"img/common/img_hp.gif\" alt=\"HPへ\" width=\"16\" height=\"16\" /></a></td>\n"; } else { echo "<td $tcent>&nbsp;</td>\n"; } echo "<td>$mail</td>\n"; echo "</tr>\n"; } fclose($file); ?> ――――――――――――――――――――――――――――――――――― PHP4を利用。 .phpのcharsetはShift_JISで、同じくShift_JISで保存しています。 CSVファイルはエクセルで作りShift_JISで書き出しています。

    • ベストアンサー
    • PHP
  • csvの特定のキーワードを指定して、そのキーワードを含む行を表示させる方法

    こんにちは。いつも参考にさせてもらっています。 さて、下記のコードはcsvのデータをphpにて読み込み、各項目ごとに分割をして、指定した行のみをtableに表示させているのですが、実際は行を指定するのではなく、特定のキーワードを指定し、その指定したキーワードの行をtable上に表示させたいのです。 自分なりに調べてみたのですが、うまくいかない理由がわからなかったので今回投稿させて頂きました。 よろしくお願い致します。 <?php $openfile = file_get_contents('sq-tyo.csv'); $csv_gyo = split("\n", $openfile); echo "<div>"; list($from, $class, $to, $type1, $type2, $kikan) = split(",", $csv_gyo[0]);//1行目 echo "<table>"; echo "<tr>"; echo "<td>"; echo "<b>出発地</b>"; echo "</td>"; echo "<td>".$from."</td>"; echo "<td>"; echo "<b>座席クラス</b>"; echo "</td>"; echo "<td>".$class."</td>"; echo "</tr>"; echo "<tr>"; echo "<td>"; echo "<b>目的地</b>"; echo "</td>"; echo "<td>".$to."</td>"; echo "<td>"; echo "<b>種類</b>"; echo "</td>"; echo "<td>".$type1."</td>"; echo "</tr>"; echo "<tr>"; echo "<td>"; echo "<b>経路</b>"; echo "</td>"; echo "<td>".$type2."</td>"; echo "<td>"; echo "<b>期間</b>"; echo "</td>"; echo "<td>".$kikan."</td>"; echo "</tr>"; echo "</table>"; ?> 本当はデータベースを使用したいのですが、今回はcsv使用のみと言われてしまったので、ご協力をお願いいたします。

    • ベストアンサー
    • PHP
  • olタグ・liタグで一部のリストを横並びにした

    olタグ・liタグで一部のリストを横並びにしたい場合 olタグに display: inline; list-style-type: none; としても意味がないのでしょうか? <style type="text/css"> ol.test1{ display: inline; list-style-type: none; }</style> <ol class="test1"> <li><a href="#">階層1</a></li> <li><a href="#">階層2</a></li> <li><a href="#">階層3</a></li> </ol> としても横にはならずに番号が消えました。 なので li.test2{ display: inline; list-style-type: none; } として <ol> <li class="test2"><a href="#">階層1</a></li> <li class="test2"><a href="#">階層2</a></li> <li class="test2"><a href="#">階層3</a></li> </ol> としたのですが liの数だけスタイルシートを指定しないとダメなのでしょうか? <ol> <li class="test2"><a href="#">階層1</a></li> <li><a href="#">階層2</a></li> <li><a href="#">階層3</a></li> </ol> のように一つだけクラスに入れたら そこだけ番号が消えた上 横並びにはなりませんでした。

    • ベストアンサー
    • CSS
  • phpについて~<div>;foreach

    PHP初心者です。<div>の中でforeachって使えるのですか? <?PHP require_once 'rss_fetch.inc'; $url = $td[SITEURL]; $rss = fetch_rss($url); $title = $rss->channel['title']; $title = $item[title]; $title = mb_convert_encoding($title, "EUC-JP", "auto"); echo<<<__EOF__ <div class="dt"> <p class="dtTitle"> <a href="{$_SERVER["PHP_SELF"]}?id={$td["ID"]}&amp;url={$td["SITEURL"]}"> {$td["SITENAME"]} </a> {$listCt} {$flgImg} </p> <p class="dtCategory">コミュニティ:{$td["CATEGORY"]}{$FlgTag}</p> $NAME <p class="dtComment">{$img}{$td["COMMENT"]}</p> $ADMINCOMMENT <p class="dtDate">登録日:{$td["REGISTDATE"]}[<a href="regist.php?id={$td["ID"]}">編集</a>]</p> この部分↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <?php foreach ($rss->items as $item ) { $title = $item[title]; $title = mb_convert_encoding($title, "EUC-JP", "auto"); $url = $item[link]; $date = date("Y/m/d H:i:s", strtotime($item['dc']['date'])); ?> <p class="dtComment"> <li><a href=\"$url\">$title</a>$date</li></p> <?PHP } ?> </div> __EOF__; ?> このような書き方しか思いつかないのですが、 <div>~</div>の中でforeachの使い方を教えてください。

    • 締切済み
    • PHP
  • チェックボックスから検索、PHP コード付き

    現在チェックボックスとフリーワード検索をしようしたサイトを作ろうとしているのですが、どうしても仕様通りにいきませんでしたのでここで 質問をさせて頂きました。 検索画面ですが、簡単な2ページ構成になっております。(kensaku.phpとresult.php) コードのどこが間違っているのかが分かりません。 どなたかお分かりになる方がいましたらお伺い出来ませんでしょうか。 宜しくお願い致します。 1,kensaku.php <form action="result.php" method="POST" > <table class="font12" cellpadding="5" cellspacing="10" width="430" align="center"> <tr> <td> <span class="checkbox"><input type="checkbox" name="sejyutu[]" value="1" />aaa</span> <span class="checkbox"><input type="checkbox" name="sejyutu[]" value="2" />bbb</span> <span class="checkbox"><input type="checkbox" name="sejyutu[]" value="3" />ccc</span><br /> </td> </tr> <tr> <td><input type="text" name="sejyutu_else" value="フリーワード検索" size="30" /></td> </tr> <tr> <td colspan="2" align="right"><input type="submit" value="検索する" /></td> <?php //DB接続・選択 if (!$int_connect = @mysql_connect('localhost','bbb','aaa')) { die("can't connect mysql server."); } //データベースに接続 if (!@mysql_select_db("database", $int_connect)) { die("can't use selected database."); } // SQLクエリ $sql = "select * from table"; $where = array(); // sejyutuカラムの条件を調べる if (isset($_POST['sejyutu']) && is_array($_POST['sejyutu'])) { foreach ($_POST['sejyutu'] as $sejyutu) { $where[] = "sejyutu like '%" . mysql_real_escape_string($sejyutu) . "%'"; } } // sejyutu_elseカラムの条件を調べる if (isset($_POST['sejyutu_else']) && strlen($_POST['sejyutu_else'])) { $where[] = "sejyutu_else like '%" . mysql_real_escape_string($_POST['sejyutu_else']) . "%'"; } // 検索キーワードの有無により処理分岐 if (!$where) { echo "検索キーワードを入力して下さい"; } else { // SQL文を生成する $sql .= " where " . implode(' OR ', $where); $res = mysql_query($sql,$int_connect); if (!mysql_num_rows($res)) { echo "<p>該当データがありません</p>"; } else { // TABLEタグを書く while ($row = mysql_fetch_array($res)) { // 各結果をTR,TDタグで整形して表示する ?> <table width="430" cellpadding="5" cellspacing="0" class="font12"> <tr> <td colspan="2"><p class="salon_name"><?php echo mb_convert_encoding(trim($row["salon_name"]),"sjis","euc-jp") ?></p></td> <td><a href="salon_page.php?code=<?php echo $row['id'];?>">詳しくはこちら</a></td> </tr> <tr> <td valign="top"><p class="salon_item">最寄り駅:</p></td> <td class="salon_detail"><?php echo mb_convert_encoding(trim($row["station"]),"sjis","euc-jp") ?></td> </tr> <tr> <td valign="top"><p class="salon_item">住所:</p></td> <td class="salon_detail"><?php echo mb_convert_encoding(trim($row["address"]),"sjis","euc-jp") ?></td> </tr> <tr> <td valign="top"><p class="salon_item">施術名</p></td> <td class="salon_detail"><?php echo mb_convert_encoding(trim($row["sejyutu"]),"sjis","euc-jp") ?></td> </tr> <?php } } } ?>

    • ベストアンサー
    • PHP
  • tableの左側の色をCSSで一回で変えたい

    tableの左側の色をCSSで一回で変えたいのですが、どのようにするのが一番良いのでしょうか?現在はclassを使っています。 アドバイス宜しくお願いします。 <head> <style type="text/css"> <!-- table { height: 400px; width: 400px; } .tableleft { background-color: #FF0000; } --> </style> </head> <body> <table summary="ABCD" > <caption>ABCD</caption> <tr> <td class="tableleft">A</td> <td>B</td> <td>C</td> <td>D</td> </tr> <tr> <td class="tableleft">1</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td class="tableleft">2</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td class="tableleft">3</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> </body>

    • ベストアンサー
    • HTML