こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

Webサイトの作り方

http://monitor.macromill.com/lp/sukimajikan.html
上記のようなWebサイトを作りたいなと考えています。

ページ全体が左右のボタンで切り替わるイメージです。

参考になるサイトや、プログラムをおしえていただきたいです。

無料であるとうれしいです。

よろしくお願いいたします。

投稿日時 - 2014-02-04 11:09:58

QNo.8460723

困ってます

質問者が選んだベストアンサー

>画像が1ページに全部表示されている状態になりました。
 何を期待されているかがいまひとつわからないですが(^^)
スタイルシートの最後に
header,section{paddig:bottom:100px;overflow:auto;}
header h1,footer{position:fixed;height:50px;background-color:white;width:100%;z-index:100;}
header h1{margin:0;top:0;}
footer{bottom:0;}
body{overflow:hidden;}
footer h2{display:none;}
footer dl dt,footer dl dd{float:left;}
footer address{text-align:right;}

を追加する。
★要はHTMLさえちゃんと書かれていたら、スタイルシートでどのようにもなるということです。
 ちなみに印刷だとシンプルなHTML形式で印刷されるはずでね。スクリーンリーダーもちゃんと読んでくれますし、ガラケーでも利用できる。検索エンジンも問題ない!!
 こんなのテキストエディタでないと作れない。まぁ、変なツール使うより早いです。

投稿日時 - 2014-02-04 19:15:11

お礼

ありがとうございます!!!
CSSに付け加えたら、思ったとおりの表示になりました。

投稿日時 - 2014-02-05 11:05:55

このQ&Aは役に立ちましたか?

9人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

ちょっと時間が取れたのでシンプルなサンプル--動画でなく画像にしてあります。メモ帳で数分あったら書けるでしょう。
★タブは_に置換してあるので戻す。

<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<!--[if IE]>
__<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
_<![endif]-->
<style media="screen">
<!--
html,body,header,section{
margin:0;padding:0;
width:100%;height:100%;
position:relative;
background-size:cover;
}
p.goTo a{
position:absolute;
top:50%;
display:block;
line-height:2em;
text-align:center;
background-color:blue;
color:white;
width:10em;
}
header p.goTo a,
section p.goTo a+a{
right:0;
}
header{background-image:url(./images/1.jpg);}
#section1{background-image:url(./images/01.jpg);}
#section2{background-image:url(./images/02.jpg);}
#section3{background-image:url(./images/03.jpg);}
#section4{background-image:url(./images/04.jpg);}
#section5{background-image:url(./images/05.jpg);}

-->
</style>
</head>
<body>
_<header>
__<h1>title</h1>
__<p class="goTo"><a href="#section1">Nect</a></p>
_</header>
_<section id="section1">
__<h2>見だし1</h2>
__<p>
___最初の記事
__</p>
__<p class="goTo"><a href="#Top">Prev</a><a href="#section2">Next</a></p>
_</section>
_<section id="section2">
__<h2>見だし2</h2>
__<p>
___二番目の記事
__</p>
__<p class="goTo"><a href="#section1">Prev</a><a href="#section3">Next</a></p>
_</section>
_<section id="section3">
__<h2>見だし3</h2>
__<p>
___三番目の記事
__</p>
__<p class="goTo"><a href="#section2">Prev</a><a href="#section4">Next</a></p>
_</section>
_<section id="section4">
__<h2>見だし4</h2>
__<p>
___四番目の記事
__</p>
__<p class="goTo"><a href="#section3">Prev</a><a href="#section5">Next</a></p>
_</section>
_<section id="section5">
__<h2>見だし5</h2>
__<p>
___五番目の記事
__</p>
__<p class="goTo"><a href="#section4">Prev</a><a href="#Top">Top</a></p>
_</section>
_<footer>
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2012-08-10</dd>
__</dl>
__<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</footer>
</body>
</html>

投稿日時 - 2014-02-04 17:00:06

補足

ありがとうございます。
早速、コピーしてアップロードしてみたのですが、
画像が1ページに全部表示されている状態になりました。
動作はイメージ通り動いています。

投稿日時 - 2014-02-04 18:12:11

ANo.1

テキストエディタひとつあれば・・。Windowe付属のメモ帳でも
HTMLやCSSの知識がないと不可能ですが・・

投稿日時 - 2014-02-04 16:16:43

あなたにオススメの質問