ウェブページの HTML コード: スクロールテキストの作成

このセクションでは、Web ページ内のテキストをスクロールしたり、スクロールプロパティを制御できる HTML コードの特殊なタグについて説明します。
スクロールテキストの作成この章のこれまでの学習を通じて、読者はさまざまな段落テキストの表示を非常にうまく制御できるようになりましたが、どのように設定しても、テキストは静的です。このセクションでは、Web ページ内のテキストをスクロールしたり、スクロールプロパティを制御できる HTML コードの特殊なタグについて説明します。
4.3.1 テキストスクロールの設定
HTML 技術でテキストをスクロールさせる方法は、二重タグ <marquee></marquee> を使用することです。 HTML コードでは、影響を受ける領域のテキストをスクロールできます。デフォルトでは、右から左に円形にスクロールします。 D:\web\ ディレクトリに Web ページファイルを作成し、mar.htm という名前を付けて、コード 4.15 に示すようにコードを記述します。

コード 4.15 テキストスクロール設定: mar.htm

<html>
<ヘッド>
<title>テキストスクロール設定</title>
</head>
<本文>

テキストスクロールの例 (デフォルト): <marquee>親切に</marquee>

</本文>
</html>
ブラウザのアドレスバーに http://localhost/mar.htm と入力すると、図 4.15 のようなブラウジング効果が表示されます。

図 4.15 テキストスクロールのデフォルト形式の設定図 4.15 からわかるように、幅が設定されていない場合、<marquee></marquee> タグは 1 行を占めます。
4.3.2 テキストのスクロール方向を設定する
<marquee></marquee> タグの direction 属性は、コンテンツのスクロール方向を設定するために使用されます。属性値は left、right、up、down で、それぞれ左、右、上、下を表します。たとえば、次のコード:
<marquee direction="left">親切な人になりましょう</marquee>
<marquee direction="right">優しい人になりましょう</marquee>
<marquee direction="up">親切な人になりましょう</marquee>
<marquee direction="down">親切な人になりましょう</marquee>
4.3.3 テキストスクロールの速度と形式を設定する テキストスクロールを設定するには、<marquee></marquee> タグを使用します。そのプロパティは次のとおりです。
— <marquee></marquee> タグの scrollamount 属性は、コンテンツのスクロール速度を設定するために使用されます。
— <marquee></marquee> タグの behavior 属性は、コンテンツのスクロールモードを設定するために使用されます。デフォルト値は scroll で、これは円形スクロールを意味します。値が alternate の場合、コンテンツはループ内で前後にスクロールします。値が slide の場合、コンテンツは 1 回スクロールして、ループせずに停止します。スクロールループの数を設定するループ属性もあり、デフォルトでは無制限になっています。
— <marquee></marquee> タグの scrolldelay 属性は、コンテンツのスクロールの時間間隔を設定するために使用されます。
— <marquee></marquee> タグの bgcolor 属性は、コンテンツのスクロール背景色を設定するために使用されます (本文の背景色設定と同様)。
— <marquee></marquee> タグの width 属性は、コンテンツのスクロール背景の幅を設定するために使用されます。
— <marquee></marquee> タグの height 属性は、コンテンツのスクロール背景の高さを設定するために使用されます。
mar.htm Web ページファイルを変更し、コード 4.16 に示すようにコードを記述します。

コード 4.16 テキストスクロール設定: mar.htm

<html>
<ヘッド>
<title>テキストスクロール設定</title>
</head>
<本文>

テキストスクロールの例 (デフォルト): <marquee>親切に</marquee>
テキストスクロールの例 (右): <marquee direction="right" scrolldelay="500">Be kind</marquee>
テキストのスクロールの例 (下方向、スクロールモードはスライド、速度は 10): <marquee scrollamount="10" behavior="slide">Be kind</marquee>
テキストのスクロールの例 (デフォルトの方向、スクロールモードは交互、ループは 3 回、速度は 2): <marquee scrollamount="2" behavior="alternate" loop="3">Be kind</marquee>
テキストスクロールの例 (上方向、背景色は #CCFF66、背景の幅と高さは設定されています): <marquee direction="up" bgcolor="#CCFF66" width="250" height="55">Be kind</marquee>

</本文>
</html>
ブラウザのアドレスバーに http://localhost/mar.htm と入力すると、図 4.16 のようなブラウジング効果が表示されます。