インタラクティブなHTMLタイムラインを作成する方法

著者: Sharon Miller
作成日: 22 1月 2021
更新日: 16 5月 2024
Anonim
Storyline360でのインタラクティブビデオの作成方法
ビデオ: Storyline360でのインタラクティブビデオの作成方法

コンテンツ

タイムラインは、イベントのリストをWebページに表示するのに便利な方法です。インタラクティブなタイムラインにより、ユーザーはコンテンツビューを制御できます。インタラクティブなタイムラインを作成するには多くの方法がありますが、HTML以外にも多くのものが必要です。ただし、非常にシンプルなHTMLソリューションがあります。HTMLの「style」属性を使用して、タイムラインにインタラクティブなスクロールバーを作成できます。これにより、ユーザーはコンテンツを自由に移動できます。

ステップ1

HTMLファイルを作成します。テキストエディタで新しいドキュメントを開き、基本的なHTMLページを作成します。このコードをHTMLの「body」セクションに追加します。

仕切り( "div")は、タイムライン内のイベントのリストのコンテナーです。 「オーバーフロー」の「自動」値は、タイムラインがコンテナーよりも長い場合や幅が広い場合に、インタラクティブなスクロールバーを追加します。ページを「timeline.html」として保存します。


ステップ2

コンテンツを作成します。 「div」タグの間のスペースに、イベントをタイムラインに昇順または降順で追加します。各イベントを独自の整形式HTMLセクションに追加します。作業中にページを継続的に保存します。

ステップ3

HTMLコードをテストします。コンピューターのWebブラウザーでファイル「timeline.html」を開きます。コンテンツが「div」コンテナより大きい場合は、インタラクティブなスクロールバーが表示されます。コンテナの「幅」と「高さ」の値を調整して、垂直または水平のストロークに合わせます。