#WEBサイト制作に役立つコードを記述
・コピー&ペーストで使用可能
・レスポンシブ対応
・学習するとともに随時更新を行う
・外部の技術と独自の記述が混在
・inviewJSを使う場合はDLが必要
#HTML StartUp
html制作に必要な初期テンプレート
使用可能：jQuery, bootstrap, fontawesome, googlefonts, bxSlider
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- fontawesome -->
<script src="https://kit.fontawesome.com/7c414374ac.js" crossorigin="anonymous"></script>
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p|Montserrat|Noto+Serif+JP|Sawarabi+Mincho&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- bxSlider CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<!-- MyCSS -->
<link rel="stylesheet" href="assets/style.css">
<title>title</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<div class="main">
</div>
<footer>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- bxSlider JS -->
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<!-- inview JS -->
<script src="assets/inview/jquery.inview.min.js"></script>
<!-- myJS -->
<script src="assets/script.js"></script>
</body>
</html>
#CSS StartUp (リセットcss：自分用に改編版)
設定箇所：cssの初期化, form要素の最適化, font-sizeのrem指定設定, img要素の最適化
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
vertical-align:baseline;
background:transparent;
}
body {
line-height:2;
letter-spacing: 0.18em;
font-family: 'Montserrat', sans-serif;
font-family: 'Noto Serif JP', serif;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding-left:0.2rem;
vertical-align:baseline;
background:transparent;
text-decoration: none;
color:black;
}
a:hover{
background:transparent;
text-decoration: none;
color:black;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:0 0;
padding:0;
border: 0;
}
/* form要素のcss全リセット */
input,
button,
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
border: none;
border-radius: 0;
font: inherit;
outline: none;
}
textarea {
resize: vertical;
}
input[type='checkbox'],
input[type='radio'] {
display: none;
}
input[type='submit'],
input[type='button'],
label,
button,
select {
cursor: pointer;
}
select::-ms-expand {
display: none;
}
/* form要素のcss全リセットここまで */
/*リセットここまで*/
/* font-size rem指定用に変換 */
html {
/* ルートのフォントサイズを10pxに設定しておく */
font-size: 62.5%;
}
body {
/* ルートのフォントサイズを1.5em（15pxと同等のサイズ）に設定 */
font-size: 1.5em;
}
h1{
font-size: 3rem;
}
h2{
font-size: 2.0rem;
}
h5{
font-size: 1.5rem;
}
a{
font-size: 2.5rem;
}
/* font-size rem指定用に変換ここまで */
/* イメージ要素をウィンドウサイズより大きくしない */
img {
object-fit: cover;
max-width: 100%;
height: auto;
}
/* イメージ要素をウィンドウサイズより大きくしないここまで */
.bg-white{
background-color: white;
}
.bg-black{
background-color: black;
}
.clr-white{
color: white;
}
.flex-r{
display: flex;
flex-wrap: wrap;
}
/* 丁度良いpaddingとmargin */
.p-top3{
padding-top: 3rem;
}
.p-top5{
padding-top: 5rem;
}
.p-bottom3{
padding-bottom: 3rem;
}
.p-bottom5{
padding-bottom: 5rem;
}
.pd-3{
padding-top: 3rem;
padding-bottom: 3rem;
}
.pd-5{
padding-top: 5rem;
padding-bottom: 5rem;
}
.m-top3{
margin-top: 3rem;
}
.m-top5{
margin-top: 5rem;
}
.m-bottom3{
margin-bottom: 3rem;
}
.m-bottom5{
margin-bottom: 5rem;
}
.ma-3{
margin-top: 3rem;
margin-bottom: 3rem;
}
.ma-5{
margin-top: 5rem;
margin-bottom: 5rem;
}
/* 丁度良いpaddingとmarginここまで */
#headerテンプレート
コピペだけでheaderが完成します
html
<header>
<div class="header-contents">
<a href="#"><img class="logo" src="images/任意のロゴ画像" alt="ロゴ"></a>
<img class="navigation" src="images/任意のナビゲーションバー画像.png" alt="ナビゲーションバー">
</div>
</header>
<nav>
<ul>
<li><a href="#">トップ</a></li>
<li><a href="#id1">コンテンツ1</a></li>
<li><a href="#id2">コンテンツ2</a></li>
<li><a href="#id3">コンテンツ3</a></li>
<li><a href="#id4">コンテンツ4</a></li>
<li><a href="#id5">コンテンツ5</a></li>
</ul>
</nav>
<div class="nav-cover"></div>
css
/* headerここから */
/* モバイル用 */
header{
position: fixed;
z-index: 998;
width: 100%;
height: auto;
/* 背景色は任意に変更 */
background-color: rgba(0, 0, 0, 0.9);
}
.header-contents{
width: 95%;
height: 8.5vh;
margin-left: auto;
margin-right: auto;
}
header .logo{
float: left;
/* 以下、画像を小さくしてヘッダーの上下真ん中に配置(消しても良い) */
height: 90%;
position: relative;
top: 50%;
transform: translateY(-50%);
}
header .navigation{
float: right;
/* 以下、画像を小さくしてヘッダーの上下真ん中に配置(消しても良い) */
height: 90%;
position: relative;
top: 50%;
transform: translateY(-50%);
}
nav{
/* ナビは初期非表示 */
display: none;
width: 100%;
position: fixed;
top: 8.5vh;
z-index:998;
/* 任意のナビゲーションカラー */
background-color: rgba(0, 0, 0, 0.9);
}
nav li{
border-bottom: solid 1px rgba(255, 255, 255, 0.3);
}
nav a{
display: block;
padding-left: 2rem;
color:white;
}
nav a:hover{
color: #efcc69;
}
.nav-cover{
display: none;
position: fixed;
top: 8.5vh;
background-color: rgba(255, 255, 255, 0.2);
/* 画像を表示させたい時用 */
background-size: cover;
height:100vh;
width: 100%;
z-index:997;
}
/* モバイル用ここまで */
/* PC用 */
@media (min-width: 720px){
.navigation{
display: none;
}
.header-contents{
height: auto;
display: grid;
grid-template-rows: 100%;
grid-template-columns: 10% 20% 70%;
}
header .logo{
height: 90%;
/* position:absoluteにするとなぜがロゴがheader内に
収まる。header-contentsのheightはautoなので通常height:90%は
auto要素を参照できないはず。。。
今回同階層gridでナビ要素をmin-height:10vhとっている。
もしかしたらgridはナビのheight要素を参照しているのかも
結果オーライなんだけど */
position: absolute;
grid-row: 1 / 2;
grid-column: 1 / 2;
}
nav{
width: 100%;
min-height: 10vh;
position: static;
grid-row: 1 / 2;
grid-column: 3 / 4;
display: block;
background-color: rgba(0, 0, 0, 0);
}
nav ul{
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: right;
}
nav ul li{
display: inline;
margin-right: 2rem;
border-bottom: none;
}
nav a{
display: inline;
font-size: 2rem;
padding-left: 0;
}
}
/* PC用ここまで */
/* headerここまで */
javascript,jQuery
※以下のscriptがないとレスポンシブが行われません
<script>
$(function(){
//windowサイズが変化するごとにjQueryの動作を変更する判定
var timer = false;
var currentWidth = window.innerWidth;
$(window).resize(function() {
if (currentWidth == window.innerWidth) {
// ウインドウ横幅が変わっていないため処理をキャンセル。
// safariでリロードされる現象を防ぐ
return;
}else if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
location.reload();
}, 200);
});
//現在の画面サイズ
var winW = $(window).width();
//判定基準にしたい画面サイズ
var devW = 720;
if (winW <= devW) {
//720px以下の時の処理
$(document).on('click',function(e) {
if(!$(e.target).closest('.navigation').length) {
// ターゲット要素の外側をクリックした時の操作
$("nav").slideUp();
$(".nav-cover").slideUp();
} else {
// ターゲット要素をクリックした時の操作
$("nav").slideToggle();
$(".nav-cover").slideToggle();
}
});
//スマホ用navここまで
} else {
//720pxより大きい時の処理
//navをheaderの中に入れる
$("nav").insertAfter(".navigation");
//画面をクリックするとheaderが隠れる
$(document).on('click',function() {
$("header").slideToggle();
});
//上にスライドでheader出現
//下にスライドでheader隠れる
var startPos = 0,winScrollTop = 0;
$(window).on('scroll',function(){
winScrollTop = $(this).scrollTop();
if (winScrollTop > startPos) {
$('header:not(:animated)').slideUp();
} else {
$('header:not(:animated)').slideDown();
}
startPos = winScrollTop;
});
}
});
</script>
#footerテンプレート
コピペだけでフッターが完成します
<footer class="">
<div class="footer_youso"><img src="images/rei.jpg" alt="お店のロゴ">
<p class="">〒58s-45s54 住所xxxx-x</p>
<p>TEL：<a href="tel:000-1s34-5s78">000-1s34-5s78</a></p>
<p>MAIL：aaa@aaa.com</p>
</div>
<div class="site-info">
<i class="far fa-copyright" aria-hidden="true"></i>
<small>2020 omisenonamae</small>
</div>
</footer>
css
/* footerここから */
footer{
background-color: rgba(255, 255, 255, 1);
text-align:center;
font-size: 1.5rem;
}
footer a{
font-size: 1.5rem;
}
.footer_youso img{
height: 15rem;
}
/* footerここまで */
#コンテンツの詳細画面を表示する
コピペで使える詳細画面
コンテンツをクリックすると詳細画面が立ち上がります
商品紹介をより詳しくスマートに行うため作成
表示される項目：写真,タイトル,値段,説明文
※表示項目は正直なんでもいいです
適当にクラス名を変えてください
※説明文はスクロールできるので文字数制限なし
html
<!-- 詳細表示元になる要素です -->
<div class="assignment-source">
<img class="assignment-img" src="images/任意の画像" alt="">
<p class="assignment-title">タイトル</p>
<p class="assignment-price">値段</p>
<p class="assignment-text">説明文説明文説明文説明文説明文説明文</p>
</div>
<!-- 表示される詳細画面です -->
<div class="shosai">
<div class="shosai-contents">
<img class="shosai-logo" src="images/お店のロゴとかある場合" alt="ロゴ">
<img class="item-img" src="images/任意の画像" alt="">
<div class="scroll">
<p class="item-title">タイトルが代入される</p>
<p class="item-price">値段が代入される</p>
<p class="item-text">説明文が代入される</p>
</div>
</div>
</div>
<div class="shosai-out"></div>
css
/* モバイル用 */
.shosai{
display: none;
width: 80%;
height: 60vh;
position: fixed;
z-index: 999;
top:50%;
left:50%;
transform: translate(-50%,-50%);
background-color: #e8e8e8;
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}
.shosai-out{
/* 詳細画面外を任意の色で覆います */
display: none;
position: fixed;
top:0; left: 0;
width: 100vw;
height: 100vh;
z-index: 998;
/* 任意の色に変更 */
background-color: rgba(255, 255, 255, 0.3);
}
.shosai .shosai-contents{
position: relative;
width: 90%;
height: 100%;
margin: auto;
padding-top: 2rem;
padding-bottom: 2rem;
}
.shosai-logo{
/* 詳細画面にロゴとか入れたい人用
削除してOK */
position: absolute;
height: 15%;
bottom: 1%;
right: 1%;
opacity: 0.3;
}
.shosai .shosai-contents .item-img{
width: 100%;
height: 50%;
}
.scroll{
height: 50%;
overflow: scroll;
}
.assignment-text{
display: none;
}
.item-title{
font-size: 2rem;
}
.item-price{
color: #79036a;
margin-left: 0.3rem;
}
.item-text{
margin-left: 0.1rem;
}
/* デスクトップ,パッド用レスポンシブ */
@media (min-width: 720px){
.shosai{
display: none;
width: 40%;
height: 80vh;
position: fixed;
z-index: 999;
top:50%;
left:50%;
transform: translate(-50%,-50%);
background-color: #e8e8e8;
filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}
.shosai-out{
/* 詳細画面外を任意の色で覆います */
display: none;
position: fixed;
top:0; left: 0;
width: 100vw;
height: 100vh;
z-index: 998;
/* 任意の色に変更 */
background-color: rgba(255, 255, 255, 0.3);
}
.shosai .shosai-contents{
position: relative;
width: 95%;
height: 100%;
margin: auto;
padding-top: 2rem;
padding-bottom: 2rem;
}
.shosai-logo{
/* 詳細画面にロゴとか入れたい人用
削除してOK */
position: absolute;
height: 15%;
bottom: 10%;
right: 5%;
opacity: 0.3;
}
.shosai .shosai-contents .item-img{
width: 100%;
height: 55%;
}
.assignment-text{
display: none;
}
.scroll{
height: 45%;
overflow: scroll;
}
.item-title{
font-size: 2rem;
}
.item-price{
color: #79036a;
margin-left: 0.3rem;
}
.item-text{
margin-left: 0.1rem;
font-size: 1.3rem;
line-height: 1.5;
}
}
jQuery
$(function(){
//assignment-sourceクラスが付与されている要素をクリックすると
//詳細画面が開き、画像やテキストが代入されます
$(".assignment-source").on("click", function(){
$(".item-img").attr("src", $(this).find(".assignment-img").attr("src"));
$(".item-title").text($(this).find(".assignment-title").text());
$(".item-price").text($(this).find(".assignment-price").text());
$(".item-text").text($(this).find(".assignment-text").text());
$(".shosai").css("display","block");
$(".shosai-out").css("display","block");
});
//詳細画面外をクリックしたときに詳細画面を閉じます
$(".shosai-out").on("click",function() {
$(".shosai").css("display","none");
$(".shosai-out").css("display","none");
});
});
#タイトル画面テンプレート (bootstrap carousel)
bootstrapでタイトル画面を作る
(フェード機能 100vw 100vh)
<div class="vh-cover"></div>
<div id="title">
<div id="carouselExampleSlidesOnly" class="carousel slide carousel-fade" data-interval=3000 data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/rei.jpg" alt="">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/rei2.jpg" alt="">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/rei.jpg" alt="">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/rei2.jpg" alt="">
</div>
</div>
</div>
</div>
/* タイトル画面ここから */
#carouselExampleSlidesOnly{
position: fixed;
top: 0;
z-index: -1;
}
#title .carousel-item img{
width: 100vw;
height: 100vh;
}
.vh-cover{
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0);
}
/* タイトル画面ここまで */
#タイトル画面テンプレート (bxSlider)
コピペでタイトル画面を生成
html
<div class="title">
<div class="slider">
<div><img src="images/任意" alt=""></div>
<div><img src="images/任意" alt=""></div>
<div><img src="images/任意" alt=""></div>
<div><img src="images/任意" alt=""></div>
</div>
<img class="hitokoto" src="material/任意の一言" alt="一言">
<img class="logo" src="material/タイトル画面ロゴ" alt="タイトルロゴ">
</div>
css
/* titleここから */
.title{
position: relative;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, 0);
}
.title .hitokoto{
width: 100%;
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
filter: drop-shadow(2px 2px 2px rgba(0,0,0,1));
}
.title .logo{
width: 90%;
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
filter: drop-shadow(2px 2px 2px rgba(0,0,0,1));
}
/* スライダーここから */
.bx-wrapper {
position: fixed;
z-index: -1;
top: 0;
background-color: transparent;
margin: 0px auto 0px;
border: none;
box-shadow: none;
width: 100%;
height: 100%;
}
.bx-wrapper img {
display: block;
width: 100vw;
height: 100vh;
margin: 0px auto;
}
/* bsslider ページャーをスライダーの内側に収める */
.bx-wrapper .bx-controls-auto,
.bx-wrapper .bx-pager {
bottom: 20px;
}
/* スライダーここまで */
/* レスポンシブ対応 */
@media (min-width: 720px){
.title .hitokoto{
width: 60%;
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
filter: drop-shadow(2px 2px 2px rgba(0,0,0,1));
}
.title .logo{
width: auto;
height: 45%;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
filter: drop-shadow(2px 2px 2px rgba(0,0,0,1));
}
}
/* レスポンシブ対応ここまで */
/* titleここまで */
jQuery
$(".slider").bxSlider({
auto: true,
pause: 4000,
speed: 2000,
//一度に表示させる最大枚数
maxSlides: 1,
//タッチスワイプ許可設定
touchEnabled: true,
//タッチスワイプしたとみなす最低限の移動距離
swipeThreshold: 10,
//'full'はスライダーの数を黒点で、'short'はa/nで表示
pagerType: 'full',
// 画像の高さを自動調整
adaptiveHeight: true,
//コントロール表示
controls: false,
//スライドモード設定
mode: 'fade',
//スライド番号を表示する
pager: false
});
#bxSliderテンプレート
タイトル画面スライダーのテンプレート
html
<div class="top-empty"></div>
<div class="slider">
<div><img src="images/任意" alt=""></div>
<div><img src="images/任意" alt=""></div>
<div><img src="images/任意" alt=""></div>
<div><img src="images/任意" alt=""></div>
</div>
css
/* スライダーここから */
.top-empty{
/*透明の要素*/
background-color: rgba(0,0,0,0);
/* 重ねる範囲を指定 */
width: 100vw;
height: 100vh;
}
.bx-wrapper {
position: fixed;
z-index: -1;
top: 0;
background-color: transparent;
margin: 0px auto 0px;
border: none;
box-shadow: none;
width: 100vw;
height: 100vh;
}
.bx-wrapper img {
display: block;
width: 100vw;
height: 100vh;
margin: 0px auto;
}
/* bsslider ページャーをスライダーの内側に収める */
.bx-wrapper .bx-controls-auto,
.bx-wrapper .bx-pager {
bottom: 20px;
}
/* スライダーここまで */
jQuery
$(".slider").bxSlider({
auto: true,
pause: 4000,
speed: 2000,
//一度に表示させる最大枚数
maxSlides: 1,
//タッチスワイプ許可設定
touchEnabled: true,
//タッチスワイプしたとみなす最低限の移動距離
swipeThreshold: 10,
//'full'はスライダーの数を黒点で、'short'はa/nで表示
pagerType: 'full',
// 画像の高さを自動調整
adaptiveHeight: true,
//コントロール表示
controls: false,
//スライドモード設定
mode: 'fade',
//スライド番号を表示する
pager: false
});
#特定の要素を超えた時点でイベントを発生させるjQuery
ある位置まで画面をスクロールした場合、何かイベントを発生させることができる
//特定の位置までスクロールしたら背景画像を差し替える
var thisOffset;
$(window).on('load',function(){
thisOffset = $('#セレクタ').offset().top + $('#セレクタ').outerHeight();
});
$(window).scroll(function(){
if( $(window).scrollTop() + $(window).height() > thisOffset){
// 特定の要素を超えた場合のイベント
} else {
// 特定の要素を超えていないイベント
}
});
解説：$('#セレクタ').offset().top ⇒ ページTOPから特定要素までの高さ
$('#セレクタ').outerHeight() ⇒ 特製要素の持っている高さ
thisOffset ⇒ 上記2つの高さの和
$(window).scrollTop() ⇒ スクロールした数値(スクロールバーの位置)
$(window).height() ⇒ 現在表示されている画面全体の高さ
上記2つの和 > thisOffset のとき、イベント発動
#GoogleMapテンプレート
丁度良いサイズのマップ
html
<!-- グーグルマップ -->
<div class="gmap">
<iframe>任意のマップ</iframe>
</div>
css
.gmap {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.gmap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
#メールフォーム(Googleform)
googleformで作ったメールフォームをスライドで表示・非表示
<p id="mailform">MAIL +</p>
<div class="googleform">
<iframe>googleformをブチ込んで</iframe>
</div>
css
.googleform{
display: none;
text-align: center;
}
.googleform iframe{
max-width: 100%;
}
jquery
$(function(){
//メールフォームの出現
$("#mailform").on("click",function() {
$(".googleform").slideToggle();
});
});
#インスタ情報の取得
html
<script src="assets/script.js">
javascript
/* instagram */
$(function () {
try {
// インスタのIDを入れようね
this.name = "via_jpn";
$.ajax('https://www.instagram.com/' + this.name + '/', {
timeout: 2000,
datatype: 'html'
}).then(function (data) {
json_string = data.split("window._sharedData = ")[1];
json_string = json_string.split("};</script>")[0] + "}";
this.Arrya_data = JSON.parse(json_string);
let datas = this.Arrya_data.entry_data.ProfilePage[0].graphql.user.edge_owner_to_timeline_media.edges;
for (i in datas) {
// 画像URL取得
var url = datas[i].node.display_url;
// テキスト取得
var text = datas[i].node.edge_media_to_caption.edges[0].node.text;
this.html = `
<div class="cardImgWrp p-3">
<img src="${url}">
<p>${text}</p>
</div>
`;
$(".insta-card").append(this.html);
}
});
} catch (error) {
alert(error);
}
})
#インスタ情報を取得してスライド表示にする
bootstrapのカルーセルを使う(動作が非常に軽いため)
bootstrapのスタートアップは済んでいるものとする。
<div id="carouselExampleControls" class="carousel slide contents" data-ride="carousel">
<div class="carousel-inner insta-card"></div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
/* インスタスライダーここから */
.clr-news{
background-color: #ffdee6;
}
#toziru{
display: none;
}
.sinchaku-item{
height: 70vh;
position: relative;
}
.sinchaku-item img{
height: 50%;
}
.sinchaku-item .carousel-caption{
height: 40%;
overflow: scroll;
position: absolute;
transform: translateX(-50%);
bottom: 0;
left: 50%;
}
/* インスタスライダーここまで */
// instagram
$(function () {
try {
// インスタのIDを入れようね
this.name = "via_jpn";
$.ajax('https://www.instagram.com/' + this.name + '/', {
timeout: 2000,
datatype: 'html'
}).then(function (data) {
json_string = data.split("window._sharedData = ")[1];
json_string = json_string.split("};</script>")[0] + "}";
this.Arrya_data = JSON.parse(json_string);
let datas = this.Arrya_data.entry_data.ProfilePage[0].graphql.user.edge_owner_to_timeline_media.edges;
for (i in datas) {
// 画像URL取得
var url = datas[i].node.display_url;
// テキスト取得
var text = datas[i].node.edge_media_to_caption.edges[0].node.text;
this.html = `
<div class="carousel-item sinchaku-item">
<img class="d-block w-100" src="${url}" alt="First slide">
<div class="carousel-caption d-md-block w-100">
<p class="clr-black">${text}</p>
</div>
</div>
`;
$(".insta-card").append(this.html);
}
});
} catch (error) {
alert(error);
}
});
//マウスが動いたらインスタスライダーをアクティブに！
$(window).one('scroll',function(){
$(".carousel-item:first-of-type").addClass("active");
});
#inviewJSを使って動きのあるWEBサイトにする
特定の要素がウィンドウに表示されたらイベント発動
ソースコードを以下リンクよりいただきました
参考：inviewJS
jquery.inview.min.jsをHTMLの任意の場所で読み込むことでinviewが使用可能
jQuery
$(function(){
$('#セレクタ').on('inview', function() {
//ブラウザの表示域に特定要素が来たときの処理
});
});
#コンテンツをスライド表示する
画面をスクロールすると、特定の位置に来た時にコンテンツが浮かび上がる表示を実現する
・inviewJSを使用し、特定の位置に来た時に動きを発動させる
・cssで非表示状態から表示させる
<div class="main">
<div class="a"></div>
<div class="b">
<img src="images/pic1.jpg" alt="">
<img src="images/pic1.jpg" alt="">
<img src="images/pic1.jpg" alt="">
<img src="images/pic1.jpg" alt="">
<img src="images/pic1.jpg" alt="">
<img src="images/pic1.jpg" alt="">
</div>
</div>
.a{
width: 100%;
height: 100vh;
}
/* 要素を隠しておく */
.b img{
margin-top: 100px;
opacity: 0;
/* アニメーションの時間 */
transition: 1.2s;
}
/* 要素の登場 */
.showUp {
opacity: 1 !important;
margin-top: 0 !important;
}
$(function(){
//特定要素の位置まで画面がスクロールされたら
$('.b img').on('inview', function() {
//ブラウザの表示域に表示されたときに実行する処理
if($(this).css("opacity") == "0"){
//if条件がないと、何度でもスライド表示を繰り返してしまう
$(this).toggleClass('showUp');
}
});
});
#要素をゆっくりスライドして表示させる
toggleClassを使用して時間差で表示させる
html
<div class="youkoso"><p>sample</p></div>
css
.youkoso{
margin-top: 100px;
opacity: 0;
transition: 1.5s;
}
.showUp {
opacity: 1;
margin-top: 0;
}
jQuery
$('.youkoso').toggleClass('showUp');
#ローディング画面の作成
html
<!-- ローディングメーターの生成 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/black/pace-theme-center-circle.min.css" />
<!-- ローディング画面の生成 -->
<div id="loading-window"></div>
css
/*ローディング画面ここから*/
#loading-window{
background-color: #fbbdcc; /* 任意の色 */
position: fixed;
top: 0;
height: 100vh;
width: 100%;
z-index: 999;
}
/*ローディング画面ここまで*/
jQuery
//ローディングが終わってからサイトを表示
Pace.on('done', function(){
$("#loading-window").fadeOut();
});