JS | イセンチュートリアルサイト

カテゴリーページ

カテゴリ別に画像を並び替える

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
<link rel="stylesheet" type="text/css" href="css/6-2-2.css">

body内のギャラリーを表示させたい場所にHTMLを記載します。
ボタンの<li>についたクラス名と、画像を内包する<li>のクラス名が一致した要素を表示させます。

<ul class="sort-btn">
	<li class="sort00 active">全て</li><!--はじめに「全て」ボタンに現在地表示をつけるためactive というクラス名を付与-->
	<li class="sort01">グループ1</li>
	<li class="sort02">グループ2</li>
	<li class="sort03">グループ3</li>
</ul>

<ul class="grid"><!--1番外側のタグにgrid というクラス名を付与。-->
	<li class="item sort01"><!--li には、item というクラス名と並び替え基準となるクラス名（ボタンのクラス名と同じ名前）を付与。-->
		<div class="item-content"><!--内側のdivには高さを維持するためにitem-contentというクラス名をつける。-->
			<a href="img/01.jpg" data-fancybox="group1" data-caption="グループ1キャプション"><img src="img/01.jpg" alt=""></a><!--複数画像をグループ化してサムネ
イル表示させたい場合は、datafancybox="半角英数字で同一のグループ名"、キャプションを入れたい場合はdata-caption="キャプションタイトル"を設定する。-->
		</div>
	</li>
	<li class="item sort02">
		<div class="item-content">
			<a href="img/02.jpg" data-fancybox="group2" data-caption="グループ2キャプション"><img src="img/02.jpg" alt=""></a>
		</div>
	</li>
	<li class="item sort03">
		<div class="item-content">
			<a href="img/03.jpg" data-fancybox="group3" data-caption="グループ3キャプション"><img src="img/03.jpg" alt=""></a>
		</div>
	</li>
</ul>

body 終了タグ直前に jQuery、Muuri で必要なJavaScript、Muuri、fancybox、動きを制御する自作のJS の5 つを読み込みます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/web-animations-js@2.3.2/web-animations.min.js"></script>
<script src="https://unpkg.com/muuri@0.8.0/dist/muuri.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<!--自作のJS-->
<script src="js/6-2-2.js"></script>

CSSの書き方

/*==================================================
ギャラリーのためのcss
===================================*/
/*＝＝＝並び替えボタンのCSS*/
.sort-btn{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding:50px 20px;
}

.sort-btn li{
	background:#eee;
	list-style:none;
	border-radius:10px;
	cursor: pointer;
	padding: 10px;
	margin:0 10px;
}

.sort-btn li.active{/*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
	background:#ccc;	
}

/*横幅が480px以下になった際の指定*/
@media only screen and (max-width: 480px) {
	.sort-btn{
		justify-content: space-between;
	}
	
	.sort-btn li{
		width:48%;
		margin:0 0 10px 0;
		text-align:center;
	}	
}

/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
	position: relative;/*並び替えの基準点を指定*/
}

/*各画像の横幅などの設定*/
.item {
	display: block;
	position: absolute;
	width: 33%;/*横並びで3つ表示*/
	z-index: 1;
	list-style:none;
}

/*内側のボックスの高さが崩れないように維持*/
.item-content {
	position: relative;
	width: 100%;
	height: 100%;
}

