■ベクトル記号の作成

◇ベクトルの基本形の作成◇
　右の例１のように文字の上に→を付けることを考えます．アルファベットには，右下の図のように背丈の低い文字・高い文字，ベースラインよりも下に来る文字があることに注意して，どの文字が来ても矢印の位置がおかしくないように調整します．(font-family により位置が変わりますので実際に確かめるのがいいでしょう．)
　一文字の場合と２点を結ぶベクトルの場合で分けない方がプログラムは簡単になります．
 例１　　

　　　
例１
･･･関数定義側･･･
function Vec1(shiki, haba)
{
 document.write('<span style="position:relative;">');  //current position の取得
 if(haba == null || haba == '')
      mojisuu = shiki.length;  //第2引数がなければ，文字数を自動計算する．
 else
      mojisuu = parseInt(haba);
for(kk = 0; kk < mojisuu; kk++)
    document.write('<span style="position:absolute; left:'+(kk * 8)+'px; top:1px;font-family:Comic Sans MS; font-size:8px; font-weight:medium;">─</span>');

document.write('<span style="position:absolute; left:'+(mojisuu*8 -2)+'px; top:-3px;font-family:Comic Sans MS; font-size:10px; font-weight:medium; ">&gt;</span>'); //&gt; は不等号の>のマーク，→でもよい

document.write('<span style="position:absolute; left:0px; top:2px; font-size:16px;font-family:Comic Sans MS; font-weight:medium;">'+ shiki +'</span>');

document.write('</span>'); //current position への復帰

for(kk = 0; kk < mojisuu; kk++)
    document.write('<span style="position:relative; visibility:hidden;font-size:16px;">w</span>');//文字送り調整
}
･･･関数呼び出し側･･･
<Script Language="JavaScript">Vec1('a');</Script>
◇添字付ベクトルの表示◇
例２
　右のような添字付のベクトルを表示します．
1　<sub>などの制御用のタグも shiki の引数として渡せます．その場合は，shiki の文字数は自動計算では合わなくなりますので，第２引数 haba に文字幅を入れます．
　添字は幅が小さ目なので，４文字でも３とした場合が右の例です．
２　下付文字：<sub>，上付き文字：<sup>のタグをそのまま使用すると右の例2-1のように添字がやや大き目になります．スタイルシートでその都度設定することもできますが，累乗の指数（上付き）も含めてしばしば利用しますので，まとめて定義しておくと，毎回同じ仕様で使えます．
<style>
.suffix
{position: relative;
font-size: 10px;
font-weight: medium;
font-family: "Comic Sans MS";
top: 6px;
left: 0px;
}
</style>		 例２-1　 … = = …

例２-２　 … == …　
右図２−２は，関数呼び出し側で

<Script Language="JavaScript">Vec1('P<span class="suffix">1</span>P<span class="suffix">2</span>',3);</Script>

とした例です．
◇font-familyの指定◇
　上の例１，例２では，日本語に対応していて a の字体が自然な Comic Sans MS を使っていますが，好みによってもっとスリムな字体にしたいことがあります．こうした要望に答えられるように，font-family を指定できるようにしたい．ただし，font-family を指定するときは大文字，小文字，スペースも完全に一致しなければならないので省略もできるようにしたい．
（各自のパソコンに指定されたfontがないと予想外のことが起こりますので，ごく一般的なものやファミリー[serif, cursiveなど]で指定する方が無難だといわれています．）		 例３　 … = = …
例３　･･･関数定義側･･･
function Vec2(shiki, haba, ffamily)
{
document.write('<span style="position:relative;">');

if(haba == null || haba == '')
   mojisuu = shiki.length;
else
   mojisuu = parseInt(haba);

if(ffamily == null || ffamily == '')
   ffamily2 = "Comic Sans MS";
else
   ffamily2 = ffamily;

for(kk = 0; kk < mojisuu; kk++)
   document.write('<span style="position:absolute; left:'+(kk * 8)+'px; top:1px;font-family:Comic Sans MS; font-size:8px; font-weight:medium;">─</span>');

document.write('<span style="position:absolute; left:'+(mojisuu*8 -2)+'px; top:-3px;font-family:Comic Sans MS; font-size:10px; font-weight:medium; ">&gt;</span>');

document.write('<span style="position:absolute; left:0px; top:2px; font-size:16px;font-family:' + ffamily2 + '; font-weight:medium;">'+ shiki +'</span>');

document.write('</span>');

for(kk = 0; kk < mojisuu; kk++)
   document.write('<span style="position:relative; visibility:hidden;font-size:16px;">w</span>');//文字送り調整
}
･･･関数呼び出し側･･･
<Script Language="JavaScript">Vec2('P<span class="suffix">1</span>P<span class="suffix">2</span>',3,'Times New Roman');</Script>
◇所要時間5分程度の問題◇
　物理学には，時間微分をドットで表わす記号があります．また，算数・数学では循環小数の循環節の繰り返される数の最初と最後の上にドットを付けます．この記号をつくって右のように表示してください．
(なお，白紙から書き始めるのでなく，上記の関数をコピーして能率よく行ってください．)
[ 答案例 ] 　　[　教材例　]
　　0.134　

注
　　　　

○メニューに戻る