ラジオボタンで段階評価

解決済

質問者：turn-it-up
質問日時：2011/04/07 19:56
回答数：2件

ご覧頂きありがとうございます。

現在、Webアンケートを実施するために、ラジオボタンを用いて、添付画像のような段階評価のフォームを作りたいと考えています。
「SD法」と呼ばれるアンケートの種類に用いるためで、選択肢が等間隔に並んでいることが目盛で分かることが条件です。

作るにあたって、改変が容易である、と言った事を度外視し、とりあえずなるべく少ない言語(出来ればHTMLとCSSと画像のみ)での実現を目指しています。
複数のブラウザ、場合によってはスマートフォンなどでも閲覧することが想定されるためです。
HTML5だとrangeで標準装備になるようですが、HTML4.01で、そしてCSSだけで作れればベストと考えております。
JavaScriptで、スライダーとしても作ってみたのですが、iPadでの感触が良くなかったのもあり、
試行錯誤の結果、ラジオボタンを５つ配置し、その背景に目盛の画像を表示出来れば一番簡単かつ安全ではないか、と思っています。
(CGIでデータを受け渡す予定ですが、CGIに不得手なのもあり、シンプルなソースを目指しています)

以上を踏まえまして、
『ラジオボタンの背景に画像を表示させる方法』
(→ページの背景自体に目盛入りの画像を用意するしかないでしょうか？)
をご存知の方がいらっしゃいましたら、お教えて頂ければ幸いです。
また、それよりも簡単な方法で、
『ラジオボタンで段階評価させる方法』
をご存知の方がいらっしゃいましたら、合わせてお願い致します。

※添付画像が削除されました。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.2

回答者： fujillin
回答日時：2011/04/08 11:24

ボーダーの上にラジオボタンを重ねてみました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
.hoge { width:8.1em; height:3em; }
.hoge div { margin-left:0.8em; width:6.4em; border-bottom:2px groove #888; }
.hoge ul { list-style-type:none; position:relative; margin:-0.55em 0 0 0; padding:0; }
.hoge ul li { width:1.6em; text-align:center; float:left; }
</style>
</head>

<body>
<div class="hoge">
<div>&#160</div>
<ul>
<li><input type="radio" name="Q1" value="1"><br>1</li>
<li><input type="radio" name="Q1" value="2"></li>
<li><input type="radio" name="Q1" value="3"></li>
<li><input type="radio" name="Q1" value="4"></li>
<li><input type="radio" name="Q1" value="5"><br>5</li>
</ul>
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
「ボーダーを使う方法があるか」、と思わず唸ってしまいました。
これならばブラウザにあまり依存しないことでしょうし、確実ですね。
使用の目的上、画像を背景に配置する方の回答をベストアンサーとさせて頂きましたが、
fujillinさんの発想も素晴らしいと思いました。

通報する

お礼日時：2011/04/14 12:27

No.1ベストアンサー

回答者： naokita
回答日時：2011/04/08 03:44

<html>

<head>
<style type="text/css"></style>
</head>
<body>
<div>
<dl>
<dt>評価１</dt>
<dd id="test1">
<label for="r01"><input type="radio" name="test" id="r01"></label>
<label for="r02"><input type="radio" name="test" id="r02"></label>
<label for="r03"><input type="radio" name="test" id="r03"></label>
<label for="r04"><input type="radio" name="test" id="r04"></label>
<label for="r05"><input type="radio" name="test" id="r05"></label><br style="clear: left;">
</dd>
<dt>評価２</dt>
<dd id="test2">
<label for="r06">1<input type="radio" name="test2" id="r06"></label>
<label for="r07">2<input type="radio" name="test2" id="r07"></label>
<label for="r08">3<input type="radio" name="test2" id="r08"></label>
<label for="r09">4<input type="radio" name="test2" id="r09"></label>
<label for="r10">5<input type="radio" name="test2" id="r10"></label><br style="clear: left;">
</dd>
</dl>
</div>
</body>
</html>

表示方法にCGIは関係ないとして、
背景画像が表示出来ない環境の場合、何も出来なくなりますので、ラジオボタンと関連するテキストを示した方が良いのでは？と感じます。
（それを言えば普通の横一列のフォームボタンになりますがｗ）
背景で目盛を表示する場合には、各親要素で背景画像を表示すれば可能です。
評価２のように縦にするのも見やすいかも。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
labelと言うCSSタグがあるとは知りませんでした。
とても便利そうで、びっくりしております。

ラジオボタンと関連するテキストを縦で(２段で)表示することは考えていたのですが、
１文字の数字だけではなく、「難しい」と「優しい」などの対義語の文字列を両端に表示させる可能性もあり、躊躇しておりました。
回答のソースを参考に、labelを用いて書き直してみましたら、
文字列でもwidthをちゃんと指定すれば、崩れることなくちゃんと表示させられるようですね。
勉強になりました。
とりあえずは、目盛も表示させたいので、画像を用いて製作していこうと思います。

CSSは、なかなかゼロから考えるのが苦手なので、とても勉強になりました。
重ね重ね、ありがとうございました。

通報する

お礼日時：2011/04/14 12:21

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！