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

現在、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と関連する良く見られている質問

Q西サハラは今はどの国に帰属しているのですか。

西サハラは今はどの国に帰属しているのですか。スペインではないのですか。
モロッコですか、サハラ・アラブ民主共和国ですか、アルジェリアですか、スペインですか。
それとも無主地扱いですか。


スペインは少なくとも過去の時点で西サハラを国際法上領有したといえますよね。では、スペインから領有を承継した国が正当な領有国だと思うのですが、どうなのでしょう。国際法にくわしい方よろしくお願いします。

国際法の観点でご説明お願いします。

Aベストアンサー

国際法の見地からは

サハラ・アラブ民主共和国
※ただし、国土の大部分が隣国モロッコ軍の占領実効支配下にある

ポリサリオ解放戦線の独立運動に悩んだスペインが西サハラの放棄を決め、
モロッコ・モーリタニアに譲渡する密約を結ぶ。
1976年 サハラ・アラブ民主共和国独立宣言。モロッコ、モーリタニア両国軍西サハラ進駐
ポリサリオ解放戦線に首都を越境攻撃されたモーリタニアは領有権放棄・独立承認に転向。
モーリタニアが放棄したところも含め、国土の主要部はモロッコ軍に占領される。
サハラ側はアルジェリアの難民キャンプを策源地に亡命政府を樹立、砂漠地帯の解放区から出撃し
ゲリラ戦を展開。92年に国連監視下で住民投票を行うことに双方合意したが、有権者の資格で
意見まとまらず、現在も投票行われていない。

 モロッコが大半を実効支配していることは承知していても、積極的にモロッコの一部と認めてる国は
少ない。(国連は、西サハラを非自治地域リストに入れている)

 対して
サハラ・アラブ民主共和国は50か国以上と外交関係樹立し、アフリカ連合の正加盟国である

Qラジオボタンの設定

HP作成中です。ラジオボタンを設定した際、あらかじめ、ある一つのラジオボタンにチェックを入れておくためにはどうしたらよいのですか?

例えば、「春」「夏」「秋」「冬」という選択肢がラジオボタンで選択できるようになっていて、「春」にはじめからチェックを入れておきたいのです。

よろしくお願いします。

Aベストアンサー

<input type=radio name="***" value="***" checked>春
みたいに、checkedを入れればできると思います。

参考URL:http://tohoho.wakusei.ne.jp/

Q江戸時代の国と藩への帰属意識:大隅出身の人に質問

NHKの大河ドラマ、龍馬伝が人気ですね。
そこでは薩摩藩とか長州藩とかの名前が出てきます。薩摩藩の支配する地域は薩摩の国と大隅の国を合わせた領域だと思いますが、大隅の国に生まれ育った人は自分が薩摩藩の人間であるという帰属意識があるのでしょうか?島津藩、と言われればそれに対する帰属意識はあると想像しますが・・・・
だから幕末に活躍した南九州の藩は本来「島津藩」と呼ぶべきで「薩摩藩」と呼んだら大隅の国の人に失礼ではないか、と思うのですがどうでしょう。
先日岩国の出身者に同じ質問をしました。国としては防府の国なのですが、長州への帰属意識はあるとの事でした。こちらは長門藩でなく長州藩といっているからなのかな、と思いました。

Aベストアンサー

ウィキで 「薩摩藩」 と入れたら、「江戸時代に薩摩、大隅の二カ国、および (中略) を領有した藩」 と出てきます。いっぽう 「島津藩」 と入れるとヒットしません。
よく似た例で100万石の加賀前田藩を考えてみると、「加賀藩」 と入れたら 「江戸時代に加賀、能登、越中の三カ国を領有した藩」 と出てきます。いっぽう 「前田藩」 と入れるとヒットしません。
ご質問のケースは、前田100万石を加賀藩と呼んだら能登の国の人に失礼だ、というのに近い話になります。

おそらくこの場合の 「薩摩」 あるいは 「加賀」 は、領地というよりは政庁所在地という意味合いに近いのでしょう。
現在だったら中央官庁を霞ヶ関、警視庁を桜田門と呼ぶようなものです。地方に出先機関に失礼だからそう呼ぶなという話はあまり聞きません。

あるいは島津氏、前田氏などは他地域にも分派が存在することがあるので、氏族名で呼ぶと混乱するのかもしれません。

Qformのラジオボタン

初心者です教えて頂きたいのですが
フォームの送信先を自分自身(HTML)にして送信したとき
次に表示されるラジオボタンを送信前と同じ物を選択した状態にしたいのですが
どうしたら良いですか?よろしくお願いします。

Aベストアンサー

​http://oshiete1.watch.impress.co.jp/qa4359235.html
を元に作ってみました。参考になれば、幸いです。

<html>
<head>
<script language="javascript">

function load() {
var f=document.getElementById("f0");
var v="";
var s=location.search.substr(1).split("&")
for(var i=0;i<f.length;i++){
if(f[i].type=="radio"){
for(var j in s){
if(s[j]==f[i].name+"="+f[i].value) f[i].checked=true;
}
if(f[i].checked)
v+=(v==""?"":",")+f[i].value;
}
}
}
</script>
</head>
<body onload="load()" action="test.html">
<form id="f0">
<p>valueは1<input type="radio" name="checkbox1" value="1" /></p>
<p>valueは2<input type="radio" name="checkbox2" value="2" /></p>
<p>valueは3<input type="radio" name="checkbox3" value="3" /></p>
<p><input type="submit"/></p>
</form>
</body>
</html>

​http://oshiete1.watch.impress.co.jp/qa4359235.html
を元に作ってみました。参考になれば、幸いです。

<html>
<head>
<script language="javascript">

function load() {
var f=document.getElementById("f0");
var v="";
var s=location.search.substr(1).split("&")
for(var i=0;i<f.length;i++){
if(f[i].type=="radio"){
for(var j in s){
if(s[j]==f[i].name+"="+f[i].value) f[i].checked=true;
}
if(f[i].checked)
v+=(v==""?"":",")+f[i].value;
}
}
}
</script>
</head>
<bo...続きを読む

Q親日法が存在する国と国交を持つ意味ある?

親日反民族行為者財産の国家帰属に関する特別法
などと、いう法律で国内世論をねじ伏せている韓国と
日本は国交を継続し続ける意味あるの?

Aベストアンサー

貿易が黒字というが、実際は、不正コピー商品による被害のほうが大きいのでは?


韓国独自のものは何も無いし、こっちは、韓国製品使う必要ありません。

あっちは日本の国益に逆らおうと必死ですから、

日本から韓国の利益のために部品を売る必要もないです。

QSEOについて質問がございます。

SEOについて質問がございます。

ITコンサルタントの先生からcgiのサイトはSEOに不向きだ
php等ではないと検索上位は難しいと意見していただきましたが、
cgiを使ったサイトは色々あるし、本当かなと疑問もあります。
専門家の意見を参考までにお聞かせください。

Aベストアンサー

その専門家が「馬鹿」なのか、質問者さんの理解が間違っている可能性はあります。

(1)phpはcgi版とモジュール版があり、phpがcgiより有利というのは
根本的にあてはまりません。

(2)クライアントからphpとcgiの違いがわかるのは拡張子くらいです
(サーバーからの戻り値は調整ができるため)
変な話cgiの拡張子をphpで運用してしまえば、クライアントはphpとして解釈されるはずです

(3)そもそもcgiが相対的に不利な根拠がありません

ただしSEOはともかく作成者サイドとしては、PealよりはPHPの方が今風ですねぇ

Q大学入試の勉強法

今高校3年の受験生です。いちお国立の大学を目指しています。必要な教科は国、数、英、地理、物理、化学です。何か良い勉強法&オススメの参考書があったら教えて下さい。(とくに物理と化学と数学)

Aベストアンサー

一応現役国立大生です。
私もsannbomasutaさんと同じ科目で受験しました。

◆国語
現代文は特に対策はしませんでした。強いていえば普段から幅広く本を読むことが大切でしょう。新聞のコラムなどよりも普通の書籍類のほうがいいと思います。
古文は単語が重要です。語呂合わせなどでできるだけ多く覚えましょう。
漢文はある程度慣れが必要ですのでたくさんの問題に当たることが重要です。

◆数学
基本的には基礎をしっかり固めてから、志望大学の傾向に合わせた分野を強化していくのがいいでしょう。
センターは基礎が大切ですが、短い時間で解くためのテクニックも重要です。バランスよく勉強しましょう。

◆英語
まずはひたすら単語でした。
ターゲット1900などで確実にマスターすると良いでしょう。
文法はなるべく多くの問題に当たることです。だいたい入試のパターンは決まっているので、傾向が見えてくると思います。

◆地理
ひたすら教科書とセンター形式の問題を解いていましたが、私は地理が苦手だったので保険で現社も受けました。
結局現社の方が良かったのですが…余裕があれば社会を2科目受けるのもありかもしれません。

