Ｑ． 表示サイズの縦と横の比率を無視して、
縦横のサイズを変えるとどうなるの？
Ａ．
例えば、縦を半分、横を２倍にすると、
縦を２倍、横を半分にすると、
こんな感じで、狭い方の幅に合わせて、マクは表示されます。
マクパペットは、Flashで作られているので、
拡大しても、表示が劣化しません。Flashの利点ですね★
消す ｏｒ 隠して表示できないかな？
Ａ．
試してみたゾイ。
ＣＳＳのｃｌｉｐ（※要素の一部を切り抜く）を使って、消してみる方法じゃ。
※ＣＳＳ＝cascading style sheets
HTML において、レイアウトに関するタグを定義しスタイル-シートとして組み込むための規格。 Ｂｙ大辞林
これは、やや設定が難しい。中級者向けだと言えよう。
【ＣＳＳでｃｌｉｐプロパティを使い、余白を表示させない】
上のマクパペットのタグ 幅を２００ｐｘに変更したもの
<script type="text/javascript" src="http://maku.jp/maku.php?width=200;anim=sleep;"></script>
まず、適応させたいページのＣＳＳに、以下の文字列を書き込む。
.exp1 {
position: absolute;
clip: rect(auto,auto,auto,100px);
}
※ ｅｘｐ１の文字と、clip中の１００ｐｘの値は、変更可。
次に、マクパペットのタグを囲む形で、先ほどのクラス要素を含んだｓｐａｎタグを書き込む。
※span以外のタグでも可。ｄｉｖ、ｐ タグ等でもＯＫ。
<span class="exp1"><script type="text/javascript" src="http://maku.jp/maku.php?width=200;anim=sleep;"></script></span>
すると、
このように、左側の余白１００ｐｘ分が表示されなくなる。
しかし、表示されないだけで、見えない幅は存在する。
（というより、不可視の枠がある）
タグの直前に文字を入れてみると、
●●●
このように、消えたわけではない事がわかる。
今度は、これを調節して、消えたように見せる方法をやってみたゾイ。
属性に位置指定おいて、
左側からパーセンテージで表示位置を指定するんじゃ。
【ＣＳＳでｃｌｉｐプロパティを使い、余白を消したように表示】
ＣＳＳに、以下の内容を書き込む。
.exp2 {
position: absolute;
left: ■%;
clip: rect(auto,auto,auto,100px);
}
※ ｅｘｐ２の文字と、clip中の１００ｐｘの値は、変更可。
■には、適当な数字を入力。
このページでは、30％で入力しています。
次に、先ほどと同様、マクパペットのタグを囲む形で、ｓｐａｎタグを書き込む。
※span以外のタグでも可。ｄｉｖ、ｐ タグ等でもＯＫ。
<span class="exp2"><script type="text/javascript" src="http://maku.jp/maku.php?width=200;anim=sleep;"></script></span>
すると、
位置を％ではなく、ピクセル指定にすると……
【左から300px】
ピクセル指定にすると、ブラウザのウィンドウサイズを変更した際、
妙な位置にずれてしまうことがある。
これは、positionプロパティの値absoluteが、親要素に対して、
絶対的に配置するため。
各ＨＴＭＬの設定によって変わるので、位置は自分で調整してみよう！
……と、まぁ、わかり難しい方法じゃ。
少々、ややこしい方法じゃな。
ということで、実験は以上です。
もしかしたら、もっと簡単で、いい表示方法があるかと思います。
もし、良い方法を見つけたら、ぜひ教えてください！
当研究所で、ご紹介させて頂きます！