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

あるapiから天気予報を作っています(下記url)。前回ここ(はてな)で質問させていただき、やっと完成しましたが今度は目的通りのレイアウトができません。
http://withmama.lolipop.jp/kaihatsu/weather/latlng_weather.php では天気予報4日分がタテに並んでいます。これをヨコに並べるには、どうすれば良いでしょうか?
どなたかご教示いただけませんか?
尚、上記urlのソースをコメント欄に記載しておきます。


●質問者: ozaki
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● きゃづみぃ
●50ポイント
どうして 縦になるのか ということですが、これはループ内に
<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

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


うぃんどさんのコメント
出来上がり想定できてますか? trをループの外に出しただけだと下記のようになるのですよ。 >|html| <tr><th></th><td></td><td></td><td></td><th></th><td></td><td></td><td></td><th></th><td></td><td></td><td></td><th></th><td></td><td></td><td></td></tr> ||<

きゃづみぃさんのコメント
だから 調整は 必要です。

うぃんどさんのコメント
>だから 調整は 必要です。 レイアウトの調整方法を訊いている質問に対してそれが答えとは笑えないジョークですね。 ポイント欲しさか、相手して欲しのかわかりませんが、 知らない/判らないのに回答してるんじゃないですか?

きゃづみぃさんのコメント
質問は >タテに並んでいます。これをヨコに並べるには、どうすれば良いでしょうか? ですよ。 私が回答したとおりに やれば ヨコには 並びます。 質問に ちゃんと回答しているのに 変ないいがかりを つけるのは やめてください。 性格が悪すぎます。

うぃんどさんのコメント
>>タテに並んでいます。これをヨコに並べるには、どうすれば良いでしょうか? >ですよ。 >質問に ちゃんと回答しているのに 変ないいがかり あなたの回答では私がHTMLで示したように何でもかんでも横並びになってしまうのです。 それはつまり、あなたが部分的にしか理解していないことを示しています。 質問者が混乱してしまわないようにコメントしているのですが、どこが性格悪いですかね?

きゃづみぃさんのコメント
だから あとは どのように レイアウトするのか レイアウトの調整が必要だと言ってるのです。

うぃんどさんのコメント
>どのように レイアウトするのか レイアウトの調整が必要だと言ってるのです そのレイアウトの調整方法を訊いているのに、 「レイアウトの調整が必要」では回答になってないでしょって言ってるんですが?

うぃんどさんのコメント
「性格が悪すぎます」や「変な人」という部分については、訂正と謝罪を要求します。

きゃづみぃさんのコメント
それは その通りだと 思います。 しかも 今回だけではないですし。

うぃんどさんのコメント
「今回だけではないです」と上乗せまでしてくるとは・・・

2 ● niwa-mikiho
●80ポイント

スタイルシートで 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>

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


3 ● うぃんど
●150ポイント ベストアンサー

回答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>

きゃづみぃさんのコメント
温度は 横に出てたのに いつのまにか 画像のレイアウトでは 縦になってますね。 それは 縦を 横にすることでは ないのでしょうか?

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

4 ● taroe
●50ポイント

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

<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段になるわけですね。

関連質問

●質問をもっと探す●



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