「ヘッダの位置固定」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

ヘッダの位置固定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ヘッダの位置固定</title>
<style type="text/css">
html, body
{
margin:0;
padding:0;
}
h1
{
background:#ccc;
color: #333;
padding: 20px;
position: fixed;
top: 0;
left: 0;
width: 100%;
margin:0;
}
.wrap
{
padding-top:100px;
}
</style>
</head>
<body>
<h1>ヘッダの位置固定</h1>
<div class="wrap">
■ネコがネズミを追いかける訳<br />
むかしむかし、人間も生まれていない、大むかしのある年の暮れの事です。<br />
神さまが、動物たちに言いました。<br />
「もうすぐ正月だ。元旦には、みんな私の所に来なさい。そして、先に来た者から十二番目までを、その年の大将としよう」<br />
ところが、うっかり者のネコは集まる日を忘れたので、友だちのネズミに聞きました。<br />
するとネズミは、<br />
「ああ、新年の二日だよ」<br />
と、わざとうそを教えました。<br />
<br />
さて、元旦になりました。<br />
ウシは足が遅いので、朝早くに家を出ました。<br />
ちゃっかり者のネズミは、こっそりウシの背中に乗って神さまの前に来ると、ピョンと飛び降りて一番最初に神さまの前に行きました。<br />
それでネズミが最初の年の大将になり、ウシが二番目になりました。<br />
その後、トラ・ウサギ・タツ・ヘビ・ウマ・ヒツジ・サル・ニワトリ・イヌ・イノシシの順になりました。<br />
ところがネコは、ネズミに教えられた通り二日に神さまの所へ行きました。<br />
すると神さまは、<br />
「遅かったね。残念だけど、昨日決まったよ」<br />
と、言うではありませんか。<br />
くやしいのなんの。<br />
「ネズミめ、よくも騙したな！」<br />
怒ったネコは、それからずっと、ネズミを見ると追いかける様になりました。<br />
<br />
■金太郎<br />
むかしむかし、あしがら山の山奥に、金太郎という名前の男の子がいました。<br />
金太郎の友だちは、山の動物たちです。<br />
金太郎は毎日毎日、動物たちとすもうをして遊んでいました。<br />
「はっけよい、のこった、のこった」<br />
「金太郎、がんばれ、クマさんも負けるな」<br />
だけど勝つのはいつも金太郎で、大きな体のクマでも金太郎にはかないません。<br />
「こうさん、こうさん、金太郎は強いなあ。でも、次は負けないぞ」<br />
今度は、つな引きです。<br />
金太郎一人と、山中の動物たちの勝負です。<br />
動物たちの中には、体の大きなクマやウシやウマやシカもいましたが、金太郎にかないません。<br />
「つな引きも、金太郎の勝ち！」<br />
なんとも大変力持ちの金太郎ですが、強いだけでなく、とてもやさしい男の子です。<br />
<br />
ある日、クマの背中に乗って山道を行くと、谷のところで動物たちが困っていました。<br />
「どうしよう？橋がないから、向こうへわたれないよ」<br />
「よし、ぼくにまかせておけ」<br />
金太郎は近くに生えている大きな木を見つけると、<br />
「よし、ちょうどいい大きさだ」<br />
と、いって、その大きな木に体当たりをしました。<br />
ドーン！<br />
すると大きな木は簡単に折れてしまい、金太郎がそれを持ち上げて谷にかけると、あっという間に一本橋の出来上がりです。<br />
「わーい。どうも、ありがとう」<br />
動物たちは大喜びで、金太郎のつくってくれた橋を渡りました。
</div>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>