http://monitor.macromill.com/lp/sukimajikan.html
上記のようなWebサイトを作りたいなと考えています。
ページ全体が左右のボタンで切り替わるイメージです。
参考になるサイトや、プログラムをおしえていただきたいです。
無料であるとうれしいです。
よろしくお願いいたします。
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形式で印刷されるはずでね。スクリーンリーダーもちゃんと読んでくれますし、ガラケーでも利用できる。検索エンジンも問題ない!!
こんなのテキストエディタでないと作れない。まぁ、変なツール使うより早いです。
No.2
- 回答日時:
ちょっと時間が取れたのでシンプルなサンプル--動画でなく画像にしてあります。
メモ帳で数分あったら書けるでしょう。★タブは_に置換してあるので戻す。
<!doctype html>
<html>
<head>
_<meta charset="utf-8">
_<title>サンプル</title>
_<!--[if IE]>
__<script src="http://html5shiv.googlecode.com/svn/trunk/html5. …
_<![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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</footer>
</body>
</html>
この回答への補足
ありがとうございます。
早速、コピーしてアップロードしてみたのですが、
画像が1ページに全部表示されている状態になりました。
動作はイメージ通り動いています。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- その他(IT・Webサービス) 動画が多い(容量が多い)Webサイト作成 1 2023/04/08 17:42
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- MySQL 「utf8mb4_general_ci」はMAMPでは何に当たりますか? 1 2022/06/02 07:45
- MySQL PHPとMySQLを使った掲示板の作り方 1 2022/06/02 13:00
- システム 古いWEBシステム。もう追加プログラムは作れない? それともできる? 6 2022/06/08 13:41
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- その他(IT・Webサービス) WEBサイト内のファイルを探す方法は? 1 2022/11/11 16:38
- ASP・SaaS イントラネットを構築したい 2 2022/04/24 11:08
- その他(プログラミング・Web制作) Windowsのマクロプログラムで、こんなことできますか? 3 2022/06/28 14:30
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
line-height指定で発生する余白...
-
一括で全体を右にずらす
-
article、section、hgroup?
-
div要素が重なってします
-
html5でheaderの中にnav
-
ブログのサイドバーが下にくる
-
オシャレな区切り線はありませ...
-
グラフィックス
-
idとclassの指定方法
-
HTML属性での「""」 「''」違い
-
<div>テキスト</div>
-
html divボックスの入れ子で中...
-
html5にて水平線の引き方は?
-
HTMLとCSSの次に覚えることは何...
-
html の divとtable の役割
-
h1のテキストサイズよりh2の方...
-
【html&css】太さの違う2本線の...
-
改行がしたいのですが、うまく...
-
携帯サイト、ナノでのタグ編集...
-
コンピューターの画像ブロック
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
divとpの使いわけ
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
セクションをdivで囲むと見出し...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
-
1時間30分を簡単に表したいで...
-
スペースを使わず文字位置を揃...
-
CSSで、contentsがfooterに重な...
-
h1に自分自身へのリンクを張...
-
divの中に外部のHTMLを埋め込む
-
divを横に並べる方法
-
hタグの右横に画像を表示
-
h1のテキストサイズよりh2の方...
おすすめ情報