あるapiから天気予報を作っています(下記url)。前回ここ(はてな)で質問させていただき、やっと完成しましたが今度は目的通りのレイアウトができません。

http://withmama.lolipop.jp/kaihatsu/weather/latlng_weather.php では天気予報4日分がタテに並んでいます。これをヨコに並べるには、どうすれば良いでしょうか?
どなたかご教示いただけませんか?
尚、上記urlのソースをコメント欄に記載しておきます。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/04/14 17:18:11
  • 終了:2012/04/17 16:39:51

ベストアンサー

id:windofjuly No.3

うぃんど回答回数2625ベストアンサー獲得回数11492012/04/14 18:59:51

ポイント150pt

回答No.2の方法がスマートで良いのですが、
phpでHTMLを生成する方法の例として、下記のようなものを作ってみました。
(スタイルをstyleタグで一括指定するほうが出来上がりのHTMLがもう少しシンプルになるのですが、今回はタグの中にそれぞれ書き込んでます)

<?php
//hl=jaで日本語で取得出来る
$lat = 35.710081;
$lng = 139.808242;
$lat = str_replace('.', '', $lat);
$lng = str_replace('.', '', $lng);

$str = file_get_contents('http://www.google.com/ig/api?weather=,,,'.$lat.','.$lng.'&hl=ja');

//SJISだと解析出来なかったのでUTF-8に変換してる
$str = mb_convert_encoding($str, 'UTF-8', 'Shift-JIS');
$weather_xml = simplexml_load_string ($str);

?>

<table>
<caption>4日間の天気</caption>
<tbody>
<tr>
<?php
foreach($weather_xml->weather->forecast_conditions as $value) {
echo <<<EOT
<td style="width:10em">
<span style="font-weight: bold">{$value->day_of_week['data']}</span><br />
{$value->condition['data']}<br />
<img src="http://www.google.com{$value->icon['data']}"><br />
<span style="color:#FF0000">{$value->high['data']}<span>/
<span style="color:#0000FF">{$value->low['data']}<span>
</td>
EOT;
}
?>
</tr>
</tbody>
</table>

ブラウザで見た状態

出力されたHTML

<table>
<caption>4日間の天気</caption>
<tr>
<td style="width:10em">
<span style="font-weight: bold"></span><br /><br />
<img src="http://www.google.com/ig/images/weather/jp_rainy.gif"><br />
<span style="color:#FF0000">16<span><span style="color:#0000FF">8<span>
</td><td style="width:10em">
<span style="font-weight: bold"></span><br />
ところにより晴れ<br />
<img src="http://www.google.com/ig/images/weather/jp_sunny.gif"><br />
<span style="color:#FF0000">19<span><span style="color:#0000FF">8<span>
</td><td style="width:10em">
<span style="font-weight: bold"></span><br />
ところにより晴れ<br />
<img src="http://www.google.com/ig/images/weather/jp_sunny.gif"><br />
<span style="color:#FF0000">19<span><span style="color:#0000FF">12<span>
</td><td style="width:10em">
<span style="font-weight: bold"></span><br />
雨の可能性<br />
<img src="http://www.google.com/ig/images/weather/jp_rainysometimescloudy.gif"><br />
<span style="color:#FF0000">22<span><span style="color:#0000FF">11<span>
</td></tr>
</table>
id:taknt

温度は 横に出てたのに いつのまにか 画像のレイアウトでは 縦になってますね。

それは 縦を 横にすることでは ないのでしょうか?

2012/04/14 19:32:01
id:windofjuly

そこだけ横に並べるのが不自然に見えたので、
「いつのまにか」ではなく、「意図して」縦のレイアウトにしてます。

2012/04/14 19:41:04

その他の回答(3件)

id:taknt No.1

きゃづみぃ回答回数13537ベストアンサー獲得回数11982012/04/14 17:47:57

ポイント50pt
どうして 縦になるのか ということですが、これはループ内に
<tr>や</tr>のタグがあるからです。

