SwipeKitで HTML / CSS を使用してCTAボタンを作成する場合、設定内容によってはプレビュー画面に表示されない、または位置調整ができない場合があります。
以下の点をご確認ください。

① HTMLで作成したボタンがプレビュー画面に表示されない

以下の設定によって、要素が非表示または表示範囲外に配置されている可能性があります。

確認ポイント

visibility の設定
```
visibility: hidden;
```
が設定されている場合、要素は表示されません。
position の設定
top / left / bottom / right の値が不適切な場合、要素が画面の表示範囲外に配置されることがあります。
margin の設定
余白の指定によって要素が画面外へ移動してしまう場合があります。
z-index の設定
他の要素より背面に配置されていると、ボタンが隠れて表示されないことがあります。
ブラウザのズーム設定
ブラウザの拡大・縮小（ズーム倍率）によって、レイアウトが崩れ表示位置がずれる場合があります。

② 既存のスタイルと競合して位置調整ができない

HTML / CSSでボタンを作成する場合、既存のページスタイル（CSS）と競合する可能性があります。

そのため、CSSを定義する際は ページ全体に影響する指定を避けることを推奨しています。

特定のHTMLタグに直接スタイルを指定すると、ページ全体に影響します。

例

body { ... }
input { ... }
div { ... }

このような指定は すべての要素に適用されてしまうため、レイアウト崩れの原因になることがあります。

また、BootstrapなどのCSSライブラリで一般的に使用されているクラス名も競合の原因になる場合があります。

例

.primary
.second

ユニークなクラス名を作成し、その要素のみにスタイルを適用する方法を推奨します。

例

<button class="your-site-name-id-button-1">CTAボタン</button>

.your-site-name-id-button-1 {
  /* ボタンのスタイル */
}

このように 固有のクラス名を使用することで、既存スタイルとの競合を防ぐことができます。

問題が解決しない場合は、使用している HTML / CSSコードをご共有の上、チャットにてお問い合わせください。