HTMLでスクロールするマーキーの作り方

ページ名：HTMLでスクロールするマーキーの作り方

スクロール・マーキーは、ウェブサイトに追加されたテキストを移動させるものですが、HTMLはもはやこの機能には一般的に使用されておらず、推奨されていません。スクロールマーキーのためのHTMLタグは、標準HTMLライブラリから削除されました。HTMLでスクロールマーキーを実現するには、現在のところCSSを使うのがベストです。この2つの言語は、現代のウェブサイトデザインにおいてシームレスに統合されているからです。

方法1

CSSを使う

  1. Macをお使いの場合は、.NETの最新バージョンをダウンロードしてください。 マーキーを作成できるCSSモジュールはwebkit仕様の一部なので、お使いのマシンにwebkitをインストールする必要があります。
  2. Windowsをお使いの場合は、開発者ツールセットをダウンロードしてください。Mac とは異なり、Windows には自己解凍型のインストーラはありません。Windows ユーザーが webkit を使用するには、多くの開発者ツールをインストールする必要があります。必要なツールや仕様はすべて
  3. HTMLファイルにCSS参照を追加します。HTML ファイルを開き、次のコードで CSS スタイルシートを参照してください：
    .
    を参照してください。
    • CSSファイルを作成する前にCSS参照を記述することもできますが、CSSファイル名がコード内のファイル名（この例では "mystyle.css"）と一致していることを確認する必要があります。
    • HTMLコードとCSSコードは分離されたままですが、HTMLファイルを読み込むときに一緒に実行されます。
  4. HTMLファイルに「div」行を作成します。コードは次のようになります：
    スクロールテキストはここにあります。
    • divはHTML要素で、コードの構成要素（この場合はスクロールマーキー）を含むページ上の領域を定義します。
  5. HTMLファイルを保存します。「ファイル > 名前を付けて保存... "に移動します。HTMLファイルの拡張子を.htmlにします。
  6. CSSスタイル・シート用に別のテキスト・ドキュメントを開きます。CSSでスクロール・マーキーを作成するための省略構文は："-webkit-marquee：[direction] [increment] [repetition] [style] [speed]" です。webkitタグが必要なのは、マーキークラスを含むCSSモジュールがWebkit CSS仕様の一部だからです。
    • [direction] は、マーキーがどの方向にスクロールするかを定義します。
    • [increment] は、スクロールの各ステップ間のピクセル距離を測定します。
    • [repetition] はマーキーが実行される回数です。
    • [style]はシンプルなスクロールかバウンステキストかを指定します。
    • [speed] はテキストが動く速さです。
  7. マーキーを定義する値を設定します。括弧内の値を設定します（括弧は単なるプレースホルダーなので削除してください）。これで、マーキーがページ上でどのように動作するかを指定できます。コードは次のようになります：
    .-webkit-marquee: auto medium infinite scroll normal；
    • auto'方向はデフォルトの右から左を使用し、'medium'はデフォルトの間隔を6ピクセルに設定し、'infinite'はマーキーの実行回数を無制限に設定し、'scroll'はスタイルを直線的な動きに設定し、'normal'はスクロール速度のデフォルト設定です。
  8. 新しい行に'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；
  9. CSSファイルを保存します。「ファイル＞名前を付けて保存...」に進みます。CSSファイルの拡張子を.cssにしてください。
  10. HTMLファイルをブラウザで開きます。ファイルをブラウザにドラッグ＆ドロップして開きます。ページにスクロールマーキーが表示されます。
    • ChromeやSafariなど、webkitに対応しているブラウザを使用して、マーキーが期待通りに表示されることを確認してください。
方法2

HTMLを使う

  1. HTMLドキュメントを開きます。HTMLのマーキータグを使うのは時代遅れで、ウェブデザインでは強く推奨されていません。HTMLファイルはシンプルなテキストエディタで開くことができます：
    • .これはスクロールするマーキーです。
  2. 背景色を設定します。マーキーの背景色は、"background-color:" の後に16進数かRGB（Red Green Blue）で指定します。サンプルコードに記載されているデフォルト値#000080は紺色です。
    • 例えば
      .のようになります。
    • 色とその値の完全なリストは、オンラインで見つけることができます。
  3. スクロールの方向を設定します。コード内の "direction "属性を、right、left、up、downのいずれかに変更してください。
    • 例えば
      .のようにします。
    • マーキーのループ数を指定します。loop "属性は、マーキーが何回ループするかを制御します。連続的に実行したい場合は、この属性を完全に省略します。
      • 属性を省略した例は次のようになります：
        .これはスクロールするマーキーです。
    • マーキーのテキストを指定します。タグとタグの中のテキストが、マーキーのスクロールテキストになります。ここにマーキーのテキストを記述します。
      • 例えば
        .このテキストがスクロールするのを見よう！。
    • HTMLファイルを読み込みます。ファイルをブラウザにドラッグ＆ドロップして開きます。スクロールするマーキーがページに表示されます。
      • この記事は、CC BY-NC-SAで公開されている " How to Make a Scrolling Marquee in HTML " を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。

      シェアボタン： このページをSNSに投稿するのに便利です。

      コメント

      返信元（返信をやめる）

      ※ 悪質なユーザーの書き込みは制限します。
      最新を表示する
      NGIDの確認

      NG表示方式

      NGID一覧