baserCMS Tips #2 メールフォームでラジオボタンを縦並びのレイアウトにするcssコード

ラジオボタンのレイアウトは通常横並びですが、選択項目が多い場合などは、どうしても縦並びのレイアウトを考えたい時があります。

そこで、baserCMSのメールフォームに用意されたフィールドタイプ「ラジオボタン」で出力されたコードを見てみると、リストを構成するすべての要素（<input type="radio"> <label ></label>）が同列に配置されてしまっていて、一見したところ縦レイアウトは難しいという感じです。

<tr id="RowMessageSex">
    <th class="col-head" width="150">
        <label for="MailMessageSex">性別</label>
        <span class="normal">任意</span>
    </th>
    <td class="col-input">
        <span id="FieldMessageSex">
            <span class="bs-mail-before-attachment"></span>
            <input type="hidden" name="data[MailMessage][sex]" value="" id="MailMessageSex"/>
            <input type="radio" name="data[MailMessage][sex]" id="MailMessageSex男性" value="男性" class="" />
            <label for="MailMessageSex男性">男性</label>
            &nbsp;&nbsp;
            <input type="radio" name="data[MailMessage][sex]" id="MailMessageSex女性" value="女性" class="" />
            <label for="MailMessageSex女性">女性</label>
            <span class="bs-mail-after-attachment"></span>
            <span class="bs-mail-attention"></span>
        </span>
    </td>
</tr>

例えば、以下のように<input type="radio"> <label ></label>がdiv要素で括られていれば、flex等で簡単に縦レイアウトも可能なのですが。。。

    <input type="radio" name="data[MailMessage][sex]" id="MailMessageSex男性" value="男性" class="" />
    <label for="MailMessageSex男性">男性</label>

↓

<div class="radio-button-inner">
    <input type="radio" name="data[MailMessage][sex]" id="MailMessageSex男性" value="男性" class="" />
    <label for="MailMessageSex男性">男性</label>
</div>

とは言え、<input type="radio"> <label ></label>をdiv要素で括ること自体は、MailformHelper.phpのradioタイプの引数に$attributes['div'] = true;を指定して、利用するテーマ内のHelperフォルダ等にMailformHelper.phpのコピーを配置すれば、実のところ簡単に実現するのですが、できればコアファイルはあまり触りたくないということもあって、今回のCSS対応の提案というわけです。

話を本題に戻して、「baserCMS メールフォームでラジオボタンを縦並びのレイアウトにするcssコード」手順は、とても簡単です。

まず、以下のように、管理画面から該当のメールフォームのフィールドを選択し、縦並びにしたいラジオボタンのフィールド編集画面を開きます。 デフォルトの区切り文字に使われている「  」が邪魔なので、下図のように区切り文字の入力欄に半角スペースを入力、保存することで「  」を取り除きます。

以上で準備作業は終わりです。

その上で、以下のサンプルの要領で、スタイルをcssに追加します。

#FieldMessageSex label::after {
  content: "\A";
  white-space: pre-wrap;
} 

content: "\A"; は、疑似要素 ::after の位置にcontentプロパティとして「\A」を挿入します。「\A」は、改行させるためのエスケープ文字です。 ただ、HTMLのソースコード中に改行コードがあっても、コードとしては認識されず、ブラウザで表示した時もただスペースがあくだけで改行はされません。 次に、white-space: pre-wrap; で、white-spaceプロパティの値を pre あるいは pre-wrap とするのが肝で、こうするとpre要素内と同様にテキストを整形済み扱いにするのですが、当該要素に含まれる半角スペースやタブ文字、ソース内の改行文字といった空白類文字を残しつつ整形処理されます。ゆえに「\A」のエスケープ文字が、無事にコードとしてブラウザに反映されるようになり、挿入位置で改行されることになるわけです。

細かいことはさておき、これで、以下のようにラジオボタンのリストを縦並びにレイアウトすることができます。今回のcssは、意外に応用できるケースもあると思いますので、いろいろと試してみてください。

ちなみに、この「ラジオボタンのリストを縦並びにレイアウトしたい」という要件は、随分と前に旧フォーラム上でリクエストのトピックが上がっていて、過去の［フォーラム要望］メールフォームのinputとlabelをラップする設定が欲しい #1044 というissueの中で何らかの対応（ver.4.2時点）がされたような記述があるのですが、現時点の最新版で対応されている形跡は見受けられず、例によってどこかでデグレードしたのか、そもそも対応されていなかったのか、今となってはわかりませんが。。。