2019/11/10
<div class="header"><!--ここからヘッダー ここにはヘッダーが入ります -->
9038
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script type="text/javascript" src="jquery.youtube-background.js"></script>
</head>
<body>
<div class="container">
<main>
<div class="example-marquee">
<div id="ytbg" data-youtube="https://youtu.be/tdng0_VMROo"></div>
<div class="content">
<div class="inner">
<h1>2019</h1>
</div><!-- 1 -->
</div><!-- 2 -->
</div><!-- 3 -->
</main>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
$('[data-youtube]').youtube_background();
});
</script>
</div>
<div class="main"><!--ここからメイン開始 メインコンテンツ -->
<div class="main-contents">
<div class="article">
<div class="balloon-head move">New!</div>
新記事です！などの文字や画像などを挿入する
</div><!-- 1 -->
<div class="hitokoto">
<span class="hitokoto-circle1">ひ</span><span class="hitokoto-circle2">こ</span>
<p> videoは 9033より </p>
</div>
<p>waveの巾は完了</p>
<p>margin: 0em 0; /*****0.1em***上との隙間</p>
<font size="6" color="#000000">Video ok</font>
<section class="box">
<h1>吾輩は猫である</h1>
<p>吾輩は猫である。名前はまだ無い。どこで生れたか頓と見當がつかぬ。當時は何といふ考もなかつたから吾輩は猫である。名前はまだ無い。どこで生れたか頓と見當がつかぬ。當時は何といふ考もなかつたから吾輩は猫である。名前はまだ無い。どこで生れたか頓と見當がつかぬ。當時は何といふ考もなかつたから吾輩は猫である。名前はまだ無い。どこで生れたか頓と見當がつかぬ。當時は何といふ考もなかつたから>別段恐しいとも思はなかつた。但彼の掌に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた許りである。</p>
</section>
<div class="article">
<div class="balloon-head move">New!</div>
新記事です！などの文字や画像などを挿入する
</div><!-- 1 -->
<p>コメントアウトとは</p>
<p><!-- ここにコメントを書く --><p>
<div class="gmap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6480.97683504581!2d139.69603573227477!3d35.689596751983835!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd0d6b1ba1f%3A0x1c32a1f1ecacfdd5!2z5paw5a6_6aeF!5e0!3m2!1sja!2sjp!4v1536218871739" width="100%" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
<div><!--gmap-->
</div><!-- 1 -->
</div><!-- 2 -->
</div><!--メインここまで メインここまで メインここまで-->
<div class="right-navi">
右側のカラム
</div><!-- -->
</div>
<div class="left-navi"><!--使用しない -->
左側のカラム
</div><!-- -->
<div class="footer"> <!--footer -->
ここにはフッターメニューが入ります
<!-- Footer -->
<footer>
<svg viewBox="0 0 120 28">
<defs>
<mask id="xxx">
<circle cx="7" cy="12" r="40" fill="#fff" />
</mask>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 13 -9" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
<path id="wave" d="M 0,10 C 30,10 30,15 60,15 90,15 90,10 120,10 150,10 150,15 180,15 210,15 210,10 240,10 v 28 h -240 z" />
</defs>
<use id="wave3" class="wave" xlink:href="#wave" x="0" y="-2" ></use>
<use id="wave2" class="wave" xlink:href="#wave" x="0" y="0" ></use>
<g class="topball">
<circle class="ball" cx="110" cy="8" r="4" stroke="none" stroke-width="0" fill="red" />
<g class="arrow">
<polyline class="" points="108,8 110,6 112,8" fill="none" />
<polyline class="" points="110,6 110,10.5" fill="none" />
</g>
</g>
<g class="gooeff">
<circle class="drop drop1" cx="20" cy="2" r="1.8" />
<circle class="drop drop2" cx="25" cy="2.5" r="1.5" />
<circle class="drop drop3" cx="16" cy="2.8" r="1.2" />
<use id="wave1" class="wave" xlink:href="#wave" x="0" y="1" />
<!-- g mask="url(#xxx)">
<path id="wave1" class="wave" d="M 0,10 C 30,10 30,15 60,15 90,15 90,10 120,10 150,10 150,15 180,15 210,15 210,10 240,10 v 28 h -240 z" />
</g>
</g -->
</svg>
<div> with Video 2019/11/09</div>
</footer>
</div><!-- 1 -->
</div><!-- 2 -->
CSS
body{
background-color: lightyellow;
}
.header {
height: 250px;
background-color: yellow;
}
.footer{
height: 250px;
background: black;
color: #fff;
clear: both;
}
.main-contents, .left-navi, .right-navi {
height: 2700px;
}
.main-contents {
background-color: white;
color: #fff;
float: left;
width: 80%; /*********/
}
.left-navi {
background-color: blue;
color: #fff;
width: 1%; /************/
float: right;
}
.right-navi {
background-color: green;
color: #fff;
float: right;
width: 19.5%;/***********/
}
.main{
width: 99%;/**************/
float: right;
}
/***************************************/
@media screen and (max-width: 600px){
.main, .left-navi,.main-contents, .right-navi{
width: 100%;
}
}
/*******************************************************************/
/********************** Youtube Background *********************************************/
/*******************************************************************/
html, .container {
font-family: 'Lato', sans-serif;
color: #1d1d1d;
padding: 5px; /*上下左右のbody隙間増える*5px**/
margin: 0px;
}
body { height: 40vh; }
.example-marquee {
position: relative;
}
.content {
display: table;
width: 60%;
min-height: 35vh; /*********高さ巾*****25vh*******/
z-index: 2;
position: relative;
}
.content .inner {
display: table-cell;
vertical-align: middle;
text-align: center;
padding-left: 60px;
padding-right: 6px;
}
.content .inner h1 {
font-size: 18px; /****文字サイズ*****/
color: white;
text-shadow: 1px 1px 0px rgba(0,0,0,1.1);
}
/****************************************************************************/
/*******************************************************************/
/***************************** GOOGLE MAP ******ok***********/
/*******************************************************************/
.gmap {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.gmap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
/****************** flex box ***************/
[class^="img-flex-3"] {
margin-bottom: 20px;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.img-flex-2 img { width: 49%; }
.img-flex-3 img { width: 32%; }
.img-flex-4 img { width: 24%; }
/*************************************************/
/*************************************************/
ul.sidenav {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: relative;
overflow: auto;
}
ul.sidenav li a {
display: block;
color: #000000;
padding: 8px 16px;
text-decoration: none;
}
ul.sidenav li a.active {
background-color: #da3c41;
color: white;
}
ul.sidenav li a:hover:not(.active) {
background-color: #1b2538;
color: white;
}
div.content {
margin-left: 25%;
padding: 1px 16px;
height: 1000px;
}
@media screen and (max-width: 900px) {
ul.sidenav {
width: 100%;
height: auto;
position: relative;
}
ul.sidenav li a {
float: left;
padding: 15px;
}
div.content {
margin-left: 0;
}
}
@media screen and (max-width: 480px) {
ul.sidenav li a {
text-align: center;
float: none;
}
}
/**********************ひとこと*********************************************/
/**************https://maipyon.net/wordpress-howto-write/*******************/
/*******************************************************************/
.hitokoto{
background: rgba(215, 253, 205, 0.61);
margin: 0em 0; /*****0.1em***上との隙間******/
padding: 35px; /****ok******/
border-radius: 10px;
margin-left: 8px; /***8px*ok******/
width: 180px; /***180px* ok ******/
}
.hitokoto-circle1{
font-size: 16px;
line-height: 1.5;
position: absolute;
margin-top: -37px;
font-weight: bold;
color: #fff;
background-color:#4caf50;
border-radius: 50%;
text-align: center;
width: 24px;
height:24px;
}
.hitokoto-circle1:after{
content: "と";
position: absolute;
margin-top: .2em;
font-weight: bold;
color: #fff;
background-color:#4caf50;
border-radius: 50%;
text-align: center;
width: 24px;
height: 24px;
}
.hitokoto-circle2:before{
content: "";
position: absolute;
top: 100%;
margin-left: -12px;
border: 5px solid transparent;
border-top: 10px solid #4caf50;
-ms-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.hitokoto-circle2{
position: absolute;
font-size: 16px;
line-height: 1.5;
margin-top: -37px;
margin-left: 40px;
font-weight: bold;
color: #fff;
background-color:#4caf50;
border-radius: 50%;
text-align: center;
width: 24px;
height: 24px;
}
.hitokoto-circle2:after{
content: "と";
position: absolute;
margin-top: .2em;
font-weight: bold;
color: #fff;
background-color:#4caf50;
border-radius: 50%;
text-align: center;
width: 24px;
height: 24px;
}
.hitokoto p{
margin: 0;
padding: 0;
}
/******************************************************/
/******************** list *****right******************************/
/*******************************************************/
/* 構造に関する記述 */
.list {
display: table;
table-layout: fixed;
width: 90%;
}
.list-box {
display: table-cell;
padding: 5px;
vertical-align: up;
}
.list-img {
max-height: 70px;
overflow: hidden;
text-align: center;
}
.list-img img {
width: 100px;
}
/* 中身のデザインに関する記述 */
.list-cat {
background-color: #3ae;
border-radius: 10px;
color: #fff;
font-size: 10px;
padding: 0 5px;
}
.list-date {
color: #aaa;
font-size: 10px;
margin-left: 10px;
}
.list-text h2 {
color: #000;
font-size: 14px;
line-height: 1.4;
margin-right: 10px;
}
/*******************************************/
/********* https://himakan.net/web/css/css_style_waku ******/
/******************************************/
.box{
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; background-color: #fafafa;
border: 1px solid #ccc;
border-radius: 5px;
padding: 0 0 1%;
margin-left: 5px; /****ok******/
}
.box h1{
margin: 0;
padding: 2% 3% 1.5%;
background-color: #eee;
border-bottom: 1px dashed #ccc;
font-size: 1.1em;
font-weight: normal;
color: #333;
}
.box p{
padding: 0 3%;
line-height: 2em;
color: #333;
}
/******************************************/
/******************************************/
/*********https://maipyon.net/balloon-design/*************************************/
/********************************************/
.article {
position: relative;
padding: 10px 5px;
margin-top: 1em; /***** 3em **ok****上要素との縦間隔**/
}
.balloon-head{
position: absolute;
top: -36px;
width: 50px;
margin: 0 auto 40px;
padding: 5px;
background: #ffb74d;
text-align: center;
font-weight: bold;
color: #fff;
}
.balloon-head::after {
content: '';
border: 8px solid transparent;
border-top-color: #ffb74d;
position: absolute;
bottom: -16px;
left: 50%;
margin-left: -8px;
}
.move {
animation: 0.5s move infinite alternate linear;
}
@keyframes move {
to { transform: transtateY(0); }
from { transform: translateY(4px); }
}
/***********************************************/
/******************************************************/
/******************** list *****right******************************/
/*******************************************************/
/* 構造に関する記述 */
.list {
display: table;
table-layout: fixed;
width: 90%;
}
.list-box {
display: table-cell;
padding: 5px;
vertical-align: up;
}
.list-img {
max-height: 70px;
overflow: hidden;
text-align: center;
}
.list-img img {
width: 100px;
}
/* 中身のデザインに関する記述 */
.list-cat {
background-color: #3ae;
border-radius: 10px;
color: #fff;
font-size: 10px;
padding: 0 5px;
}
.list-date {
color: #aaa;
font-size: 10px;
margin-left: 10px;
}
.list-text h2 {
color: #000;
font-size: 14px;
line-height: 1.4;
margin-right: 10px;
}
/*************************************************************/
.movie-wrap {
position: relative;
padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
height: 0;
overflow: hidden;
}
.movie-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*************************************************************/
/*************************************************************/
/****************https://www.sejuku.net/blog/76864***********************/
/*****main-contentsの文字色を指定********************************************************/
/*************************************************************/
.main-contents {
background-color: #fff; /*****ok******/
}
p {
color: #000000; /*****ok******/
}
/****************************************************************************/
/************************** WAVE ***************** ok **********************************/
/****** https://deshinon.com/2019/03/03/koseiteki-dokusouteki-footer-css/ :****/
/******************************************************************************/
@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
body {
font-family: Lato, sans-serif;
}
footer {
width:96.7vw; /*****96.7vw***ok**/
position:fixed;
bottom:0px
}
footer div {
background-color:#4478e3;
margin: -5px 0px 0px 0px;
padding:0px;
color: #fff;
text-align:center;
}
svg {
width:100%;
}
.arrow {
stroke-width: .3px;
stroke:yellow;
}
.topball {
animation: ball 1.5s ease-in-out;
animation-iteration-count:infinite;
animation-direction: alternate;
animation-delay: 0.3s;
cursor:pointer;
}
.wave {
animation: wave 3s linear;
animation-iteration-count:infinite;
fill: #4478e3;
}
.drop {
fill: transparent;
animation: drop 5s ease infinite normal;
stroke: #4478e3;
stroke-width:0.5;
opacity:.6;
transform: translateY(80%);
}
.drop1 {
transform-origin: 20px 3px;
}
.drop2 {
animation-delay: 3s;
animation-duration:3s;
transform-origin: 25px 3px;
}
.drop3 {
animation-delay: -2s;
animation-duration:3.4s;
transform-origin: 16px 3px;
}
.gooeff {
filter: url(#goo);
}
#wave2 {
animation-duration:5s;
animation-direction: reverse;
opacity: .6
}
#wave3 {
animation-duration: 7s;
opacity:.3;
}
@keyframes drop {
0% {
transform: translateY(80%);
opacity:.6;
}
80% {
transform: translateY(80%);
opacity:.6;
}
90% {
transform: translateY(10%) ;
opacity:.6;
}
100% {
transform: translateY(0%) scale(1.5);
stroke-width:0.2;
opacity:0;
}
}
@keyframes wave {
to {transform: translateX(-100%);}
}
@keyframes ball {
to {transform: translateY(20%);}
