2011年11月17日

CSSで作る垂直棒グラフ-tableのborder利用

スポンサード リンク

 表のボーダーで垂直棒グラフを描く。
border-bottomプロパティ

※)ご覧のブラウザによっては目盛の高さが
グラフと合わない場合があります。
100-
80-
60-
40-
20-
66 100 85 53 32 77
  数学 国語 理科 社会 英語 音楽

CSSで作る横(水平)棒グラフ - 表のボーダー利用
ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース

<html>
 <head>
<title>CSSで作る垂直棒グラフ-tableのborder利用</title>
 <style type="text/css">
   <!--
#tateG {
  border: 1px solid #9ca8a8;/*table のボーダー*/
   }
#tateG th {
  color: maroon;
   }
#tateG td {
  font: 1.1em Verdana; /*フォントのサイズ 種類*/
  width : 2.5em;
  text-align: center; /* テキストの水平方向の位置揃え 中央寄せ */
  vertical-align: bottom;/* テキストの垂直方向の位置揃え 下揃え*/
    }
.memori { /* 左側 目盛り */
  padding-bottom : 28px; /* 下 余白 */
 *padding-bottom : 29px;  /* IE6 7 */
  font: 10px Verdana;
  text-align: right;
  border-right: solid 1px #000;
    }
/* グラフ部分 データセル(td)の下枠線: 線種(実線) 太さ 色; */
 #suu{ border-bottom: solid 132px lime; }
 #koku{ border-bottom: solid 200px red; }
 #rika{ border-bottom: solid 170px fuchsia; }
 #syaka{ border-bottom: solid 106px blue; }
 #eigo{ border-bottom: solid 64px purple; }
 #onn{ border-bottom: solid 154px gold; }
-->
</style>
</head>
<body>
<table border="0" cellspacing="6" id="tateG">
  <tr>
<td style="width : 1.7em;">
   <div class="memori">100-</div>
   <div class="memori">80-</div>
   <div class="memori">60-</div>
   <div class="memori">40-</div>
   <div class="memori">20-</div>
   </td>
   <td id="suu">66</td>
   <td id="koku">100</td>
   <td id="rika">85</td>
   <td id="syaka">53</td>
   <td id="eigo">32</td>
   <td id="onn">77</td>
  </tr>
  <tr>
   <th></th>
   <th>数学</th>
   <th>国語</th>
   <th>理科</th>
   <th>社会</th>
   <th>英語</th>
   <th>音楽</th>
  </tr>
</table>
</body>
</html>
tableのボーダーで垂直棒グラフを作る。
<table border="0" cellspacing="6" id="tateG">
<tr>
 <td id="suu">66</td>
</tr>

</table>

まずtableにcellspacing="6"(セルとセルの余白)を指定してボーダーの
左右間隔を拡げます。つぎにグラフを表示する"td"セルに"id"を付け、
スタイルを指定します。
#suu{ border-bottom:solid 132px lime; }
このセルの下側のボーダーは、sorid(実線) 132px(幅) lime(色)になります。
これを順次、各tdセルに(幅)、(色)を変えて指定していくと垂直棒グラフができあがります。
borderプロパティ
ボーダーの線種、幅、色の設定をおこないます。 borderプロパティ css
vertical-alignプロパティ
tableセル内のテキストや画像の垂直方向の位置揃えを指定します。
 vertical-align:top;   vertical-align:middle;   vertical-align:bottom;   指定なし 
top
上端揃え
middle
中央揃え
bottom
下端揃え

 指定しない場合はボーダーとテキストの間隔がボーダーの幅によっては空いて
しまいますが、vertical-align:bottom;を指定することで、常にボーダーの
真上にテキストを配置することができます。

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
CSSで作る横(水平)棒グラフ - 表のボーダー利用
テーブル
text-align プロパティ css
borderプロパティ css
border-styleプロパティ; ボーダーのスタイルの設定
border-radiusプロパティ 角丸ボーダー
paddingプロパティ ボックスの内側の余白
CSS positionプロパティ
カラーコード 色見本



posted by javaScript at 15:45 | 大阪 ☀ | グラフ 電卓 | このブログの読者になる | 更新情報をチェックする

2011年11月14日

CSSで作る横(水平)棒グラフ - 表のボーダー利用

スポンサード リンク

 表のボーダーでグラフを描く。
border-leftプロパティ

好きな松茸料理レシピ 調査結果。
焼き松茸:  200
松茸ご飯:  280
土瓶蒸し:  350
網焼き:  160
食べない:  80

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース

<html>
 <head>
<title>CSSで作る横(水平)棒グラフ-表のボーダー利用</title>
 <style type="text/css">
   <!--
#tDiv{/*表を包むボックス*/
   border: 1px solid #9ca8a8; /*ボーダー*/
   background-color : linen; /* 背景色 */
   width:500px;
   padding:3px; /* 内側余白 */
       }
#cap{ /*タイトル*/
   font-weight : bold; /*太字*/
   color : teal; /* 前景色 */
   padding:3px;
   width:500px;
   text-align : center;/* 文字中央寄せ */
      }
#gTbl th{/* 見出し */
   text-align : right;
   color : darkred;
     }
/* グラフ部分 データセル(td)の左枠線: 線種(実線) 太さ 色;*/
#mTake1{ border-left:solid 200px fuchsia; }
#mTake2{ border-left:solid 280px purple; }
#mTake3{ border-left:solid 350px red; }
#mTake4{ border-left:solid 160px lime; }
#mTake5{ border-left:solid 80px blue; }
-->
</style>
</head>
<body><!--テーブルは一部省略しています。-->
<div id="cap">* 好きな松茸料理レシピ 調査結果。</div>
   <div id="tDiv">
 <table border="0" cellspacing="7" id="gTbl">
  <tr>
     <th>焼き松茸:</th><td id="mTake1"> 200</td>
  </tr>
  <tr>
     <th>松茸ご飯:</th><td id="mTake2"> 280</td>
  </tr>
  <tr>
     <th>土瓶蒸し:</th><td id="mTake3"> 350</td>
  </tr>
  <tr>
     <th>網焼き:</th><td id="mTake4"> 160</td>
  </tr>
  <tr>
     <th>食べない:</th><td id="mTake5"> 80</td>
 </tr>
</table>
  </div>
</body>
</html>
tableのボーダーでグラフを作る。
<table border="0" cellspacing="7" id="gTbl">
<tr><th>焼き松茸:</th><td id="mTake1"> 200</td></tr>

</table>

まずtableを作りcellspacing="7"(セルとセルの余白)を指定してボーダーの同士
間隔を拡げます。つぎに見出しセル"th"の横の"td"セルに"id"を付け、
スタイルを指定します。
#mTake1{ border-left:solid 200px purple; }
このセルの左側のボーダーは、sorid(実線) 200px(幅) fuchsia(色)になります。
焼き松茸:  200
これを順次、各tdセルに(幅)、(色)を変えて指定していくと棒グラフができあがります。
borderプロパティ
ボーダーの線種、幅、色の設定をおこないます。 borderプロパティ css

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
テーブル
text-align プロパティ css
borderプロパティ css
border-styleプロパティ; ボーダーのスタイルの設定
border-radiusプロパティ 角丸ボーダー
paddingプロパティ ボックスの内側の余白
CSS positionプロパティ
カラーコード 色見本

posted by javaScript at 15:57 | 大阪 ☀ | グラフ 電卓 | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。