フルスクリーンについて・・・

質問

質問に対し、はい/いいえを選択し答えを出すチャート式を使ったサイトを作成しています。
よくある病気等を診断する感じのサイトです。

質問は、div idにquestion1～10を指定。
選択肢のはい/いいえには、a hrefに#question1～10を指定。
答えは、#answer1～3

１ページで完結する簡単なものになっています。
問題はスクロールすると全て見えてしまう事です。
また、画面サイズによってスクロールしなくても次の質問が見えてしまいます。

そこで、ｊｓやjqで回避できないか質問したいです。
htmlとcss以外の知識がないため知恵を貸していただきたいです。

#questionを１つだけフルスクリーンで表示させることはできるでしょうか？
もちろんスクロールはできない仕様で。

#question1～10を個別の.htmlに変えるやり方はできれば避けたいです。
可能であればイメージのスライドショー的なスムーズに画面が変わる感じにしたいです。

もしjqのプラグインやjs、css3などで動作できるのであれば教えてほしいです。
よろしくお願いします。

回答No.6

ORUKA1951 · ベストアンサー

一部修正
★No.4のHTML中
・＿＿<div class="section answer" id="A1">直前の
＿</ol>
　は削除すること
・印刷用スタイルシート中＿#Q7{page-break-after:always;}
は、＿#A1{page-break-before:always;}
　のほうが良いです。必ず答えのページ直前で改ページされます。

No.5 のHTML5用のスタイルシートです。
★HTML5では原則としてDIVは使いません。
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.( http://www.w3.org/TR/2012/CR-html5-20121217/grouping-content.html#the-div-element )
著者は、div 要素は、他に適切な要素がないときなど、最後の最後手段として使用することが強く推奨されます。div 要素の代わりにより適切な要素を使うことで、読者にとってはアクセシビリティの向上に、著者にとってはメンテナンスの向上につながる。

★jsを使うより、はるか簡単になり、あらゆる面で優れているといえるでしょう。
　先で【HTMLに手を加えることなく】デザインを全く変えることもできますしね。

<style type="text/css" media="screen">
<!--
html{margin:0;padding:0;height:100%;}
span{display:none;}
body{margin:0 auto;width:80%;height:100%;position:relative;min-width:480px;max-width:900px;}
header{height:100px;position:fixed;width:80%;}

/* ここから */
section{
width:90%;height:70%;margin:110px auto;
position:absolute;overflow:hidden;
}
section section{
height:100%;width:100%;margin:0;
position:static;
}
/* ここまで */

section.answer h2{font-size:60px;}
section{border:ridge green 5px;text-align:center;}
section section{border:none;}
section#A1{background-color:lime;}
section#A2{background-color:fuchsia}
section#A3{background-color:aqua;}
footer h2{display:none;}
footer{position:absolute;bottom:0;}
header{background-color:yellow;}
-->
</style>
<style type="text/css" media="print">
a{color:black;text-decoration:none;}
#A1{page-break-before:always;}
</style>

お礼

たくさんの回答ありがとうございました。
とてもわかりやすく勉強になりました。

希望通り問題なく動作しました！

今さらですが、このようなサイトはPHPで作ったほうが良いのでは？と思っています。

実際に作りたいものは質問数や最終的な診断結果が多いのと、コードを見せたくなくて・・・。

使用する言語など、どうしたらいいのか悩んでいます。jsとPHPの違いも簡単にしか理解していませんが・・・。後日PHPのカテゴリーなどで質問しようかなと思っています。

言語が変わってもこのcssは使えると思うので活用させてもらいます。
ありがとうございました！！！

補足

親切に詳しく教えていただき本当にありがとうございます。

html5でのdiv、sectionについて勉強になりました。

どこかで間違って覚えてしまったようで、「<div>の中に<section>を入れて、cssでのデザインなどでsectionは基本的に触らない」と思っていました。

過去に作ったサイト等も書き直そうと思います；；

実はまだコード見ただけで試していませんが問題なくできそうです！！！
個人的にフッターを固定したり、sectionの高さは%じゃなくpxで指定しようかなと思っています。
cssのpositionが苦手であまり理解できていないのでこれをきに再度勉強しようとおもいますｗｗあと印刷用スタイルシートも使ったことないので調べたりしてみます！

色々ありがとうございました。

回答No.7

ORUKA1951

＞個人的にフッターを固定したり、sectionの高さは%じゃなくpxで指定しようかなと思っています。
　最近は様々なディスプレイで利用されるので、可能な限り%指定が良いですよ。サンプルを実際に試されたら分かるようにスマホサイズでも利用できるはずです。
　ただ、%指定は
「直近のstatic以外の親コンテナブロックのサイズを参照する。」
「min-width,max-widthなどを指定すること」
「DOCTYPEスイッチを正しく指定する。」
　　<doctype html>で大多数のブラウザは標準モードです。
などを習得すること。

お礼

回答ありがとうございました。

補足

sectionの高さは、section内に画像やボタンを使用しようと思っていて、スマホ(横)などでoverflowによって見えなくなると思い。。。フッターは逆でスペースが空いている場合デザイン的に一番下に固定したいなと。。。

おかしいですかね？；；

一度回答の動作確認してからお礼等記載します！

回答No.5

ORUKA1951

No.4です。JavaScriptを使わなかった理由などを説明しておきます。
1) SEOの観点からHTMLを文書構造だけに使用したい。
　⇒JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769#2 )
2) すべてのユーザーエージェントがjavascriptを使えるわけじゃない
　⇒HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )
　jsだけじゃなくCSSが扱えないユーザーエージェントも利用できること。印刷も含めて
3) 簡単であること。追加や変更が容易であること。
　⇒構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
　正味
div.section{position:absolute;overflow:hidden;}
div.section div.section{height:100%;width:100%;position:static;margin:0 auto;}
の設定が肝ですから。
4)HTMLの内容を追加してもCSSは書き換えなくて良い。

