GT-ONE 楽天タグ講座 パイプ奮闘記

  

おもしろタグ教室【色々なスクロール】




【色々なスクロール VOL.4】



    【はじめに】

    【初心者のためのHP の飾りつけ教室】 とは別に、余談のページを作ってみました。
    ここではちょ っと変わったタグや、趣向を紹介していきましょう。



    今回もスクロールのタグ 「MARQUEE」 を、もう少 しやって行きましょう。

    前回同様、「テーブル」の中で、 「MARQUEE」 を 動かして見ますが、基本的な属性に付いても、
    述べて行きたいと思います。

    【色々なスクロールVOL.3】では、左右に文字や画像を行ったり来たりさせて見ました。
    今度は、上下に行ったり来たりする 「MARQUEE」 をやって見ましょう。

    まずは、文字を上下に行ったり来たりさせて見ます。


    上下に文字を行ったり来た りさせます。

    ↑これが、基本の「MARQUEE」です。これのタグを書いて 見ましょう。


    <MARQUEE direction=up behavior=alternate> 上下に文字を行ったり来たり させます。 </MARQUEE>

    これが基本のタグです。
    行ったり来たりさせるための、 属性を指定するタグが「behavior=alternate」です。
    上下させるための、属性を指定 するタグが「direction=up」です。
    「MARQUEE」 「幅」「高さ」「速度」 の属性は、指定してお りません。「MARQUEE]の「幅」は、
    指定しなければ、端から端まで表示され ます。
    「速度」も指定しなければ、前にも述べましたとおり、1~20段階の6のス ピードになります。

    基本のタグの他に「MARQUEE」の範囲が判りやすいように 、「MARQUEE」の背景を指定するタグ、「bgcolor=red」を入れてあります。
    背景を指定しませんと、↓下のように、背景が透過して出ます。


    あとはお好きに、動かす文字の「FONT」を変えますと、このようになります。

    上下に文字を行ったり来たりさせます。

    「FONT」の属性の指定はちなみにこのように、しました。
    <FONT SIZE="5" COLOR="yellow" FACE="HG創英角ポップ体"> 上下に文字を行っ たり来たりさせます。 </FONT>

    では、この 「M ARQUEE」 を「テーブル」の中に入れて、属性を持たして見ましょう。




    上下に文字を行ったり来たりさせま す。

    みなさん今年もよろしく!



    どうでしょうか!「テーブル」の中で 「MARQUEE」 「幅」「高さ」「速度」 を指定して見ました。
    では、このサンプルのタグを書いて見ましょう。



    <table border=4 cellSpacing=5 bgcolor=pink width=65%><td> <MARQUEE direction=up behavior=alternate scrollAmount=6 bgcolor=blue> <FONT SIZE="5" COLOR="yellow" FACE="HG創英角ポップ体">上下 に文字を行ったり来たりさせます。<P>みなさん今年もよろしく! </FONT> </MARQUEE></td></table>


    「TABLE」「MARQUEE」 の「属性」のタグの 説明をしておきます。

    <table border=" ~テーブルの枠の幅~ " cellSpacing=" ~テーブルの縁の幅~ " bgcolor=" ~テーブルの縁の色~ "width=" ~テー ブルの幅~ "><td><MARQUEE direction=up behavior=alternate scrollAmount=" ~スクロールの速度~(1~20) " bgcolor=" ~背景の色~ "> ~スクロールさせた い"文字"と"属性"のタグ~(画像) </MARQUEE></td></table>


    判りましたでしょうか。「属性」の数値を色々変えて、自分独自の 「MARQUEE] を造って見てください。
    私は、テーブ ルの中で色々やったほうが見栄えがいいと思います。

    では、画像を上下に「スクロー ル」させてみましょう。

    これの、雛形のタグを下に乗っけて置きますので、参考にしてください。


    <table border=4 cellSpacing=5 bgcolor=pink><td bgcolor=black> <MARQUEE behavior=alternate bgcolor=black direction=up height=400 width=200> <center><IMG SRC="http://plaza.rakuten.co.jp/img/user/65/14/1286514/19.jpg" width="135" height="92"><P> <IMG SRC="http://plaza.rakuten.co.jp/img/user/65/14/1286514/19.jpg" width="135" height="92"></center> </MARQUEE></td></table>

    ここでの注意点は 「MAR QUEE] の「高さ」「幅」は、自由に変えられますが、動かす画像が、左に寄 ってしまいます。そういう時は、センターリングのタグ【<CENTER>~画像~ </CENTER>】で、画像をはさんで上げますと、真ん中に来ますよ。
    この、雛形 のタグには、すでにセンターリングのタグが入れてあります。





    では今回は、もう少しやって見ましょう。

    【色々なスクロールVOL.3】 でやった、 「MARQUEE」 と今回の 「MARQUEE」 を結合しますと、
    ↓下のようになりま す。(*^_^*)


    文字をランダムに動かして見ます
    同じように画像も出来ますよ


    ここでも、 「MARQUEE」 が判りやすいように、背 景を表示していますが、何も指定しなければ、背景が透過します。

    では、基本のタグ を書いて見ます。


    <MARQUEE behavior=alternate direction=up bgcolor=red><MARQUEE behavior=alternate> 文字をランダムに動かして見ます <BR>同じように画像も出来ますよ </MARQUEE></MARQUEE>


    では、「テーブル」の中に、この 「MARQUEE」 を 入れて見ましょう。

    まずは、文字をテーブルの中で動かして見ます。

    上下に文 字を行ったり来たりさせます。

    みなさん今年もよろしく!



    この雛形のタグは、↓こうなります。


    <table border=4 cellSpacing=5 bgcolor=pink width=90%><td> <MARQUEE direction=up behavior=alternate scrollAmount=6 bgcolor=blue><MARQUEE behavior=alternate> <FONT SIZE="5" COLOR="yellow" FACE="HG創英角ポップ体">上下に文字を行ったり来たりさせ ます。<P>みなさん今年もよろしく! </FONT> </MARQUEE></MARQUEE></td></table>



    次に、画像をテーブルの中で動かして見ます。



    この雛形のタグは、↓こうなります。


    <table border=4 cellSpacing=5 bgcolor=pink width=60%><td> <MARQUEE direction=up behavior=alternate scrollAmount=6 bgcolor=blue><MARQUEE behavior=alternate> <IMG SRC="http://plaza.rakuten.co.jp/img/user/65/14/1286514/19.jpg" width="135" height="92"> </MARQUEE></MARQUEE></td></table>





★ではみなさんがんばってください。★
ご 質問、ご感想は掲示板か私書箱にどうぞ!
よく御存じの方は読まないで下さいね。( *^_^*)




おもしろタグ教 室【MENU】 にもどる。







© Rakuten Group, Inc.
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: