実際と少し異なる場合があります。
横幅
実際と少し異なる場合があります。
ポイント:
要素の幅を設定します。min/max併用でレイアウトの安定性を高められます。
この設定で変わること:
文言長さが変動する運用では特に重要です。
調整のコツ:
min-widthを先に決めてからwidth/max-widthを調整すると破綻しにくくなります。
設定項目
Use width: 幅設定の有効/無効を切り替え、必要な場合のみ固定します。Width+ 単位（px / % / vw / vh / fit-content）: 幅と単位を設定し、コンテンツ量に応じた広がりを調整します。Use min width/Min Width+ 単位: 最小幅を設定し、短文時の潰れを防ぎます。Use max width/Max Width+ 単位: 最大幅を設定し、長文時の過度な横伸びを防ぎます。レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。
単位に
fit-contentを選択すると、テキストの長さに合わせてボタン幅が自動で調整されます。%指定は親要素の幅に対する比率です。min/max を併用することで、極端な幅の変動を防ぎつつ柔軟なレイアウトを実現できます。
高さ
実際と少し異なる場合があります。
ポイント:
要素の高さを設定します。テキスト行数や装飾との整合を取る設定です。
この設定で変わること:
高さが不足すると窮屈に見え、過剰だと間延びします。
調整のコツ:
まず最小高さを決め、必要なときだけ固定高さを使うと柔軟性を確保できます。
設定項目
Use height: 高さ設定の有効/無効を切り替え、必要な場面でのみ固定します。Height+ 単位（px / % / vw / vh）: 高さと単位を設定し、要素の密度感を調整します。Use min height/Min Height+ 単位: 最小高さを設定し、タップしやすい領域を確保します。Use max height/Max Height+ 単位: 最大高さを設定し、間延びを防ぎます。レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。
高さを固定しすぎると、テキスト量が増えた場合にはみ出しが発生する可能性があります。固定高さが必要な場合は
min-heightを使い、コンテンツ量に応じて伸長できるようにしておくと安全です。タップ領域としては44px以上の高さが推奨されています（WCAG タッチターゲットガイドライン）。
overflow: hidden の影響:
ボタン本体・コンテンツ領域・サムネイル・バンド・背景はすべてoverflow: hiddenが適用されています。そのため、角丸設定に沿って内容がクリップされます。大きなシャドウや変形がはみ出す場合は、overflow: hiddenによって切り取られる点に注意してください（フレームアニメーションの neon-01 / glow-01 は例外的にoverflow: visibleに切り替わります）。
マージン
実際と少し異なる場合があります。
ポイント:
要素の外側余白を設定します。前後要素との距離を設計するための基本項目です。
この設定で変わること:
余白設計が整うと、情報のまとまりと視線誘導が改善します。
調整のコツ:
縦方向のルールを先に決めてから各ボタンへ適用すると、ページ全体が整います。
設定項目
Use Individual Settings: 一括値ではなく上下左右の個別値で詳細調整できるようにします。- 一括:
Margin+ 単位（px / % / vw / vh / auto）: 4方向へ同じ外側余白を適用し、間隔ルールを素早く揃えます。 - 個別:
Margin Top / Right / Bottom / Left+ 単位: 方向ごとに余白を調整し、前後要素との距離を最適化します。 レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。
autoを使用すると水平方向の中央揃えが可能です（例:Margin Left: auto+Margin Right: auto）。マージンの単位にvw/vhを使うとビューポートに対する相対指定になり、画面幅に応じた余白が自動調整されます。
パディング
実際と少し異なる場合があります。
ポイント:
要素の内側余白を設定します。テキストやアイコンの窮屈さを解消します。
この設定で変わること:
押しやすさ（タップ領域）にも直接影響します。
調整のコツ:
SPでは特に縦方向の余白不足が起きやすいので、PCより少し厚めを基準に調整してください。
設定項目
Use Individual Settings: 一括値ではなく上下左右の個別値で詳細調整できるようにします。- 一括:
Padding+ 単位（px / % / vw / vh）: 4方向へ同じ内側余白を適用し、ボタン密度を統一します。 - 個別:
Padding Top / Right / Bottom / Left+ 単位: 方向ごとに内側余白を調整し、文字とアイコンの詰まりを解消します。 レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。
ポジション
実際と少し異なる場合があります。
ポイント:
要素の配置位置を設定します。周辺要素との重なりや距離を制御できます。
この設定で変わること:
位置設定はレイアウト破綻の原因にもなるため影響範囲が広い項目です。
調整のコツ:
まず相対配置で成立させ、絶対配置は必要箇所だけに限定すると保守しやすくなります。
設定項目
Position Type（relative / absolute）: 配置基準を選択し、通常配置か絶対配置かを決定します。Top / Right / Bottom / Left（Auto / Value）+ 単位: 各方向オフセットを設定し、位置を細かく調整します。Z-Index（Auto / Value）: 重なり順を設定し、要素の前後関係を制御します。Transform Translate X / Y+ 単位: X/Y移動量を設定し、視覚位置を微調整します。レスポンシブ切り替え: デバイス別の個別設定を有効化し、表示崩れを防ぎます。
absoluteを選択すると、親要素（position: relativeが設定された最も近い祖先）を基準とした配置になります。他の要素のレイアウトに影響しなくなるため、重なりの演出に適していますが、レスポンシブ時のズレに注意が必要です。Transform Translateはpositionとは独立して動作し、要素の描画位置だけを移動させます。
レイヤー順序
実際と少し異なる場合があります。
ポイント:
各レイヤーの重なり順を設定します。背景・帯・サムネイル・コンテンツの前後関係を制御します。
この設定で変わること:
意図しない重なりで文字が隠れる問題を解消できます。
調整のコツ:
まずContentを最前面に固定し、装飾レイヤーをその下で整理するとトラブルを減らせます。
設定項目
Content: コンテンツレイヤーの重なり順を設定し、文字や主要情報を最前面に保ちます。Thumbnail: サムネイルレイヤーの重なり順を設定し、画像が文字を隠さないように調整します。Band: 帯レイヤーの重なり順を設定し、装飾帯の前後関係を制御します。Background: 背景レイヤーの重なり順を設定し、全体の土台として安定表示させます。
レイヤー順序は CSS の
z-indexで制御されます。数値が大きいほど前面に表示されます。デフォルト値は Background:0、Band:5、Thumbnail:10、Content:20です。意図しない重なりが発生した場合は、まずこの設定で順序を確認してください。
内部固定の z-index:
Content レイヤー内のアイコンはz-index: 25、テキストはz-index: 30で固定されています。インナーシャドウの::after疑似要素はz-index: 100、フレームアニメーションはz-index: 1001です。これらの値はレイヤー順序設定では変更できません。