4.テストパターン作成(エディタで編集する)

SiTest搭載のエディタを用いてテストパターンを作成できます。
編集したい要素をクリックすると右側に編集メニューが表示されます。


①複数のテストパターンから確認、編集するパターンを選択できます。
②1つ前の要素や、1つ上位の要素を選択できます。
③バーをクリックするとプレビューのサイズが変化し、様々なデバイスでの表示を確認できます。
④選択した要素が強調されます。
⑤編集メニュー

編集項目の一覧

項目名 詳細 編集可能な要素
テキストを編集する 選択した要素のテキストを編集することができます 画像以外のすべての要素
スタイルを編集する 選択した要素のCSSスタイルを編集することができます すべての要素
リンクを作成する 選択した要素にリンクを挿入することができます。 すべての要素
位置・サイズを変更する 選択した要素の移動・大きさの変更をすることができます すべての要素
隠す 選択した要素を隠すことができます。 すべての要素
htmlを挿入する 選択した要素の後にhtmlを挿入することができます。 すべての要素
テキストを挿入する 選択した要素の後にテキストを挿入することができます。 すべての要素
画像を挿入する 選択した要素の後ろに画像を挿入することができます。 すべての要素
htmlを編集する 選択した要素のhtmlを編集することができます すべての要素
アニメーションを編集する 選択した要素にアニメーションを追加することが出来ます。 すべての要素

アニメーションの種類

  • 点滅する
  • 横に震える
  • 縦に震える
  • 振り子
  • 拡大縮小
  • 回転
  • 突然回転する
  • 左からスライドイン
  • 右からスライドイン
  • 上から降りる
  • 下から登る
  • スケールイン(拡大)
  • スケールイン(縮小)
  • ホイールイン
  • スピンイン

アニメーションには繰り返しの回数、アニメーションに掛ける時間、開始条件を設定することもできます。

アニメーションの開始条件

条件
ページ読み込み ページが読み込まれた時開始します。
クリック アニメーションする要素をクリックした時開始します。
ホバー アニメーションする要素にマウスカーソルが乗った時に開始します。
スクロール アニメーションする要素までスクロールした時に開始します。