2011年11月24日

word-spacingプロパティ

スポンサード リンク

 グラフの目盛りと数値を描く。
word-spacingプロパティ

0% 25% 50% 75% 100%
グラフ  50

word-spacingプロパティは半角スペースで空けられた文字列の単語と単語の空白の間隔を指定します。
これを使って目盛りの数値を書いてみました。目盛りは画像で作ってあります。

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

サンプルソース

<html>
 <head>
<title>word-spacing プロパティ</title>
 <style type="text/css">
   <!--
#yokoImgG{
  border: solid 1px #9ca8a8; /* table の枠線: 線種(実線) 太さ 色; */
   }
#yokoImgG tbody td{
  font: 0.8em Verdana; /* フォントのサイズ 種類 */
  vertical-align: middle;/* テキストの垂直方向の位置揃え 中央 */
  width: 440px;
  padding: 3px 0;/* セル内余白:上下 左右; */
    }
#yokoImgG tbody img{/* 画像グラフ部分 */
  vertical-align: middle; /* 画像の垂直方向の位置揃え 中央 */
  padding-left: 2px;
   }
#yokoImgG tfoot img{ /* 目盛りの画像 */
  vertical-align: middle;
   }
#sclImg{/* 目盛りの画像微調整 */
  padding-left: 1px;
   }
#scaleTxt{/* 目盛りの数値 */
  margin-left: -1px;
  word-spacing: 78px; /* 単語間のスペース */
  font-size: 12px;"
   }
-->
</style>
</head>
<body>
<table id='yokoImgG'>
 <tfoot>
  <tr>
   <th></th>
    <td><!--画像を横に隙間なく並べる-->
  <img src='dot.gif' width='1' height='10' alt='' id='sclImg'
/><img src='dot.gif' width='198' height='1' alt=''
/><img src='dot.gif' width='1' height='10' alt=''
/><img src='dot.gif' width='198'height='1' alt=''
/><img src='dot.gif' width='1'height='10' alt='' />
  <div id="scaleTxt">0% 25% 50% 75% 100%</div>
   </td>
 </tr>
</tfoot>
<tbody>
  <tr>
    <th>グラフ</th><!--画像でグラフの棒 widthで棒の長さ-->
    <td><img src='gph-green-yoko.gif' width='200' height='20' alt='' /> 50</td>
  </tr>
</tbody>
</table>
</body>
</html>
画像で目盛りを作ります。
<img src='dot.gif' width='1' height='10' alt='' id='sclImg'
/><img src='dot.gif' width='198' height='1' alt=''
/>
 :
 :

元の画像はwidth='1' height='1'の点です。これにそれぞれheight='10'
width='198'
を指定して縦線、横線を作ります。

これにvertical-align: middle;を指定して横線を真ん中に持ってきます。
vertical-alignプロパティ
tableセル内のテキストや画像の垂直方向の位置揃えを指定します。
top :上端揃え middle : 中央揃え bottom : 下端揃え
word-spacingプロパティ
半角スペースで空けられた文字列の単語間のスペースです。
      <div>0% 25% 50% 75% 100%</div>

 *半角数値を入れてください:px
0% 25% 50% 75% 100%
書式
div {word-spacing: 値;}
値の指定
word-spacing: normal;
   指定しない時と同じ。 これが初期値です。
word-spacing: 数値で指定;
   数値に [px]、[em]、[ex]などの単位をつけます。
CSS
        #wSpc{word-spacing: 65px;
             color:maroon;}

HTML
       <div id="wSpc">半角スペースで 区切られた 単語間の 空白の間隔。</div>
半角スペースで 区切られた 単語間の 空白の間隔。
javascript 構文
object.style.wordSpacing="10px";
   CSSでは word-spacing ですが wordSpacing と書きます。

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
画像を横に隙間なく並べる。
テーブル
text-align プロパティ
vertical-alignプロパティ 画像と横のテキストを縦方向で中央揃え
borderプロパティ
paddingプロパティ ボックスの内側の余白
カラーコード 色見本



タグ:word-spacing
posted by javaScript at 18:50 | 大阪 ☁ | 文字、文字列 | このブログの読者になる | 更新情報をチェックする
×

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