<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="description" content="" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta name="format-detection" content="telephone=no">
<title>懐かしのホームページ</title>
<link rel="stylesheet" href="css.css" media="all" />
</head>
<body>
<div id="container_wrap">
<header class="header">
<nav id="gnavi">
<ul>
<li><input id="block-01" type="radio" name="menu" class="toggle" onclick="select_menu()" checked>
<label class="Label" for="block-01">トップページ</label></li>
<li><input id="block-02" type="radio" name="menu" class="toggle" onclick="select_menu()">
<label class="Label" for="block-02">このホームページについて</label></li>
<li><input id="block-03" type="radio" name="menu" class="toggle" onclick="select_menu()">
<label class="Label" for="block-03">工事中</label></li>
</ul>
</nav>
</header>
<div class="contents">
<section id="section_1">
<h1 class="main_ttl niji"><span>★</span><span>よ</span><span>う</span><span>こ</span><span>そ</span><span>懐</span><span>か</span><span>し</span><span>の</span><span>ホ</span><span>ー</span><span>ム</span><span>ペ</span><span>ー</span><span>ジ</span><span>へ</span><span>！</span><span>★</span></h1>
<p class="counter m30">あなたは<img src="https://drive.google.com/uc?export=view&id=1gDaMm91u5H1snP05CvKGzccz6fFO31ly" alt="アクセスカウンター画像">人目のお客様です</p>
<div class="m30">
<div class="text_attention">
<p>↓キリ番報告はこちら↓</p>
</div>
<a href="" class="bbs">掲示板</a>
<p class="blink attention">踏み逃げ禁止</p>
</div>
<p class="m50">ここはどこかノスタルジックなホームページです。<br>あの頃を思い出しながら楽しんでください。</p>
<div class="text_attention">
<p>↓相互リンク募集中↓</p>
</div>
<ul class="list_banner">
<li>
<a href="" class="banner1">★懐かしい同盟★</a>
</li>
<li>
<a href="" class="banner2">ノスタルジック<br>ほーむぺーじ</a>
</li>
</ul>
</section>
<section id="section_2">
<h2 class="main_ttl niji m50"><span>こ</span><span>の</span><span>ホ</span><span>ー</span><span>ム</span><span>ペ</span><span>ー</span><span>ジ</span><span>に</span><span>つ</span><span>い</span><span>て</span></h2>
<p class="txt_b m30">このホームページはフレーム要素を使っているように見えて、<br>実はフレームは使っていません！</p>
<p class="txt_b">さらに訪問者をカウンターでカウントしているようにみせかけて<br>まったくカウントしていません！！</p>
<div class="text_attention">
<p class="niji"><span>カ</span><span>ウ</span><span>ン</span><span>ト</span><span>し</span><span>て</span><span>い</span><span>ま</span><span>せ</span><span>ん</span></p>
</div>
</section>
<section id="section_3">
<h2 class="main_ttl m50">工事中</h2>
</section>
</div>
</div>
</body>
</html>body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, ul {
margin: 0;
padding: 0;
}
body, button, input, select, textarea {
font-size: 100%;
}
img {
vertical-align: top;
font-size: 0;
line-height: 0;
}
* {
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
*:before, *:after {
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
body {
font: 500 16px/1.8 "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
color: #21201c;
text-align: left;
letter-spacing: 1px;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
color: #383838;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
a:link, a:active, a:visited {
text-decoration: none;
}
#container_wrap{
display: flex;
height: 100vh;
}
#container_wrap .header{
width: 25%;
height: 100%;
position: relative;
background-color: aqua;
border-right: double 5px grey;
}
#container_wrap .contents{
width: 75%;
height: 100%;
background-color: aqua;
text-align: center;
position: relative;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%23ffffff" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" /></svg>');
background-size: 30px 30px;
}
.main_ttl{
font-size: 2rem;
font-style: italic;
}
.counter{
display: flex;
justify-content: center;
align-items: center;
font-size: 1.125rem;
font-weight: bold;
}
.m30{
margin-bottom: 1.875rem;
}
.m50{
margin-bottom: 3.125rem;
}
#gnavi{
width: 100%;
position: absolute;
top: 10%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
#gnavi ul{
display: flex;
flex-direction: column;
align-items: center;
}
#gnavi ul li{
margin-bottom: .625rem;
}
#section_1,
#section_2,
#section_3{
position: absolute;
top: 15%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.toggle{
display: none;
}
.Label{
cursor: pointer;
color: blue;
text-decoration:underline;
}
#gnavi ul li .Label:hover{
color: black;
}
.list_banner{
width: 620px;
display: flex;
justify-content: space-between;
}
.banner1{
width: 300px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
background-color: chartreuse;
font-size: 1.25rem;
font-weight: 800;
font-style: italic;
}
.banner2{
width: 300px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
background-color: blue;
color: #fff;
font-size: .9rem;
font-weight: 800;
font-style: italic;
line-height: 1.3;
}
.txt_b{
font-weight: 800;
}
.bbs{
font-size : 1.875rem;
font-weight: bold;
color: blue;
}
.text_attention{
margin : auto;
width : 100%;
font-size : 1.25rem;
font-weight: 800;
text-align : center;
overflow : hidden;
}
.text_attention p{
margin:0;
display : inline-block;
padding-left: 100%;
white-space : nowrap;
line-height : 1em;
animation : scrolltxt 8s linear infinite;
}
@keyframes scrolltxt{
0% { transform: translateX(0)}
100% { transform: translateX(-100%)}
}
.attention{
font-weight: bold;
color: red;
font-size : 1.125rem;
}
.blink {
animation: blinking .2s ease-in-out infinite alternate;
}
@keyframes blinking {
0% {opacity: 0;}
100% {opacity: 1;}
}
.niji span:nth-of-type(1),
.niji span:nth-of-type(12){
color: blueviolet;
}
.niji span:nth-of-type(2),
.niji span:nth-of-type(13){
color: darkviolet;
}
.niji span:nth-of-type(3),
.niji span:nth-of-type(14){
color: blue;
}
.niji span:nth-of-type(4),
.niji span:nth-of-type(15){
color: green;
}
.niji span:nth-of-type(5),
.niji span:nth-of-type(16){
color: greenyellow;
}
.niji span:nth-of-type(6),
.niji span:nth-of-type(17){
color: yellowgreen;
}
.niji span:nth-of-type(7),
.niji span:nth-of-type(18){
color: yellow;
}
.niji span:nth-of-type(8){
color: orange;
}
.niji span:nth-of-type(9){
color: orangered;
}
.niji span:nth-of-type(10){
color: red;
}
.niji span:nth-of-type(11){
color: fuchsia;
}
document.oncontextmenu = function() { alert("右クリック禁止"); return false; }
function select_menu() {
menu = document.getElementsByName('menu')
if (menu[0].checked) {
document.getElementById('section_1').style.display = "";
document.getElementById('section_2').style.display = "none";
document.getElementById('section_3').style.display = "none";
} else if (menu[1].checked) {
document.getElementById('section_1').style.display = "none";
document.getElementById('section_2').style.display = "";
document.getElementById('section_3').style.display = "none";
} else {
document.getElementById('section_1').style.display = "none";
document.getElementById('section_2').style.display = "none";
document.getElementById('section_3').style.display = "";
}
}
window.addEventListener('load', select_menu());
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.