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

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


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

編集項目の一覧

項目名 詳細 編集可能な要素
テキストを編集する 選択した要素のテキストを編集することができます 画像以外のすべての要素
スタイルを編集する 選択した要素のCSSスタイルを編集することができます すべての要素
リンクを作成する 選択した要素にリンクを挿入することができます。 すべての要素
再配置する 選択した画像の要素(または画像の要素の上位の要素)を再配置先のHTML構造の規則に沿って配置して、どのテストパターンの反応が良いかを比較するテストを作成できます。 すべての要素
位置・サイズを変更する 選択した要素の移動・大きさの変更をすることができます すべての要素
隠す 選択した要素を隠すことができます。 すべての要素
htmlを挿入する 選択した要素の後にhtmlを挿入することができます。 すべての要素
テキストを挿入する 選択した要素の後にテキストを挿入することができます。 すべての要素
画像を挿入する 選択した要素の後ろに画像を挿入することができます。 すべての要素
htmlを編集する 選択した要素のhtmlを編集することができます すべての要素
アニメーションを編集する 選択した要素にアニメーションを追加することが出来ます。 すべての要素

アニメーションの種類

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

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

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

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