Houn

Web制作

公開日:2020.02.26

更新日:2022.11.17

ラジオボタンやチェックボックスのテキストが回り込み改行されてしまうのを解決

ラジオボタンやチェックボックス内テキストが改行されてしまうのを防止

ラジオボタンやチェックボックスのテキストは、何も対策しないとサイト幅によって途中で改行され、見栄えが悪くなってしまいます。

下図「その他」のような形ですね。

ラジオボタンのテキストが改行されてしまう1

更にこうなってしまうと、操作性も悪くなります。

ラジオボタンのテキストが改行されてしまう2

下図のように、ひとつのラジオボタンを塊として改行させるのが理想ですね。

ラジオボタン内テキスト改行を解決

これはCSSたった1行指定するだけで解決できます。

ラジオボタン内テキストの途中改行をなくす

HTML

<label><input type="radio" value="人間関係について">人間関係について</label>

※前提として、ラジオボタン全体(inputタグとテキスト)をlabelタグで囲みます。ボタンだけでなくテキスト部分をクリックしてもチェックが入れられるようになり、ユーザーの使い勝手がよくなります。

CSS

そしてそのlabelタグに対して

label {
  white-space: nowrap;
}

折り返し禁止のwhite-space: nowrap;とやることでテキストの途中改行がされなくなり、各選択項目がサイト幅に合わせて見やすく配置されます。

サイト保守契約の便利ツール

Webサイトの保守業務委託においては、毎月定額の決済をお願いするのが一般的だと思います。

決済方法として便利なのがクレジットカード自動引き落とし。一度顧客に手続きいただければ毎月自動で決済してくれるので、制作会社側も顧客側も何の手間もかかりません。

当事務所で導入しているのがSquare(スクエア)

導入は無料で、コストはクレジット決済手数料(3%)のみ。

毎月請求書を送る、未払いがないかチェックする‥などの手間が省けるなら安いものです。

制作会社、顧客ともに手続き操作もカンタンですし、こちらの記事で解説もしていますので、ご参考ください。

保守費決済のほか、ちょっとした小額の決済も決済リンクを送ってすぐ完了。

非常にラクでオススメです。まずはアカウント登録して、一度使い心地を試してみてください。

Square(スクエア)

無料相談はこちら