スクロール・マーキーは、ウェブサイトに追加されたテキストを移動させるものですが、HTMLはもはやこの機能には一般的に使用されておらず、推奨されていません。スクロールマーキーのためのHTMLタグは、標準HTMLライブラリから削除されました。HTMLでスクロールマーキーを実現するには、現在のところCSSを使うのがベストです。この2つの言語は、現代のウェブサイトデザインにおいてシームレスに統合されているからです。
CSSを使う
-
Macをお使いの場合は、.NETの最新バージョンをダウンロードしてください。 マーキーを作成できるCSSモジュールはwebkit仕様の一部なので、お使いのマシンにwebkitをインストールする必要があります。
-
Windowsをお使いの場合は、開発者ツールセットをダウンロードしてください。Mac とは異なり、Windows には自己解凍型のインストーラはありません。Windows ユーザーが webkit を使用するには、多くの開発者ツールをインストールする必要があります。必要なツールや仕様はすべて
-
HTMLファイルにCSS参照を追加します。HTML ファイルを開き、次のコードで CSS スタイルシートを参照してください:
.
を参照してください。- CSSファイルを作成する前にCSS参照を記述することもできますが、CSSファイル名がコード内のファイル名(この例では "mystyle.css")と一致していることを確認する必要があります。
- HTMLコードとCSSコードは分離されたままですが、HTMLファイルを読み込むときに一緒に実行されます。
-
HTMLファイルに「div」行を作成します。コードは次のようになります:スクロールテキストはここにあります。
- divはHTML要素で、コードの構成要素(この場合はスクロールマーキー)を含むページ上の領域を定義します。
HTMLファイルを保存します。「ファイル > 名前を付けて保存... "に移動します。HTMLファイルの拡張子を.htmlにします。CSSスタイル・シート用に別のテキスト・ドキュメントを開きます。CSSでスクロール・マーキーを作成するための省略構文は:"-webkit-marquee:[direction] [increment] [repetition] [style] [speed]" です。webkitタグが必要なのは、マーキークラスを含むCSSモジュールがWebkit CSS仕様の一部だからです。- [direction] は、マーキーがどの方向にスクロールするかを定義します。
- [increment] は、スクロールの各ステップ間のピクセル距離を測定します。
- [repetition] はマーキーが実行される回数です。
- [style]はシンプルなスクロールかバウンステキストかを指定します。
- [speed] はテキストが動く速さです。
マーキーを定義する値を設定します。括弧内の値を設定します(括弧は単なるプレースホルダーなので削除してください)。これで、マーキーがページ上でどのように動作するかを指定できます。コードは次のようになります:
.-webkit-marquee: auto medium infinite scroll normal;- auto'方向はデフォルトの右から左を使用し、'medium'はデフォルトの間隔を6ピクセルに設定し、'infinite'はマーキーの実行回数を無制限に設定し、'scroll'はスタイルを直線的な動きに設定し、'normal'はスクロール速度のデフォルト設定です。
新しい行に'overflow'を設定する。.overflow-x: -webkit-marquee;をコードの改行に追加します。こうすることで、テキストがdivの端で止まるのではなく、連続的にスクロールするようになります。- 'overflow-x'は、x軸上のスペースの限界を超えたテキストをどうするかを指定します。
- '-webkit-marquee' は、overflow コマンドを webkit の marquee モジュールに向けます。
- 完全なコードは次のようになります:
.-webkit-marquee: auto medium infinite scroll normal;
overflow-x: -webkit-marquee;
CSSファイルを保存します。「ファイル>名前を付けて保存...」に進みます。CSSファイルの拡張子を.cssにしてください。HTMLファイルをブラウザで開きます。ファイルをブラウザにドラッグ&ドロップして開きます。ページにスクロールマーキーが表示されます。- ChromeやSafariなど、webkitに対応しているブラウザを使用して、マーキーが期待通りに表示されることを確認してください。
HTMLを使う
-
HTMLドキュメントを開きます。HTMLのマーキータグを使うのは時代遅れで、ウェブデザインでは強く推奨されていません。HTMLファイルはシンプルなテキストエディタで開くことができます:
- .。
-
背景色を設定します。マーキーの背景色は、"background-color:" の後に16進数かRGB(Red Green Blue)で指定します。サンプルコードに記載されているデフォルト値#000080は紺色です。
- 例えば
.のようになります。 - 色とその値の完全なリストは、オンラインで見つけることができます。
- 例えば
-
スクロールの方向を設定します。コード内の "direction "属性を、right、left、up、downのいずれかに変更してください。
- 例えば
.
- 例えば
-
マーキーのループ数を指定します。loop "属性は、マーキーが何回ループするかを制御します。連続的に実行したい場合は、この属性を完全に省略します。
- 属性を省略した例は次のようになります:
.。
- 属性を省略した例は次のようになります:
-
マーキーのテキストを指定します。タグの中のテキストが、マーキーのスクロールテキストになります。ここにマーキーのテキストを記述します。
- 例えば
.。
- 例えば
-
HTMLファイルを読み込みます。ファイルをブラウザにドラッグ&ドロップして開きます。スクロールするマーキーがページに表示されます。
シェアボタン: このページをSNSに投稿するのに便利です。
コメント
最新を表示する
NG表示方式
NGID一覧