2012年02月09日

CSSで作る横棒グラフ-span要素,利用

スポンサード リンク

 span 要素でグラフのバーを表現 CSS。

20% 75% 5%

評価ランク: 良い   普通  × ダメ

  グラフの表示ボックスをdiv 要素で,
span要素の幅,背景色を変えてグラフのバーを作っています。

heteml
【ちょ〜簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版!
ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース

<html>
 <head>
<title>CSSで作る横棒グラフ-span要素,利用</title>
 <style type="text/css">
<!--
#grh{ /* グラフの表示ボックス */
    width: 450px; /* 幅 */
    border: 1px solid #207870; /* 枠線 */
    padding: 3px 6px 0px 3px;  /* 内側余白 */
    background-color : #fffff0;/* 背景色 */
      }

#grh span{ /* グラフ バー */
    display:block;   /* ブロックラベルで表示 */
    border: 1px solid #e6e6fa;
    border-right:2px solid gray;
    border-bottom:2px solid gray;
    text-align: center;   /* 文字の配置 */
    line-height: 2em;   /* 行の高さ */
    margin-bottom: 3px;   /* 外側下 余白 */
    font-size: 1em;
     }

.gBar0{  /* グラフ バーの色,幅 */
    width: 20%;  /* 幅 */
    background-color : aqua; /* 背景色 */
     }

.gBar1{
   width: 75%;
   background-color : pink;
     }

.gBar2{
   width: 5%;
   background-color : gold;
    }

#gTxt span{  /* 評価ランク 表示領域 */
   padding:2px 5px 0px 7px;
   border: 1px solid gray;
   color :teal;
    }
-->
</style>

</head>
<body>
<div id="grh">
    <span class="gBar0">20%</span>
    <span class="gBar1">75%</span>
    <span class="gBar2">5%</span>
</div>
<p id="gTxt"><strong> 評価ランク:</strong> <span class="gBar0">○</span> 良い
 <span class="gBar1">△</span> 普通
 <span class="gBar2">×</span> ダメ
</p>

</body>
</html>
line-heightプロパティ
行の高さを指定します。line-height:値;
ここではspan要素に適用してグラフバーの高さを指定しています。

line-height : normal ;規定値 line-height : 1.5em ; line-height : 2em ;

heteml
ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
徐々に動く、水平棒グラフ- 表のボーダー利用
CSSで作る横(水平)棒グラフ - 表のボーダー利用
CSSで作る垂直棒グラフ - 表のボーダー利用
text-align プロパティ
borderプロパティ 枠線
paddingプロパティ ボックスの内側の余白
background-colorプロパティ 背景色



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

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