＞class="section question"はsectionじゃなくても大丈夫ですよね?CSSでややこしくなりそうで・・・。
　これは将来確実に普及するであろうHTML5(の新しい要素とその意味 http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )に合わせてあるのです。HTML5だと、下記のようになりますかね。

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="IRUKA">
<!--[if IE]>
＿<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
＿<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->＿<link rel="stylesheet" href="css/style.css">

<!-- スタイルシート後述 -->
</head>
<body>
＿<header>
＿＿<h1>ペット診断</h1>
＿＿<p>ペットとの相性を</p>
＿</header>
＿<section>
＿＿<section class="question" id="Q1">
＿＿＿<h2><span>【質問1】</span>あなたは動物が好きですか？</h2>
＿＿＿<ol>
＿＿＿＿<li><a href="#Q2">はい<span>→質問4へ</span></a></li>
＿＿＿＿<li><a href="#A3">いいえ<span>→回答3へ</span></a></li>
＿＿＿</ol>
＿＿</section>
＿＿<section class="question" id="Q2">
＿＿＿<h2><span>【質問2】</span>ペットにいつも一緒にいて欲しいですか？</h2>
＿＿＿<ol>
＿＿＿＿<li><a href="#Q3">はい<span>→質問3へ</span></a></li>
＿＿＿＿<li><a href="#Q5">いいえ<span>→質問5へ</span></a></li>
＿＿＿</ol>
＿＿</section>
＿＿<section class="question" id="Q3">
＿＿＿<h2><span>【質問3】</span>ペットの行動を一日週眺めてられますか？</h2>
＿＿＿<ol>
＿＿＿＿<li><a href="#Q5">はい<span>→質問5へ</span></a></li>
＿＿＿＿<li><a href="#Q4">いいえ<span>→質問4へ</span></a></li>
＿＿＿</ol>
＿＿</section>
＿＿<section class="question" id="Q4">
＿＿＿<h2><span>【質問4】</span>いつもそばにいて欲しいですか？</h2>
＿＿＿<ol>
＿＿＿＿<li><a href="#A1">はい<span>→回答1へ</span></a></li>
＿＿＿＿<li><a href="#Q6">いいえ<span>→質問6へ</span></a></li>
＿＿＿</ol>
＿＿</section>
＿＿<section class="question" id="Q5">
＿＿＿<h2><span>【質問5】</span>ペットのための時間を最低３０分とれますか？</h2>
＿＿＿<ol>
＿＿＿＿<li><a href="#Q4">はい<span>→質問4へ</span></a></li>
＿＿＿＿<li><a href="#Q6">いいえ<span>→質問6へ</span></a></li>
＿＿＿</ol>
＿＿</section>
＿＿<section class="question" id="Q6">
＿＿＿<h2><span>【質問6】</span>室内が傷だらけになっても良いですか？</h2>
＿＿＿<ol>
＿＿＿＿<li><a href="#A2">はい<span>→回答2へ</span></a></li>
＿＿＿＿<li><a href="#A1">いいえ<span>→回答1へ</span></a></li>
＿＿＿</ol>
＿＿</section>
＿＿<section class="question" id="Q7">
＿＿＿<h2><span>【質問7】</span>家族の理解ありますか？</h2>
＿＿＿<ol>
＿＿＿＿<li><a href="#A2">はい<span>→回答2へ</span></a></li>
＿＿＿＿<li><a href="#A3">いいえ<span>→回答3へ</span></a></li>
＿＿＿</ol>
＿＿</section>
＿＿<section class="answer" id="A1">
＿＿＿<h2><span>【回答1】</span>犬を飼いましょう</h2>
＿＿＿<p><a href="#Q1">最初から</a></p>
＿＿</section>
＿＿<section class="answer" id="A2">
＿＿＿<h2><span>【回答2】</span>猫を飼いましょう</h2>
＿＿＿<p><a href="#Q1">最初から</a></p>
＿＿</section>
＿＿<section class="answer" id="A3">
＿＿＿<h2><span>【回答3】</span>ペットは無理です。</h2>
＿＿＿<p><a href="#Q1">最初から</a></p>
＿＿</section>
＿</section>
＿<footer>
＿＿<h2>文書情報</h2>
＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</footer>
</body>
</html>

お礼

回答ありがとうございました。

補足

ありがとうございます。とても勉強にあります。
私自身html5を使用するので助かります。

jsは初心者なのでこのcssで作成したいと思います。

回答No.4

ORUKA1951

＞10個設問があって、YesNoで答えて行って、最後にAnswer1～3の
どれかに到達する
　yesの数とかを数える計算処理がないのでしたら、単純にスタイルシートだけで・・
シンプル イズ ザ ベスト。
　適当に内容を追加しても変更してもスタイルシートならいじる必要ないですしね。HTMLとCSSを一つだけ作って、HTMLは好きに追加や変更できる。
※HTMLには文書構造しか書かないようにすると、それに見合うものなら好きにデザインできますよ。
※それでいて、幅広ディスプレイだろうがスマホだろうが利用できる。
　　ウィンドウ幅を変えてみて!!
※印刷時はそれじゃまずいので・・インサツプレビューで確認。

★タブは＿に置換してあるので戻すこと。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css" media="screen">
<!--
html{margin:0;padding:0;height:100%;}
span{display:none;}
body{margin:0 auto;width:80%;height:100%;position:relative;min-width:480px;max-width:900px;}
div.header{height:100px;position:fixed;width:80%;}

/* ここからクイズ形式の設定 */
div.section{width:90%;margin:110px auto;height:70%;position:absolute;border:ridge green 5px;overflow:hidden;text-align:center;}
div.section div.section{height:100%;width:100%;border:none;position:static;margin:0 auto;}
/* ここまで */

