CSS スタイルの適用

クイックスタートおよび「ヘッダーの追加」の例に基づき、CSS スタイルを使用してヘッダーの外観を変更できます。

HTML ファイルの <body> セクションで、マークアップを次のマークアップに置き換えます。これは、各ページにヘッダーを追加します。

ドロップダウンからマークアップをコピーして、<body> セクション内に貼り付けます

マークアップ	コードのコピー
<div id="wizard1"> <ol> <li><h1>Header 1</h1></li> <li><h1>Header 2</h1></li> <li><h1>Header 3</h1></li> </ol> <div>Page 1 content</div> <div>Page 2 content</div> <div>Page 3 content</div> </div>

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトの上に次のスタイルセクションを追加します。これは、ヘッダー、戻るボタン、次へボタンの色とスタイルを変更します。

ドロップダウンからスタイルをコピーして、<head> セクション内に貼り付けます

スクリプトを変更する必要はありません。ウィザードを作成するには、基本スクリプトで十分です。
HTML ファイルを保存し、それをブラウザで開きます。実際のウィジェットは次のように表示され、ヘッダー、ボタンのテキスト、背景色に CSS スタイルが適用されます。

関連トピック