On/OffボタンをCSSで作る

Read More

CSSでOn/Offスイッチのボタンを作る。


■Off状態ボタン
凸の状態


■On状態ボタン
凹の状態



これはデザイナが不在で画像を用意することができない時や、
デザインがあまり必要ない場合(管理画面)などに使う。


■On/OffスイッチのCSS
<style type="text/css">
<!--
a.off {
 display:block;
 width:80px;
 border:outset 3px #9999cc;
 background-color:#666699;
 color:#fff;
 margin:0px;
 padding:3px 0px 1px 0px;
 font-weight:bold;
 text-align: center;
 text-decoration: none;
}
a.on {
 display:block;
 width:80px;
 border:inset 3px #9999cc;
 background-color:#585884;
 color:#ddd;
 margin:0px;
 padding:1px 0px 3px 0px;
 font-weight:bold;
 text-align:center;
 text-decoration:none;
}
//-->
</style>

<?php if(!$_GET['sw']) { ?>
<a href="/?sw=1" class="off">D&amp;D</a>
<?php }else { ?>
<a href="/?sw=0" class="on">D&amp;D&nbsp;</a>
<?php }// end if ?>





こうする事でOn/Offの状態を切替ることができる。


切替と発動のタイミングが一緒にした方がよいものは、
チェックボックスにjavascriptをかまして発動させるよりこっちの方がシンプルでずっと良い。




また、少し時間に余裕がある場合は凸と凹のCSSに若干手を加える。

上記のCSSでもそうしているが凸に対して凹の方には、
・背景色の色を濃くする
・文字をうす暗くする
・文字配置をズラす
などの調整を入れている。


こうすることにより実際にボタンを押下してOn/Offする時に違いがよりはっきりする。



画像を用意することができる環境であればこんなことをわざわざする必要性もないかもしれない。

けど、一つのCSSでボタンの使い回しができたりするのでそれなりにメリットもある。もちろんデメリットも。


ま、その辺はケースバイケースで。




--
ちなみに自分がこれを実際に使っているのは、クライアントが利用する管理画面でコストも余りかけれない(かけたくない)部分。


縦に並ぶレコードがあり、このレコードをドラッグ&ドロップすることで並びの順序を変更することができる。
Offが通常状態で、スイッチをOnにするとレコードがD&Dができるようになる。図はOnの状態。



わざわざこうしている理由はちゃんとある。

・通常状態ではページが複数にわかれることがある
1ページ目と2ページ目にまたがって順序を変更する場合に困る。
これに対応させる為、スイッチをOnにするとページ機能を取り消し1ページに全てのレコードを表示する。

・常にOn状態だと文字列をドラッグできなくなる
レコードをつまめる代わりに文字列を選択できなくなる。
これは文字列をコピーする時に困る。


他にもいくつか理由はあるが主な理由はそんな所。


まあ参考までに。



Category "HTML・JS・CSS" の最新記事