/* おまけで色分け */
div.answer h2{font-size:60px;}
div#A1{background-color:lime;}
div#A2{background-color:fuchsia}
div#A3{background-color:aqua;}
div.footer h2{display:none;}
div.footer{position:absolute;bottom:0;}
div.header{background-color:yellow;}
-->
＿</style>
<style type="text/css" media="print">
＿a{color:black;text-decoration:none;}
＿#Q7{page-break-after:always;}
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>ペット診断</h1>
＿＿<p>ペットとの相性を</p>
＿</div>
＿<div class="section">
＿＿<div class="section question" id="Q1">
＿＿＿<h2><span>【質問1】</span>あなたは動物が好きですか？</h2>
＿＿＿<ol>
＿＿＿＿<li><a href="#Q2">はい<span>→質問4へ</span></a></li>
＿＿＿＿<li><a href="#A3">いいえ<span>→回答3へ</span></a></li>
＿＿＿</ol>
＿＿</div>
＿＿<div class="section question" id="Q2">
＿＿＿<h2><span>【質問2】</span>ペットにいつも一緒にいて欲しいですか？</h2>
＿＿＿<ol>
＿＿＿＿<li><a href="#Q3">はい<span>→質問3へ</span></a></li>
＿＿＿＿<li><a href="#Q5">いいえ<span>→質問5へ</span></a></li>
＿＿＿</ol>
＿＿</div>
＿＿<div class="section question" id="Q3">
＿＿＿<h2><span>【質問3】</span>ペットの行動を一日週眺めてられますか？</h2>
＿＿＿<ol>
＿＿＿＿<li><a href="#Q5">はい<span>→質問5へ</span></a></li>
＿＿＿＿<li><a href="#Q4">いいえ<span>→質問4へ</span></a></li>
＿＿＿</ol>
＿＿</div>
＿＿<div class="section question" id="Q4">
＿＿＿<h2><span>【質問4】</span>いつもそばにいて欲しいですか？</h2>
＿＿＿<ol>
＿＿＿＿<li><a href="#A1">はい<span>→回答1へ</span></a></li>
＿＿＿＿<li><a href="#Q6">いいえ<span>→質問6へ</span></a></li>
＿＿＿</ol>
＿＿</div>
＿＿<div class="section question" id="Q5">
＿＿＿<h2><span>【質問5】</span>ペットのための時間を最低３０分とれますか？</h2>
＿＿＿<ol>
＿＿＿＿<li><a href="#Q4">はい<span>→質問4へ</span></a></li>
＿＿＿＿<li><a href="#Q6">いいえ<span>→質問6へ</span></a></li>
＿＿＿</ol>
＿＿</div>
＿＿<div class="section question" id="Q6">
＿＿＿<h2><span>【質問6】</span>室内が傷だらけになっても良いですか？</h2>
＿＿＿<ol>
＿＿＿＿<li><a href="#A2">はい<span>→回答2へ</span></a></li>
＿＿＿＿<li><a href="#A1">いいえ<span>→回答1へ</span></a></li>
＿＿＿</ol>
＿＿</div>
＿＿<div class="section question" id="Q7">
＿＿＿<h2><span>【質問7】</span>家族の理解ありますか？</h2>
＿＿＿<ol>
＿＿＿＿<li><a href="#A2">はい<span>→回答2へ</span></a></li>
＿＿＿＿<li><a href="#A3">いいえ<span>→回答3へ</span></a></li>
＿＿＿</ol>
＿＿</div>
＿</ol>
＿＿<div class="section answer" id="A1">
＿＿＿<h2><span>【回答1】</span>犬を飼いましょう</h2>
＿＿＿<p><a href="#Q1">最初から</a></p>
＿＿</div>
＿＿<div class="section answer" id="A2">
＿＿＿<h2><span>【回答2】</span>猫を飼いましょう</h2>
＿＿＿<p><a href="#Q1">最初から</a></p>
＿＿</div>
＿＿<div class="section answer" id="A3">
＿＿＿<h2><span>【回答3】</span>ペットは無理です。</h2>
＿＿＿<p><a href="#Q1">最初から</a></p>
＿＿</div>
＿＿
＿</div>
＿
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

お礼

回答ありがとうございました。

補足

親切にありがとうございます。
まだ試してませんが、これなら私でも希望通りにできそうです!!
JSじゃなくCSSでできるとは！
HTMLやCSSのカテゴリーに投稿すればよかったのかも？

