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

色んなスクロール3

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




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



    【はじめに】

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



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

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

    前回、前々回は、「左右のスクロール」「上下のスクロール」をやって見ました。
    どちらか一方方向へのスクロールでしたね。今度は、行ったり来たりする 「MARQUEE」 をやって見ましょう。

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


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

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


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

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

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

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

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

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




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


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


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



    <table border=4 cellSpacing=5 bgcolor=pink width=60%><td> <MARQUEE behavior=alternate scrollAmount=6 bgcolor=blue> 文字を行ったり<BR>来たりさせます。 </MARQUEE></td></table>


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

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


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

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

    F-1001

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


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

    ここでの注意点は画像の「高さ」と、 「MARQUEE] の「高さ」をそろえる事です。



★ではみなさんがんばってください。★
よく御存じの方は読まないで下さいね。(*^_^*)




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







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