これを ループの外に出さないとダメですね。

つまり このタグで 縦に並ぶようにしているからです。

ループの外にやって レイアウトの調整が必要となります。



こんな感じにする

<tr>
<?
foreach($weather_xml->weather->forecast_conditions as $value):
?>
<th><?=$value->day_of_week['data']?></th>
<td>
<?=$value->condition['data']?><br />
<img src="http://www.google.com<?=$value->icon['data']?>">
</td>
<td>
<font color="#FF0000"><?=$value->high['data']?></font>/<font color="#0000FF"><?=$value->low['data']?></font>
</td>
<?
endforeach
?>
</tr>

ただし 横には 並びますが、レイアウトは 調整しないとダメですね。


変な人が 文句を言ってくるので 追記します。

質問にあるとおりに 縦を 横にすると 以下のようになります。
f:id:taknt:20120414193645j:image

これが 私の回答となります。
ただ、これだと 若干 みにくいかなと思い、レイアウトの調整は 必要と
書きました。
もちろん、どのようにレイアウトするのも 質問者の自由です。
私も そこまでは 質問の範囲外なので 答えませんでした。
あとは 工夫して 見やすくしてもらえればいいかと思います。

他8件のコメントを見る
id:taknt

それは その通りだと 思います。
しかも 今回だけではないですし。

2012/04/14 19:55:07
id:windofjuly

「今回だけではないです」と上乗せまでしてくるとは・・・

2012/04/14 19:57:31
id:niwa-mikiho No.2

niwa-mikiho回答回数508ベストアンサー獲得回数382012/04/14 18:02:23

ポイント80pt

スタイルシートで tr に対して float:left を指定することで1列にすることが出来ます。

現状表示してる table を div id="weather" で囲み、スタイルシートは

#weather > table tr{ float:left; }

とします。

表示してる table が api 得たそのままではなく、自前で整形して表示しているのなら、

<table>
<tr><th>日付や曜日</th></tr>
<tr><td>天気</td></tr>
</table>

としたほうが良いかなと思います。

id:windofjuly No.3

うぃんど回答回数2625ベストアンサー獲得回数11492012/04/14 18:59:51ここでベストアンサー

ポイント150pt

回答No.2の方法がスマートで良いのですが、
phpでHTMLを生成する方法の例として、下記のようなものを作ってみました。
(スタイルをstyleタグで一括指定するほうが出来上がりのHTMLがもう少しシンプルになるのですが、今回はタグの中にそれぞれ書き込んでます)

<?php
//hl=jaで日本語で取得出来る
$lat = 35.710081;
$lng = 139.808242;
$lat = str_replace('.', '', $lat);
$lng = str_replace('.', '', $lng);

$str = file_get_contents('http://www.google.com/ig/api?weather=,,,'.$lat.','.$lng.'&hl=ja');

//SJISだと解析出来なかったのでUTF-8に変換してる
$str = mb_convert_encoding($str, 'UTF-8', 'Shift-JIS');
$weather_xml = simplexml_load_string ($str);

?>

<table>
<caption>4日間の天気</caption>
<tbody>
<tr>
<?php
foreach($weather_xml->weather->forecast_conditions as $value) {
echo <<<EOT
<td style="width:10em">
<span style="font-weight: bold">{$value->day_of_week['data']}</span><br />
{$value->condition['data']}<br />
<img src="http://www.google.com{$value->icon['data']}"><br />
<span style="color:#FF0000">{$value->high['data']}<span>/
<span style="color:#0000FF">{$value->low['data']}<span>
</td>
EOT;
}
?>
</tr>
</tbody>
</table>

ブラウザで見た状態

出力されたHTML

