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

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

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (2件)

<html>


<head>
<style type="text/css"><!--
dt{ margin-top:1em;}
#test1{ width:240px; height:50px; background: white url(メモリ画像.gif) no-repeat 0 .6em;}
#test1 label{ display:block; width:48px; float:left;}
/* 上記↑評価1のCSS  下記↓評価2のCSS */
#test2{ width:240px;}
#test2 label,#test2 input{ display:block;}
#test2 label{ width:48px; float:left; text-indent:6px;}
--></style>
</head>
<body>
<div>
<dl>
<dt>評価1</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>評価2</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は関係ないとして、
背景画像が表示出来ない環境の場合、何も出来なくなりますので、ラジオボタンと関連するテキストを示した方が良いのでは?と感じます。
(それを言えば普通の横一列のフォームボタンになりますがw)
背景で目盛を表示する場合には、各親要素で背景画像を表示すれば可能です。
評価2のように縦にするのも見やすいかも。
「ラジオボタンで段階評価」の回答画像1
    • good
    • 0
この回答へのお礼

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

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

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

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

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




<!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>
    • good
    • 0
この回答へのお礼

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

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

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qサイト内投票ボタン(いいね等)の設置方法について

facebook等に連動しないサイト内投票ボタン(いいね等)を設置したいです。
既に存在するwebページ内に、上記ボタンを設置することによりweb投票が出来るサイトを作成しています。参考になるプログラムやソース等ありますか?

対象htmlファイルが置かれているレンタルサーバでは、javascript、PHP5、perlが動作します。またDB(MySQL、PostgreSQL)が利用可能です。

Aベストアンサー

参考までに:http://w3q.jp/t/3969

参考URL:http://w3q.jp/t/3969


人気Q&Aランキング

おすすめ情報