/*画像の横幅を100%にしてレスポンシブ化*/
.grid img{
	width:100%;
	height:auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {
	.item {
		width: 49.5%;/*横並びで2つ表示*/
	}
}

/*＝＝＝fancyboxサムネイル背景と画像選択時の枠線の指定*/
.fancybox-thumbs {
	background: transparent!important;
}

.fancybox-thumbs__list a:before {
	border: 6px solid #FA999B;
}

JSの書き方

$(window).on('load',function(){ //画面遷移時にギャラリーの画像が被らないように、すべての読み込みが終わった後に実行する

	//＝＝＝Muuriギャラリープラグイン設定
	var grid = new Muuri('.grid', {

		//アイテムの表示速度※オプション。入れなくても動作します
		showDuration: 600,
		showEasing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
		hideDuration: 600,
		hideEasing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
	
		// アイテムの表示/非表示状態のスタイル※オプション。入れなくても動作します
		visibleStyles: {
			opacity: '1',
			transform: 'scale(1)'
		},
		hiddenStyles: {
			opacity: '0',
			transform: 'scale(0.5)'
		}    
	});

	//＝＝＝並び替えボタン設定
	$('.sort-btn li').on('click',function(){ //並び替えボタンをクリックしたら
		$(".sort-btn .active").removeClass("active"); //並び替えボタンに付与されているactiveクラスを全て取り除き
		var className = $(this).attr("class"); //クラス名を取得
		className = className.split(' '); //「sortXX active」のクラス名を分割して配列にする
		$("."+className[0]).addClass("active"); //並び替えボタンに付与されているクラス名とギャラリー内のリストのクラス名が同じボタンにactiveクラスを付与
		if(className[0] == "sort00"){ //クラス名がsort00（全て）のボタンの場合は、
			grid.show(''); //全ての要素を出す
		} else { //それ以外の場合は
			grid.filter("."+className[0]); //フィルターを実行
		}
	});

	//＝＝＝ Fancyboxの設定
	$('[data-fancybox]').fancybox({
		thumbs: {
			autoStart: true, //グループのサムネイル一覧をデフォルトで出す。不必要であればfalseに
		},	
	});	
});

投稿日：2022年07月28日

複数の画像を一覧で見せる

カテゴリー：ギャラリー

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css" />
<link rel="stylesheet" type="text/css" href="css/6-2-1.css">

body 内のギャラリーを表示させたい場所にHTML を記載します。
画像をリンクする<a>タグにdata-lightbox=”半角英数字で名前”をつけると、背景が暗くなって画像が出てくる仕様になります。

複数画像をグループ化したい場合は、data-lightbox=” 半角英数字で同一のグループ名”、
キャプションを入れたい場合はdatatitle=”キャプションタイトル”を設定してください。

<ul class="gallery">
	<li><a href="img/01.jpg" data-lightbox="gallery1" data-title="キャプション"><img src="img/01.jpg" alt=""></a></li>
	<li><a href="img/02.jpg" data-lightbox="gallery1" data-title="キャプション"><img src="img/02.jpg" alt=""></a></li>
	<li><a href="img/03.jpg" data-lightbox="gallery1" data-title="キャプション"><img src="img/03.jpg" alt=""></a></li>
	<li><a href="img/04.jpg" data-lightbox="gallery1" data-title="キャプション"><img src="img/04.jpg" alt=""></a></li>
</ul>

body 終了タグ直前に jQuery、Lighbox、動きを制御する自作のJS （任意）の3 つを読み込みます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox.min.js"></script>
<!--自作のJS-->
<script src="js/6-2-1.js"></script>

CSSの書き方

/*==================================================
ギャラリーのためのcss
===================================*/
.gallery{
	columns: 4;/*段組みの数*/
	padding:0 15px;/*ギャラリー左右に余白をつける*/
	margin:0;
}

.gallery li {
	margin-bottom: 20px;/*各画像下に余白をつける*/
	list-style:none;
}

/*ギャラリー内のイメージは横幅100%にする*/
.gallery img{
	width:100%;
	height:auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*横幅900px以下の段組み設定*/
@media only screen and (max-width: 900px) {
	.gallery{
		columns:3;
	}	
}

@media only screen and (max-width: 768px) {
	.gallery{
		columns: 2;
	}	
}

JSの書き方
※下記は任意の設定です。書かなくても動作します。

//lightbox オプションの設定※https://lokeshdhakar.com/projects/lightbox2/#options参照
lightbox.option({
'wrapAround': true,//グループ最後の写真の矢印をクリックしたらグループ最初の写真に戻る
'albumLabel': ' %1 / total %2 '//合計枚数中現在何枚目かというキャプションの見せ方を変更できる
})

投稿日：2022年07月28日

追従するヘッダー分の高さを引いて適切な場所へスクロール

カテゴリー：ページ内リンク

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/8-2-2.css">

body内にHeaderと、リンク元、リンク先のHTMLを記載します。

<header id="header">
	<h1>Logo</h1>
</header>

<ul id="page-link">
	<li><a href="#area-1">Area 1</a></li>
	<li><a href="#area-2">Area 2</a></li>
</ul>

<section id="area-1">
	<h2>タイトル</h2>
	<p>内容</p>
</section>

<section id="area-2">
	<h2>タイトル</h2>
	<p>内容</p>
</section>

body 終了タグ直前に jQuery、動きを制御する自作のJS の2 つを読み込みます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!--自作のJS-->
<script src="js/8-2-2.js"></script>

CSSの書き方

/*== ヘッダー追従のためのCSS */
#header{
	position: fixed;/*追従ナビのためpositionをfixedにする*/
	top:0;/*ポジション設定topを0*/
	height: 70px;/*headerの高さを指定*/
	width:100%;/*position:fixed;にしたため、横幅100%を設定*/
	background:#333;
	color:#fff;
	text-align: center;
	padding: 20px;
}

/*検証のためのCSS*/
section{
	padding: 500px 0;
}

#page-link{
	padding-top: 100px;
}

JSの書き方

$('#page-link a[href*="#"]').click(function () {//全てのページ内リンクに適用させたい場合はa[href*="#"]のみでもOK
	var elmHash = $(this).attr('href'); //ページ内リンクのHTMLタグhrefから、リンクされているエリアidの値を取得
	var pos = $(elmHash).offset().top-70;//idの上部の距離からHeaderの高さを引いた値を取得
	$('body,html').animate({scrollTop: pos}, 500); //取得した位置にスクロール。500の数値が大きくなるほどゆっくりスクロール
	return false;
});

投稿日：2022年07月21日

