画面下部固定バナー表示 01

あやつき＠iTMSJ.Info

バナーで無くても良いんですが。ようするに、画面下部に常時表示が存在して、その下のレイヤーにメイン画面がスクロールしていく、というパターン。最小限で書いてみると

<!doctype html>
<html lang="ja"><head>
<meta charset="utf-8">
<title>Tips 01</title>
<style>
body {background-color:#fff;}
#btm_float {
	background-color:#9f9;
	margin: 0 auto;
	text-align: center;
	width:90%;
	position:fixed;
	bottom:0;
	left:5%;
	}
section {
	width: 60%;
	margin:5% auto;
	}
</style>
<!--[if lt IE 9]>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>main cont
<section id="cont01">
<div>メイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツ</div>
<div>メイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツ</div>
<div>メイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツ</div>
</section>
<section id="cont02">
<div>メイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツ</div>
<div>メイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツ</div>
<div>メイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツ</div>
</section>
<section id="cont03">
<div>メイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツ</div>
<div>メイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツ</div>
<div>メイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツメイン画面コンテンツ</div>
</section>
<div id="btm_float">ココが画面下へ固定される
</div>
</body></html>

まずは、上記コードをコピペして、note01.html とか、適当な HTML ファイルで保存したら、新規ブラウザ画面に放り込む。そうすれば、おおむね

画像1


こんな感じで表示されるだろう。（背景黒で、文字白のほうが、画像にした時わかりやすいのかも。。。次回から考えますね〜）
スクロールが出るように、ブラウザ画面は、小さめにしてくだされ。
「メイン画面コンテンツ」という部分はスクロールされるが、『ココが画面下へ固定される』の部分は動かない。

CSS をだいたいわかっている人は、この先好きにカスタムに進めると思う。

という、超テンプレート的なサイトは、なぜかお目にかかったことがない。どこに行っても、HTML 部分、CSS 部分　のパーツだけ。
動かすためには、一旦1ページで書けば？　後で、style 内を「nantara.css」にすりゃいいし、この先 JavaScript 書くけど、ちゃんと動いてから、script 内を「sirankedo.js」とか別ファイルにして、読み込めばえぇのに。

っていつも思ってたので、書いてみた。


この記事が気に入ったらサポートをしてみませんか？