id:southgate_01
ポイントあり100ptベストアンサーあり
インターネットウェブ制作

cssについての質問です。

divを使って棒グラフを作ろうとしているのですが、ソースは次のようになります。

<table><tr><td>グラフタイトル</td></tr><tr><td>ここにdivが複数入る</td></tr></table>

グラフの棒は次のようなdivになります。
divの要素数、およびheightは可変です。

<div style='float:left;margin-left:1;background-color:#000000;width:5;heigh:100'></div>
<div style='float:left;margin-left:1;background-color:#000000;width:5;heigh:120'></div>
<div style='float:left;margin-left:1;background-color:#000000;width:5;heigh:140'></div>

発生する問題は、div要素が上部で揃ってしまうためグラフが逆さになってしまいます。
ちょうどつららのようになるわけですが、これをひっくり返したいというのが希望です。

解決方法を教えていただけると助かります、よろしくお願いします。

回答の条件
  • 1人5回まで
  • 登録：
  • 終了：2009/04/06 12:59:15
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:kn1967 No.1

回答回数2915ベストアンサー獲得回数301

ポイント100pt

ひとつの案でしかありませんが

「トップマージンを適宜設定してやることで下に押しやる」ではいかが？

<div style='float:left;margin-top:200;margin-left:1;background-color:#000000;width:5;height:100'></div>
<div style='float:left;margin-top:100;margin-left:1;background-color:#000000;width:5;height:200'></div>
<div style='float:left;margin-top:  0;margin-left:1;background-color:#000000;width:5;height:300'></div>
id:southgate_01

ありがとうございます、速攻で解決しました。

大変助かりました。

2009/04/06 12:58:53

コメント（4件)

  • id:sakuragaoka
    桜ヶ丘 2009/04/06 14:04:46
    値0の場合以外は単位はちゃんと設定したほうがいいですよ。
    >>
    <div style='float:left;margin-top:200px;margin-left:1px;background-color:#000000;width:5px;height:100px'></div>
    <div style='float:left;margin-top:100px;margin-left:1px;background-color:#000000;width:5px;height:200px'></div>
    <div style='float:left;margin-top: 0;margin-left:1px;background-color:#000000;width:5px;height:300px'></div>
    <<
    validでないという理由の他に、場合によっては単位なしはemと解釈されることがあるので（この場合はないけど）混乱することもあります。
  • id:Mook
    Mook 2009/04/06 16:05:39
    作成している間に締め切りになってしまいましたが、せっかく作ったのでコメントで失礼します。
    やっていることは同じですが、JavaScript で margin-top を自動計算する例です。
    （インデントのために全角スペースを使用しているので、半角に置換後実行してください。）
    <html>
    <head>
    <script type="text/javascript">
    <!--
    function setgraph(){
    function setgraph(){
    　　var max = 0;
    　　var gr = document.getElementById( "graph" ).getElementsByTagName( "div" );
    　　for ( i=0 ; i<gr.length ; i++ )
    　　　　if ( max < parseInt( gr[i].style.height ) ) { max = parseInt( gr[i].style.height ) };

    　　for ( i=0 ; i<gr.length ; i++ )
    　　　　gr[i].style.marginTop = ( max - parseInt( gr[i].style.height ) ) + "px" ;
    }
    -->
    </script>
    </head>
    <body onload="setgraph();">
    <table border="1">
    <tr><td>グラフタイトル</td></tr>
    <tr><td>
    <div id="graph">
    　　<div style='float:left;margin-left:1;background-color:#0000FF;width:10;height:300'></div>
    　　<div style='float:left;margin-left:1;background-color:#00FF00;width:10;height:200'></div>
    　　<div style='float:left;margin-left:1;background-color:#FF0000;width:10;height:100'></div>
    </div>
    </td></tr>
    </table>
    </body>
    </html>
  • id:southgate_01
    southgate_01 2009/04/07 20:17:54
    おぉ、コメントありがとうございます。
    書いていただいたコードも早速試してみます。
  • id:Mook
    Mook 2009/04/08 21:50:54
    アップの際のゴミが入ってしまったようです。
    function setgraph(){
    がかぶってますので、1行を削除してお試しください。

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

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

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

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