.c-checkboxでチェックボックスを表示した際、テキスト(.c-checkbox__label)の位置がズレている

0
いいねをした人: 居ません
4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • 投稿者
    投稿
  • #48721
    Kmical Lights
    閲覧者
    234

    トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。

    【お使いの Snow Monkey のバージョン】v9.3.3
    【お使いのブラウザ】Safari
    【当該サイトのURL】(公開できる場合は書いていただいたほうがスムーズです)

    ===
    Snow Monkeyの場合だけではない気もしますが、
    チェックボックスを使う際にチェックするinput要素に対して、テキストとinput要素の間のマージンがない状態で下方向にズレたように表示されてしまっているようです。
    高さを揃えた中央値でマージンを取った形で美しく表示されるとありがたいです。

    0
    いいねをした人: 居ません
    #48746
    アバター画像キタジマ タカシ
    参加者
    2421

    Basis は「必要最小限のデフォルト CSS しか提供しない」という方針なので、マージンは付与していません。縦位置についてはデフォルトで中央揃えしても良いかもしれませんが、こちらもやるなら display: flex にすることになり、別の影響もありそうなので今はデフォルトでは提供していません。

    次の Snow Monkey のメジャーアップデートにあわせて Basis もメジャーアップデートするので、いっそのことフォーム周りの CSS は全面的に変更しても良いかなとは考えています。Snow Monkey Forms 用にゼロベースで書いたフォーム用 CSS を流用する形で…。

    0
    いいねをした人: 居ません
    #49052
    アバター画像キタジマ タカシ
    参加者
    2421

    Snow Monkey v10 で、内包する Basis もアップデートしました。チェックボックスの HTML 構造は下記に変更になりました。

    <label>
      <span class="c-checkbox">
        <input type="checkbox" class="c-checkbox__control">
        <span class="c-checkbox__label">...</span>
      </span>
    </label>

    ちなみに、これまで JS を使って無理くりどのブラウザにもデザインを適用するようにしていましたが、そこまでする必要性も減ってきていると思うので、最新版では、レガシーブラウザにはデザインが反映されず(ブラウザデフォルトのデザインになる)、モダンブラウザには Basis のデザインが反映されるようになっています。

    0
    いいねをした人: 居ません
    #49065
    Kmical Lights
    閲覧者
    234

    おー、ありがとうございます。調整しやすくなった感じですねー。
    Basisのスタイルの方も兼ねて再度HTMLを見直さねば(汗)

    トピック閉じます。

    0
    いいねをした人: 居ません
4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • トピック「.c-checkboxでチェックボックスを表示した際、テキスト(.c-checkbox__label)の位置がズレている」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。