Webサイトの作り方

解決済

質問者：kirarikirari1
質問日時：2014/02/04 11:09
回答数：3件

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

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

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

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

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

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： ORUKA1951
回答日時：2014/02/04 19:15

＞画像が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形式で印刷されるはずでね。スクリーンリーダーもちゃんと読んでくれますし、ガラケーでも利用できる。検索エンジンも問題ない!!
　こんなのテキストエディタでないと作れない。まぁ、変なツール使うより早いです。

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2014/02/05 11:05

No.2

回答者： ORUKA1951
回答日時：2014/02/04 17:00

ちょっと時間が取れたのでシンプルなサンプル--動画でなく画像にしてあります。

メモ帳で数分あったら書けるでしょう。
★タブは＿に置換してあるので戻す。

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿
<style media="screen">

</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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</footer>
</body>
</html>