<table>
<caption>4日間の天気</caption>
<tr>
<td style="width:10em">
<span style="font-weight: bold"></span><br /><br />
<img src="http://www.google.com/ig/images/weather/jp_rainy.gif"><br />
<span style="color:#FF0000">16<span><span style="color:#0000FF">8<span>
</td><td style="width:10em">
<span style="font-weight: bold"></span><br />
ところにより晴れ<br />
<img src="http://www.google.com/ig/images/weather/jp_sunny.gif"><br />
<span style="color:#FF0000">19<span><span style="color:#0000FF">8<span>
</td><td style="width:10em">
<span style="font-weight: bold"></span><br />
ところにより晴れ<br />
<img src="http://www.google.com/ig/images/weather/jp_sunny.gif"><br />
<span style="color:#FF0000">19<span><span style="color:#0000FF">12<span>
</td><td style="width:10em">
<span style="font-weight: bold"></span><br />
雨の可能性<br />
<img src="http://www.google.com/ig/images/weather/jp_rainysometimescloudy.gif"><br />
<span style="color:#FF0000">22<span><span style="color:#0000FF">11<span>
</td></tr>
</table>
id:taknt

温度は 横に出てたのに いつのまにか 画像のレイアウトでは 縦になってますね。

それは 縦を 横にすることでは ないのでしょうか?

2012/04/14 19:32:01
id:windofjuly

そこだけ横に並べるのが不自然に見えたので、
「いつのまにか」ではなく、「意図して」縦のレイアウトにしてます。

2012/04/14 19:41:04
id:taroe No.4

taroe回答回数1099ベストアンサー獲得回数1322012/04/16 17:25:20

ポイント50pt

横に並べたいのですよね?

<div style="float:left:width:100px;">
天気情報1
</div>
<div style="float:left:width:100px;">
天気情報2
</div>
<div style="float:left:width:100px;">
天気情報3
</div>
<div style="float:left:width:100px;">
天気情報4
</div>
<div style="clear:both;"></div>

widhは横幅。
テーブルタグよりもDIVタグを使った方が良いと思いますよ。
DIVタグでできることがほとんどですし、実際その方が今風ですよ。

最終行が改行みたいなもの。
この下に同じ物を書けば
2段になるわけですね。

  • id:ozaki
    こちらが http://withmama.lolipop.jp/kaihatsu/weather/latlng_weather.php のソースです。よろしくお願いいたします。

    <?
    //hl=jaで日本語で取得出来る


    $lat = 35.710081;
    $lng = 139.808242;

    $lat = str_replace('.', '', $lat);
    $lng = str_replace('.', '', $lng);

    $str = file_get_contents('http://www.google.com/ig/api?weather=,,,'.$lat.','.$lng.'&hl=ja');

    //SJISだと解析出来なかったのでUTF-8に変換してる
    $str = mb_convert_encoding($str, 'UTF-8', 'Shift-JIS');
    $weather_xml = simplexml_load_string ($str);
    /*
    echo "<pre>";
    print_r($weather_xml);
    echo "</pre>";
    */

    ?>
    <table>
    <caption>4日間の天気</caption>
    <!---
    <tr>
    <th>曜日</th>
    <th>天気</th>
    <th>気温</th>
    </tr>
    --->
    <?
    foreach($weather_xml->weather->forecast_conditions as $value):
    ?>
    <tr>
    <th><?=$value->day_of_week['data']?></th>
    <td>
    <?=$value->condition['data']?><br />
    <img src="http://www.google.com<?=$value->icon['data']?>">
    </td>
    <td>
    <font color="#FF0000"><?=$value->high['data']?></font>/<font color="#0000FF"><?=$value->low['data']?></font>
    </td>
    </tr>
    <?
    endforeach
    ?>
    </table>
  • id:ozaki
    みなさん、返信遅れてゴメンナサイ! それぞれ参考にさせていただきました。どうもありがとうございました。windofjulyさんのご回答が私としては一番わかりやすかったので、ベストアンサーとさせていただきましたが、他の方のご回答もたいへん参考になりました。
    追伸。あまりもめないでくださいね・・・。

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

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

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

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