KARTE ActionでCSSを書く際に注意すべき５つのこと
KARTE Actionで実装を行う際は、UIを美しく表示させることに加え、さまざまなブラウザや端末において表示崩れが発生しないようにすることも非常に重要です。
そのため、CSSを記述する際には、いくつかの注意点を押さえる必要があります。以下に、特に注意すべき5つのポイントを解説します。
① 必要なプロパティのリセットを行う
KARTEは既存サイト上に新しいDOM要素を生成して表示するため、ページごとに異なるスタイルが影響する可能性があります。たとえば、同じアクションでもページによって表示が変わってしまうことがよくあります。
そのため、意図しないスタイルの継承やブラウザのデフォルトスタイルによる影響を防ぐために、スタイルのリセットを行いましょう。
以下のような基本的なスタイルは、表示に大きな影響を与えるため、最初にリセットしておくことを推奨します。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: inherit;
}
img {
display: block;
max-width: 100%;
height: auto;
}② 改行の制御を忘れずに
テキストやレイアウトが想定外の位置で改行されないよう、word-break や white-space などのプロパティで適切に制御することが大切です。
テキストが意図しない場所で改行されると、見た目の崩れや読みづらさが生じ、ユーザー体験が低下します。特にスマートフォンなどの小さい画面ではこの問題が起こりやすいです。
例：
「都道府県を選択する」
→ 小さい画面で
「都道府県を選
択する」
と表示される可能性があります。
このような場合、white-spaceやword-breakを適切に使ってテキストの改行を制御しましょう。
<p style="white-space: nowrap;">都道府県を選択する</p>
<p><span style="white-space: nowrap;">都道府県</span>を選択する</p>他にも、以下のようなプロパティも考慮し、必要に応じて使用してみましょう。
word-break: keep-all;
white-space: pre-line;③ 対象要素の特定するには深すぎる階層指定を避ける
セレクタで深い階層を指定すると、保守性が低下したり、DOM構造が変わる等の意図しない影響が発生したりする可能性があります。できる限りシンプルかつ明確な指定を心がけましょう。
✖ 悪い例
body > div > div p:nth-child(2) > a > span:first-child✔ 良い例
一意のクラス名を使うか、データ属性やテキストの情報で特定する
.product-wrapper .product-detail-highlight④ アクションIDを含むクラス名の使用を禁止
アクションIDは変更される可能性があるため、CSSに直接使用することは避けましょう。
KARTE Actionでは、アクションごとにユニークなID（例：bt5x）が自動生成されます。しかし、クラス名としてそのままCSSに直接使用することは避けましょう。
なぜなら、アクションの作り直しや移行等でIDは変更されるため、CSSが効かなくなるリスクがあるからです。
✖ 悪い例
<div class="product-bt5x">...</div>✔ 良い例
<div class="product-pattern-a">...</div>⑤ クラス名は分かりやすく命名する
クラス名は、要素の役割や内容が一目でわかるように付けましょう。読みやすく、再利用しやすく、チーム開発でもスムーズにやり取りできます。
✖ 悪い例
<div class="product-merit-red">...</div>
<img class="product-merit-img-1">✔ 良い例
<div class="product-merit-note">...</div>
<img class="product-merit-example-img">■ まとめ
KARTE Actionで安定したUI/UXを提供するためには、CSSの扱いが非常に重要です。
今回ご紹介した5つのポイントを、ぜひ日々の開発に取り入れて、アクションの品質向上に役立ててみてください。
KARTE活用・AI活用でお悩みの方へ
当社では、KARTEの導入支援から施策の企画・実行・改善までを一貫してご支援しています。
CX設計の専門チームが、貴社に合った施策をご提案しますので、お気軽にご相談ください。
▶ KARTE導入・運用支援サービス