class="section question"はsectionじゃなくても大丈夫ですよね?CSSでややこしくなりそうで・・・。

回答No.3

Taiyonoshizuku

CSSをJavaScriptで変更するイメージ。

例えばHTMLがこうだったら
<div id="question1" class="question">
Q1
<div class="choice">
<a href="#question2">はい</a>
<a href="#question3">いいえ</a>
</div>
</div>
<div id="question2" class="question">
Q2
<div class="choice">
<a href="#question4">はい</a>
<a href="#question5">いいえ</a>
</div>
</div>
<div id="question3" class="question">
Q3
<div class="choice">
<a href="#question1">はい</a>
<a href="#question4">いいえ</a>
</div>
</div>
<div id="question4" class="question">
Q4
<div class="choice">
<a href="#question3">はい</a>
<a href="#question5">いいえ</a>
</div>
</div>
<div id="question5" class="question">
Q5
<div class="choice">
<a href="#answer1">はい</a>
<a href="#answer2">いいえ</a>
</div>
</div>
<div id="answer1" class="answer">
こたえ１
</div>
<div id="answer2" class="answer">
こたえ２
</div>
CSSをこうしてみて
<style type="text/css">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #111;
}
div.question {
position: absolute;
top: 0px;
left: 0px;
width: 300px;
height: 200px;
background: #000;
color: #fff;
display: none;
}
div.answer {
width: 100%;
height: 100%;
background: #ccf;
color: #fff;
display: none;
}
div.question a {
color: #f00;
}
</style>
JavaScriptをこうすると
<script type="text/javascript">
$(function() {
var left = $(window).width() / 2 - 150;
var top = $(window).height() / 2 - 100;
$('div.question').css ({
top: top,
left: left
});
$('#question1').show();
$('div.choice a').click ( function() {
var target = $(this).attr('href');
$(this).parent().parent().animate ({
height:'toggle',
opacity:'toggle'},'slow',
function() {
$(target).animate ({
width: 'toggle',
opacity:'toggle'
},'fast')
});
return false;
});
});
</script>
なんとなくだけど作れた感じがしない？

お礼

回答ありがとうございました。

補足

ありがとうございます！
なんとなくはわかりますが、jsがまだ勉強不足で完全には理解できず；；

実は簡単な事なのかもと思い、あれから http://sade-maso.com/ など診断系サイトのソースみたりしたけどやはりjsが・・・；；

これからjsをいちから勉強します。

回答No.2

Taiyonoshizuku

1さん
10個設問があって、YesNoで答えて行って、最後にAnswer1～3のどれかに到達するってことでしょ？

スタイルシートとJavaScriptでやれば作れると思うけど、jQueryのプラグインがあるかどうかはわからないなぁ。

たとえば初期値として全て非表示にして、question1を表示する。
答えを選んだらquestion1を非表示にして、次に選択されたquestionXを表示する。
ってのを繰り返していけばいいと思うよ。

あとは表示方法を工夫すればいいと思うんだ。

お礼

回答ありがとうございました。

補足

回答ありがとうございます。

＞10個設問があって、YesNoで答えて行って、最後にAnswer1～3のどれかに到達するってことでしょ？

はい。そうです！
実際はもっと複数作りますが、例として10の質問にしています。

表示方法(表示or非表示)はCSSですか？js?
知識がなく申し訳ないです。

回答No.1

ORUKA1951

HTMLには文書構造しか書きませんから悩むことはないと思います。

分からないのは
＞質問は、div idにquestion1～10を指定。
＞選択肢のはい/いいえには、a hrefに#question1～10を指定。
＞答えは、#answer1～3

選択肢のはい/いいえには、a hrefに#question1～10を指定。
　Q:はい、いいえの二者択一なのに、３個の回答？？
　　　なのに選択肢が1～10とはどういう意味ですか？

お礼

回答ありがとうございました。

補足

文章が下手で申し訳ないです。
No.2さんの言うように、
10個設問があって、YesNoで答えて行って、最後にAnswer1～3の
どれかに到達する、
です。