HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG
Click Here!

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |1234567891011121314151617|  次へ>>

★今すぐ仕事に結びつく稼げる資格!スキルアップガイド無料進呈中 Click Here![PR]

● 動きのあるスタイル

ウェブページに動きを与えるためにJAVAScriptという機能があります。
このJAVAScriptをスタイルシートとして利用することで、動的装飾を行なうことができます。
ここにマウスを当ててみてください。
これはIE5.0で独自にサポートされたHTMLビヘイビアという機能で、 スクリプトを使用し要素に対して独自の動作を与え得るための機能です。

<SPAN style="behavior:url(sample.htc)">
ここにマウスを当ててみてください。
</SPAN>

ここでは、『sample.htc』という HTMLコンポーネントファイルに、以下のようなスクリプト記述し、 記事に対して独自の動作を与えました。
これをヘッダにclass分けして設定すれば、JAVAScriptをスタイルとして使用できます。

<script type="text/javascript">
<!--
attachEvent("onmouseover", Over);
attachEvent("onmouseout", Out);
function Over(){
this.style.cursor="crosshair";
this.style.color="red";
this.style.fontWeight="bold";
this.style.fontSize = "1.5em";
}
function Out(){
this.style.cursor="";
this.style.color="gray";
this.style.fontWeight="";
this.style.fontSize = "";
}
-->
</script>

※attachEvent("イベントハンドラ名",関数名);で、イベントと実行する関数を関連づけています。

これは純粋にJavaScriptを用いても行なえます。 以下の記述で外部スクリプトシートを読込む事で、各HTMLページでスクリプトを共有する事は可能です。 しかし、どちらが記述的に楽かは一目瞭然だと思います。
この機能により、手軽に要素に対して動的な装飾や、独自の動作をさせる事が可能になるでしょう。

ここにマウスを当ててみてください。

<SPAN id="sample" onmouseover="Over()" onmouseout="Out()">
ここにマウスを当ててみてください。
</SPAN><BR>

TIMEの利用

この辺は、DynamicHTML(HTMLの拡張仕様)の領域になるのでしょうね。
IE5からHTMLに時間的な動的機能HTML+TIME(Timed Interactive Multimedia Extensions)が使用できます。
これにより、スクリプトを記述することなくHTMLで時間による制御ができます。 (もちろん、ブラウザ依存なのでIE5.5で閲覧するというのが前提になります。)
まず、準備として、(無くても大丈夫なようですが・・・)
HTML要素に『xmlns:t="urn:schemas-microsoft-com:time"』という記述をします。
ヘッダ部に『<?IMPORT namespace="t" implementation="#default#time2">』の一行を書き加えます。

段落P要素等に以下の属性を利用して、必要な設定を行ないます。
t:beginは表示が開始される秒数を設定(ただし、t:timeline="seq/par"の設定に依存)
t:durは表示している秒数を設定
t:repeatは表示回数を設定(indefiniteを設定すれば無限になります)
t:timelineseqparの二つの設定があり、
seqは1つの子要素が表示が終了してから次の子要素の表示が開始されます。 この場合、t:beginは前の表示が終了してから開始されるまでの秒数になります。
parは子要素の表示がバラバラに開始されます。 t:beginはページが表示されてから開始されるまでの秒数となります。
t:timeactionは表示/非表示時の動作。
visibilityでは単に非表示になるだけなので位置関係が維持されます(初期値です)。
displayでは非表示の時にはそのオブジェクトの存在を消し、次に表示されるオブジェクトは同じ位置に表示されます。
下にサンプルを載せておきます。本当はもっと立派な使い方があるのでしょうが・・・。

!!

かわだ亭 本日OPEN!!

<STYLE type=text/css>
<!--
.time{behavior:url(#default#time);}
-->
</STYLE>
<DIV class="time cen" t:repeat="indefinite" t:dur="15" t:timeline="par" style="font-size:2.5em">
<P class="time" t:begin="0" t:dur="0.3" t:timeaction="display">か</P>
<P class="time" t:begin="0.3" t:dur="0.3" t:timeaction="display">わ</P>
<P class="time" t:begin="0.6" t:dur="0.3" t:timeaction="display">だ</P>
<P class="time" t:begin="0.9" t:dur="0.3" t:timeaction="display">亭</P>
<P class="time" t:begin="1.2" t:dur="0.3" t:timeaction="display">本</P>
<P class="time" t:begin="1.5" t:dur="0.3" t:timeaction="display">日</P>
<P class="time" t:begin="1.8" t:dur="0.3" t:timeaction="display">O</P>
<P class="time" t:begin="2.1" t:dur="0.3" t:timeaction="display">P</P>
<P class="time" t:begin="2.4" t:dur="0.3" t:timeaction="display">E</P>
<P class="time" t:begin="2.7" t:dur="0.3" t:timeaction="display">N</P>
<P class="time" t:begin="3.0" t:dur="0.3" t:timeaction="display">!!</P>
<P class="time" t:begin="3.3" t:dur="10">かわだ亭 本日OPEN!!</P>
</DIV>

<<前へ  |上へ|  次へ>>
1234567891011121314151617

中古スマホ・ガラケーなどのモバイル製品をお探しなら電脳プラザで!
 
常時2,000台以上の在庫を取り揃え!最短即日出荷に対応!

TOP] [HOME

更新日時:2014/08/09