◆物理
力学→運動方程式とエネルギー保存、波動→波の式と干渉条件、電磁気→クーロンの法則や電磁場についての公式、熱力学→第一法則、原子物理→量子現象の公式と単位変換
という基本的な事をマスターすれば実はほとんどの問題がそれの応用で解けてしまいます。
あとは志望大学の傾向にあわせて勉強するといいでしょう。
ただしセンター第一問で出るような暗記問題には要注意です。

◆化学
No.2のkaminecoさんとほぼ同じです。理論→無機→有機
を固めると良いでしょう。そのためにまずは暗記からです。

参考になれば幸いです。

一応現役国立大生です。
私もsannbomasutaさんと同じ科目で受験しました。

◆国語
現代文は特に対策はしませんでした。強いていえば普段から幅広く本を読むことが大切でしょう。新聞のコラムなどよりも普通の書籍類のほうがいいと思います。
古文は単語が重要です。語呂合わせなどでできるだけ多く覚えましょう。
漢文はある程度慣れが必要ですのでたくさんの問題に当たることが重要です。

◆数学
基本的には基礎をしっかり固めてから、志望大学の傾向に合わせた分野を強化していくのがいいでしょう。
...続きを読む

Qラジオボタンをチェック済みのマークごと印刷したい

ラジオボタンをチェック済みのマークごと印刷したい

firefox、opera、googleChrome、IE7、IE6 ではラジオボタンをチェックした状態(ラジオボタンの中にある緑色の丸)も印刷されるのですが、IE8で印刷をすると、チェックのマークが表示されません。
safariではラジオボタンごと消えてしまっていました。
マークが表示されたブラウザもバージョンが違えば表示されないかもしれません。

必ず、印刷したときラジオボタンのチェック済のマークも表示させたいのですが、何か方法はありますか?
よろしくお願いします。

Aベストアンサー

「背景や一部の画像が印刷されない」の対応じゃないでしょうか

http://www.auone-net.jp/netguide/column/dcol/025/025.html

他のブラウザーで出来てるなら
http://support.microsoft.com/kb/188988/ja
じゃないですよね(一応)

Q環境法を学べる大学院について

高3です。
法律家になりたい、とかそういう具体的なものはありませんが、法学部に興味があります。
そして、その中でも環境法を学んでみたいと思っています。
環境法を学部として持っているのは上智大くらいだと思うのですが、大学では法律全般を学び、大学院で環境法を学びたいです。

法学部が行く大学院は法科大学院で、そこは法曹になる人がいくと思うのですが、法曹にならない人も中にはいるのでしょうか?

また、環境法が充実している大学、大学院はどこでしょうか?
弁護士という選択もなくはないので、環境法を学ぶ為法科大学院に行くのはいいと思っています。
(そんな簡単に弁護士になんてなれませんが笑)

あと、北大の法学部、法科大学院は良いですか?

質問が多くてすいません。
よろしくおねがいします。

Aベストアンサー

http://www.hokudai.ac.jp/bureau/gaiyou/2011/student/students_number.html

学問として法学あるいは環境法をやるのは、法科大学院の中でも
法曹になるための専門職大学院ではなく、博士課程前期とか修士課程というコースであって、ベツモノ

北大では
一年 28
二年 28
が学んでおり、専門職大学院の193名とは扱いが別です。

http://www.u-tokyo.ac.jp/stu04/e02_01_j.html
東大だと もっと明快に分けている

総合法政
法曹養成

あるいは、環境法というのは、環境に対する法の運用という行政に近いので
http://www.hops.hokudai.ac.jp/

公共政策大学院のほうが、近いかもしれない。
http://www.hops.hokudai.ac.jp/staff/stafflist.html

Q画像をクリックしてラジオボタンにチェック

タイトルのそのままなのですが、
ロゴを募集するサイトを作成しているのですが
<label></label>でいけるかな?と思ったらできませんでした。
まだまだひよっこなので・・・。
どのような方法でもいいのでどなたかご教授ください。
よろしくお願いします~

Aベストアンサー

ちょっと質問がわかりにくいのですが、
「画像とそれに対となるラジオボタンが1セットとして、そのセットが数セット存在し手いる状態で、画像を押したらセットとなるラジオボタンを選択させたい。」
ということでしょうか?

その前提で記入します。

JavaScriptを使用してこんな感じでいかがでしょう
<input type=radio id=rdo1><img src="file.jpg" border=0 onClick="javascript:rdo1.checked=true;" style="cursor: hand;">


人気Q&Aランキング

おすすめ情報