<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<style>@charset "utf-8";
/*========= ページトップのためのCSS ===============*/
#page-top a {
background: #942d2f;
color: #fff;
text-align: center;
display: block;
text-decoration: none;
padding: 20px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.8rem;
transition: all 0.3s;
}
#page-top a:hover {
background: #777;
}
/*========= レイアウトのためのCSS ===============*/
body {
width: 100%;
height: 100vh;
vertical-align: middle;
}
h1 {
font-size: 1.2rem;
}
h2 {
font-size: 1.2rem;
text-align: center;
margin: 0 0 30px 0;
}
p {
margin-top: 20px;
}
.caution {
color: red;
text-align: center;
font-size: clamp(12px, 2.5vw, 1.2rem);
font-weight: bold;
white-space: nowrap;
}
small {
background: #333;
color: #fff;
display: block;
text-align: center;
padding: 20px;
}
#header {
background: #333;
color: #fff;
text-align: center;
padding: 20px;
}
section {
padding: 100px 30px;
}
section:nth-child(2n) {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: linear-gradient(
0deg,
rgba(255, 255, 255, 1) 5%,
rgba(252, 225, 208, 1) 15%,
rgba(255, 173, 214, 1) 50%,
rgba(162, 186, 245, 0.8) 80%,
rgba(255, 255, 255, 1) 95%
);
}
#footer {
position: relative;
z-index: 2;
}</style>
</head>
<body>
<body>
<header id="header">
<h1>WEB先案内の名言コレクション</h1>
</header>
<p class="caution">一番下までスクロールして「Page Top」をクリックしてね<br>↓ ↓ ↓</p>
<main>
<section>
<h2>名言 1</h2>
<p>人はそれぞれ事情をかかえ、平然と生きている</p>
<p>ベストを尽くして失敗したら、ベストを尽くしたってことさ</p>
<p>いちばんいけないのはじぶんなんかだめだと思いこむことだよ</p>
<p>この世に生を受けたこと。それ自体が最大のチャンスではないか</p>
<!--/area1-->
</section>
<section>
<h2>名言 2</h2>
<p>ろくな晩じゃねぇや。寝ちまえ、寝ちまえ。寝て起きりゃ別の日だ</p>
<p>世の中ってオレより頭のいい人のほうが多いんだ</p>
<p>何かを捨てないと前に進めない</p>
<p>弱気は最大の敵</p>
<!--/area2-->
</section>
<section>
<h2>名言 3</h2>
<p>いつか、必ず、チャンスの順番が来ると信じなさい</p>
<p>前向きにもがき苦しむ経験は、すぐに結果に結びつかなくても、必ず自分の生きる力になっていく</p>
<p>「ゴールは遠いなぁ」と、がっかりするのも道のりです</p>
<p>「負けたことがある」というのが いつか 大きな財産になる</p>
<!--/area3-->
</section>
<section>
<h2>名言 4</h2>
<p>前進できぬ駒はない</p>
<p>「仕事はナメてかかって、真面目にやれ」と思っている。俺は、どの仕事もそうしてきているんです</p>
<p>自分を少し抑えて、肩の力を抜けば、仕事は長続きする</p>
<p>常に今日は明日の準備ですからね。今日やったことは必ず明日に返ってくるんです</p>
<!--/area4-->
</section>
<section>
<h2>名言 5</h2>
<p>強い者が勝つのではない。勝った者が強いのだ</p>
<p>自分がわかっていないことがわかるということが一番賢いんです</p>
<p>成功の反対は失敗ではなく「やらないこと」だ</p>
<p>自分が幸せかどうかは、自分で決めるしかないのよ</p>
<!--/area5-->
</section>
<!--/main-->
</main>
<footer id="footer">
<p id="page-top">
<a href="#">Page Top</a>
</p>
<small>© copyright.</small>
</footer>
<script>// #page-topをクリックした際の設定
$("#page-top").click(function () {
$("body,html").animate(
{
scrollTop: 0 //ページトップまでスクロール
},
500);
//ページトップスクロールの速さ。数字が大きいほど遅くなる
return false; //リンク自体の無効化
});
//# sourceURL=pen.js</script>
</body>
</html>