ベストアンサー

Webサイトの作り方

2014/02/04 11:09

http://monitor.macromill.com/lp/sukimajikan.html 上記のようなWebサイトを作りたいなと考えています。ページ全体が左右のボタンで切り替わるイメージです。参考になるサイトや、プログラムをおしえていただきたいです。無料であるとうれしいです。よろしくお願いいたします。

kirarikirari1
お礼率33% (2/6)

フリーウェア・フリーソフト
回答数3
ありがとう数10

みんなの回答 （3）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/02/04 19:15 回答No.3

＞画像が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/05 11:05

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

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/02/04 17:00 回答No.2

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

質問者