ページ内の指定の場所にスクロール

カテゴリー：ページ内リンク

HTMLの書き方

body内にリンク元のHTMLとリンク先のHTMLを記載します。

<ul id="page-link">
	<li><a href="#area-1">Area 1</a></li>
	<li><a href="#area-2">Area 2</a></li>
</ul>

<section id="area-1">
	<h2>タイトル</h2>
	<p>内容</p>
</section>

<section id="area-2">
	<h2>タイトル</h2>
	<p>内容</p>
</section>

body 終了タグ直前に jQuery、動きを制御する自作のJS の2 つを読み込みます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!--自作のJS-->
<script src="js/8-2-1.js"></script>

JSの書き方

$('#page-link a[href*="#"]').click(function () {//全てのページ内リンクに適用させたい場合はa[href*="#"]のみでもOK
	var elmHash = $(this).attr('href'); //ページ内リンクのHTMLタグhrefから、リンクされているエリアidの値を取得
	var pos = $(elmHash).offset().top;	//idの上部の距離を取得
	$('body,html').animate({scrollTop: pos}, 500); //取得した位置にスクロール。500の数値が大きくなるほどゆっくりスクロール
	return false;
});

投稿日：2022年07月21日

任意の場所をクリックすると隠れていた内容が開き、先に開いていた内容が閉じる

カテゴリー：アコーディオンパネル

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/9-2-2.css">

body内にアコーディオンのHTMLを記載します。

<ul class="accordion-area">
	<li><!--li ~ /li までが一つのアコーディオン-->
		<section>
			<h3 class="title">タイトル</h3>
			<div class="box">
				<p>内容が入ります。</p>
			</div>
		</section>
	</li>
	<li>
		<section>
			<h3 class="title">タイトル</h3>
			<div class="box">
				<p>内容が入ります。</p>
			</div>
		</section>
	</li>
</ul>

body 終了タグ直前に jQuery、動きを制御する自作のJS の2 つを読み込みます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!--自作のJS-->
<script src="js/9-2-2.js"></script>

CSSの書き方

/*アコーディオン全体*/
.accordion-area{
	list-style: none;
	width: 96%;
	max-width: 900px;
	margin:0 auto;
}

.accordion-area li{
	margin: 10px 0;
}

.accordion-area section {
	border: 1px solid #ccc;
}

/*アコーディオンタイトル*/
.title {
	position: relative;/*+マークの位置基準とするためrelative指定*/
	cursor: pointer;
	font-size:1rem;
	font-weight: normal;
	padding: 3% 3% 3% 50px;
	transition: all .5s ease;
}

/*アイコンの＋と×*/
.title::before,
.title::after{
	position: absolute;
	content:'';
	width: 15px;
	height: 2px;
	background-color: #333;
}

.title::before{
	top:48%;
	left: 15px;
	transform: rotate(0deg);
}

.title::after{    
	top:48%;
	left: 15px;
	transform: rotate(90deg);
}

/*　closeというクラスがついたら形状変化　*/
.title.close::before{
	transform: rotate(45deg);
}

.title.close::after{
	transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
	display: none;/*はじめは非表示*/
	background: #f3f3f3;
	margin:0 3% 3% 3%;
	padding: 3%;
}

JSの書き方

//アコーディオンをクリックした時の動作
$('.title').on('click', function() {//タイトル要素をクリックしたら
	$('.box').slideUp(500);//クラス名.boxがついたすべてのアコーディオンを閉じる
	var findElm = $(this).next(".box");//タイトル直後のアコーディオンを行うエリアを取得
	if($(this).hasClass('close')){//タイトル要素にクラス名closeがあれば
		$(this).removeClass('close');//クラス名を除去    
	}else{//それ以外は
		$('.close').removeClass('close'); //クラス名closeを全て除去した後
		$(this).addClass('close');//クリックしたタイトルにクラス名closeを付与し
		$(findElm).slideDown(500);//アコーディオンを開く
	}
});

//ページが読み込まれた際にopenクラスをつけ、openがついていたら開く動作※不必要なら下記全て削除
$(window).on('load', function(){
	$('.accordion-area li:first-of-type section').addClass("open"); //accordion-areaのはじめのliにあるsectionにopenクラスを追加
	$(".open").each(function(index, element){	//openクラスを取得
		var Title =$(element).children('.title');	//openクラスの子要素のtitleクラスを取得
		$(Title).addClass('close');				///タイトルにクラス名closeを付与し
		var Box =$(element).children('.box');	//openクラスの子要素boxクラスを取得
		$(Box).slideDown(500);					//アコーディオンを開く
	});
});

投稿日：2022年07月21日

JS

カテゴリーページ

カテゴリ別に画像を並び替える

複数の画像を一覧で見せる

追従するヘッダー分の高さを引いて適切な場所へスクロール

ページ内の指定の場所にスクロール

任意の場所をクリックすると隠れていた内容が開き、先に開いていた内容が閉じる

アーカイブ