十字架ラビアンローズ

チェックボックス・ラジオボタンを、CSSだけで、さながらスマホのUIのようなタップしやすくおしゃれなデザインにする方法を、詳細に解説します。

  1. トップページ
  2. Webサイト構築
  3. CSS
  4. スマホ用サイト向け:タップしやすくおしゃれなチェックボックス・ラジオボタンをCSSで実現する方法

スマホ用サイト向け:タップしやすくおしゃれなチェックボックス・ラジオボタンをCSSで実現する方法

2014.5.28.Wed. 10:08

普段のチェックボックスはこのような感じです。

それを、このような見栄えで表現する方法を紹介します。

必要最低限のHTML・CSS

以下はチェックボックスを例に解説しますが、ラジオボタンでもやり方は同様になります。


<ul>
<li>
<input type="checkbox" name="sports" value="野球" id="sports_baseball">
<label for="sports_baseball">野球</label>
</li>
<li>
<input type="checkbox" name="sports" value="サッカー" id="sports_soccer">
<label for="sports_soccer">サッカー</label>
</li>
<li>
<input type="checkbox" name="sports" value="バスケ" id="sports_basketball">
<label for="sports_basketball">バスケ</label>
</li>
<li>
<input type="checkbox" name="sports" value="テニス" id="sports_tennis">
<label for="sports_tennis">テニス</label>
</li>
<li>
<input type="checkbox" name="sports" value="水泳" id="sports_swim">
<label for="sports_swim">水泳</label>
</li>
</ul>

HTMLの方では、特にこれといった工夫は必要ありません。
<label>を設定し、<input>とIDで紐づけるのだけは忘れないようにして下さい。
<input><label>をひとまとめにして横方向に並べる目的が果たせるのであれば、外側の構成は<ul><li>でなくても構いません。

CSSは最低限、以下のような指定が必要となってきます。
(list-style-type:none;等のリセットは割愛)


ul li
{
position:relative;
float:left;
}

ul li input
{
position:absolute;
top:0;
left:0;
opacity:0;
}

ul li label
{
background-color:#f2ccd9;
}

ul li input:checked + label
{
background-color:#e599b2;
}
ul li
position:relative;
チェックボックスを絶対配置する為の基準とする為に指定しておきます。
float:left;
チェックボックスとそのラベルを横方向に並べます。
なお、clearfixを施したり後続の要素にclear:both;を指定したり等の処理もお忘れなく。
ul li input
position:absolute;
top:0;
left:0;
チェックボックスを<li>に対して絶対配置します。
opacity:0;
チェックボックスを完全に透明にし見えなくさせます。
ul li label
background-color:#f2ccd9;
チェックが入っていない状態の時の、ラベルの背景色を指定します。
お好きな色をどうぞ。
ul li input:checked + label
background-color:#e599b2;
チェックが入っている状態の時の、ラベルの背景色を指定します。
お好きな色をどうぞ。

これらを適用させると以下のようになります。

チェックボックス・ラジオボタンを見やすくする

上述だけではチェックボックスやラジオボタンがむしろ分かりづらいので、それらしく装飾してみましょう。
以下のCSSをプラスします。


ul li
{
width:100px;
}

ul li label
{
display:block;
padding:10px;
border:1px solid #d9668c;
text-align:center;
}

ul li + li label
{
border-left-width:0;
}

ul li:first-child label
{
border-radius:10px 0 0 10px;
}

ul li:last-child label
{
border-radius:0 10px 10px 0;
}
ul li
width:100px;
ラベルの横幅を指定します。
ul li label
display:block;
ラベルを横幅いっぱいに広げたりする為に、ブロック要素として振る舞わせます。
padding:10px;
border:1px solid #d9668c;
text-align:center;
ラベルにパディングとボーダーを設定し、文字を中央揃えにします。
ul li + li label
border-left-width:0;
2つめ以降のラベルで冗長になるボーダーを消去します。
ul li:first-child label
border-radius:10px 0 0 10px;
最初のラベルのみ、左上と左下に角丸を施します。
ul li:last-child label
border-radius:0 10px 10px 0;
最後のラベルのみ、右上と右下に角丸を施します。

ちょっとそれらしくなりました。

チェックボックス・ラジオボタンをスマホ向けサイトらしいデザインにする

CSSを以下のようにするとよりそれらしい見栄えになります。


ul li
{
position:relative;
float:left;
width:100px;
}

ul li input
{
position:absolute;
top:0;
left:0;
opacity:0;
}

ul li label
{
display:block;
padding:10px;
border:1px solid #cccccc;
background-image:linear-gradient(#ffffff, #dddddd);
text-align:center;
font-weight:bold;
text-shadow:0 1px 0 #ffffff;
box-shadow:0 2px 2px rgba(0,0,0,0.15);
}

ul li + li label
{
border-left-width:0;
}

ul li:first-child label
{
border-radius:10px 0 0 10px;
}

ul li:last-child label
{
border-radius:0 10px 10px 0;
}

ul li input:checked + label
{
background-image:linear-gradient(#dddddd, #ffffff);
}
ul li label
background-image:linear-gradient(#ffffff, #dddddd);
ラベルに白〜薄い灰色のグラデーションをかけます。
text-shadow:0 1px 0 #ffffff;
下方向に1px・ぼかし無しの白いテキストシャドウを施します。
box-shadow:0 2px 2px rgba(0,0,0,0.15);
下方向に2px・ぼかし2px・#000000の不透明度が15%のボックスシャドウを施します。
ul li input:checked + label
background-image:linear-gradient(#dddddd, #ffffff);
チェックボックス選択時は、ラベルのグラデーションを上下逆にします。

これで、本記事冒頭のようなデザインのチェックボックスになりました。

押さえておきたいポイント

今回のCSSの肝となっているのは:checkedという、CSS3より採用されている擬似クラスです。
CSSでinput:checked{}のようにする事で、そのチェックボックスやラジオボタンにチェックが入れられている時のみ、条件としてマッチするようになります。
これと<label>とを、隣接セレクタ「+」で繋ぐ事によって、「チェックが入っているチェックボックスやラジオボタンに隣接しているラベル」という条件を指定出来るようになるという訳です。

なおチェックボックスやラジオボタンそのものは、display:none;で本当に非表示にする方法でもいいのかもしれませんが、その場合、実際のフォームとしての動作がどのようになるのかは分かりません。
その為今回は、チェックボックスやラジオボタンをラベルの上に絶対配置した上で見えなくさせるという手段をとっています。

Twitter

アーカイブ

全記事アーカイブ

ブログパーツ

  • アイラブ地元ブログパーツ