JavaScriptライブラリ1
使用頻度高めのJavaScriptライブラリ集です。
基本ルール
- 使用しないライブラリは記述しない、読み込まない！
- サイト共通で使用するライブラリは/js/libs.jsに記述する。
- ページ固有で使用するライブラリは、使用するページのみで読み込む。
- ページ固有で使用するJSの設定は、使用するページのみに記述する（setting.jsに記述しない）。
- 初期設定のCSSはstructure.cssに記述する。
- カスタマイズ用のCSSはpage.cssに記述する。
カルーセルスライダー1
slickを使用したカルーセルスライダー。
サンプル
HTML
<ul class="Slider">
<li><a href="/"><img src="/img/__DAMMY/Dammy_Photo1.jpg" alt=""></a></li>
<li><a href="/"><img src="/img/__DAMMY/Dammy_Photo2.jpg" alt=""></a></li>
<li><a href="/"><img src="/img/__DAMMY/Dammy_Photo3.jpg" alt=""></a></li>
<li><a href="/"><img src="/img/__DAMMY/Dammy_Photo4.jpg" alt=""></a></li>
<li><a href="/"><img src="/img/__DAMMY/Dammy_Photo5.jpg" alt=""></a></li>
<li><a href="/"><img src="/img/__DAMMY/Dammy_Photo6.jpg" alt=""></a></li>
</ul>
CSS：前後ボタン、ページネーションのカスタマイズ（/css/__css_libs/slick_setting.css）
/* slick カスタマイズ --------------------------------------------------- */
/* 読み込み時のレイアウトずれ対策 */
.Slider > li:not(:first-child) {
display: none;
}
/* 前後ボタン */
.slick-prev,
.slick-next {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
z-index: 10;
border-radius: 100vh;
text-indent: -9999px;
background-color: rgba(0,0,0,0.5);
cursor: pointer;
}
.slick-prev-arrow,
.slick-next-arrow {
display: block;
border-color: #fff;
border-top-style: solid;
border-right-style: solid;
}
.slick-prev-arrow {
transform: rotate(225deg);
}
.slick-next-arrow {
transform: rotate(45deg);
}
.slick-disabled {
opacity: 0.2;
cursor: default;
}
/* ページネーション */
.slick-dots {
display: block;
position: absolute;
width: 100%;
text-align: center;
}
.slick-dots li {
display: inline-block;
position: relative;
border: 1px solid #c7c7c7;
border-radius: 100vh;
text-indent: -9999px;
cursor: pointer;
}
@media only screen and (max-width: 767px) {
.Slider {
margin-top: var(--gap-int);
margin-bottom: 6rem;
}
/* スライド間の余白：centerModeを使用する場合 */
.Slider .slick-slide {
margin: 0 0.2rem;
}
/* 前後ボタン */
.slick-prev,
.slick-next {
bottom: -4rem;
width: 3rem;
height: 3rem;
margin-top: -1.5rem;
}
.slick-prev {
left: 0;
padding-left: 0.5rem;
}
.slick-next {
right: 0;
padding-right: 0.5rem;
}
.slick-prev-arrow,
.slick-next-arrow {
width: 1rem;
height: 1rem;
border-top-width: 1px;
border-right-width: 1px;
}
/* ページネーション */
.slick-dots {
bottom: -3.75rem;
}
.slick-dots li {
width: 1rem;
height: 1rem;
margin: 0 0.5rem;
}
.slick-dots .slick-active {
background-color: #c7c7c7;
}
}
@media print, screen and (min-width: 768px) {
.Slider {
margin-top: var(--gap-int);
}
/* 前後ボタン */
.slick-prev,
.slick-next {
top: 50%;
width: 6rem;
height: 6rem;
margin-top: -3rem;
}
.slick-prev {
left: 2rem;
padding-left: 1rem;
}
.slick-next {
right: 2rem;
padding-right: 1rem;
}
.slick-prev-arrow,
.slick-next-arrow {
width: 2rem;
height: 2rem;
border-top-width: 2px;
border-right-width: 2px;
}
/* ページネーション */
.slick-dots {
bottom: 2rem;
}
.slick-dots li {
width: 1rem;
height: 1rem;
margin: 0 0.5rem;
}
.slick-dots .slick-active {
background-color: #fff;
}
}
- 別途、初期設定のCSSが必要（/css/__css_libs/slick_int.css）。本サイトではstructure.cssに記述済み。
JS設定
$(function(){
// slick設定
$('.Slider').slick({
fade: false,
autoplay: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
dots: true,
speed: 1000,
autoplaySpeed: 3000,
pauseOnFocus: false,
pauseOnHover: false,
pauseOnDotsHover: false,
prevArrow: '<div class="slick-prev"><span class="slick-prev-arrow"></span></div>', // 前後ボタン：前
nextArrow: '<div class="slick-next"><span class="slick-next-arrow"></span></div>', // 前後ボタン：後
responsive: [
{
breakpoint: 767,
settings: {
centerMode: true,
centerPadding: '8%',
}
}
]
});
});
- 別途、初期設定のJSが必要（/js/__js_libs/slick.min.js）。本サイトではlibs.jsに記述済み。
モーダル1
Modaalを使用したモーダルウィンドウ。
カスタマイズに難がありますが、基本そのまま使う前提であれば、そこそこ使えるレベル。
ギャラリー
HTML
<a class="ModalImage" data-group="gallery" href="/img/__DAMMY/Dammy_Photo1.jpg"><img src="/img/__DAMMY/Dammy_Photo1.jpg" alt=""></a>
<a class="ModalImage" data-group="gallery" href="/img/__DAMMY/Dammy_Photo2.jpg"><img src="/img/__DAMMY/Dammy_Photo2.jpg" alt=""></a>
<a class="ModalImage" data-group="gallery" href="/img/__DAMMY/Dammy_Photo3.jpg"><img src="/img/__DAMMY/Dammy_Photo3.jpg" alt=""></a>
- data-groupを設定するとギャラリー表示になります。
CSS（/css/__css_libs/modaal_settng.css）
/* Modaal カスタマイズ --------------------------------------------------- */
/*
種類別class名
modaal-inline, modaal-image, modaal-video, modaal-ajax, modaal-confirm, modaal-iframe
modaal-fullscreen
*/
/* オーバーレイ */
.modaal-overlay {
z-index: 10000;
background-color: rgba(0,0,0,0.6) !important;
}
/* モーダル全体の囲み */
.modaal-wrapper {
z-index: 10001;
}
/* 画像：横幅 */
.modaal-image .modaal-container,
.modaal-image .modaal-container img {
max-width: 100rem !important;
}
/* 動画：横幅 */
.modaal-video-wrap {
max-width: 100rem;
margin: 0 auto;
}
/* 動画：調整（display: tableによる不要な上下の余白を解消） */
.modaal-video .modaal-outer-wrapper {
display: flex;
align-items: center;
}
.modaal-video .modaal-inner-wrapper {
height: auto;
}
/* 動画：調整（左右の背景を押しても閉じないバグを解消） */
.modaal-video-container {
max-width: 100%;
padding-top: 56.25%;
padding-bottom: 0;
}
/* 閉じるボタン */
.modaal-close {
background-color: #fff !important;
}
.modaal-fullscreen .modaal-close {
background-color: #000 !important;
}
.modaal-close::before,
.modaal-close::after,
.modaal-close:focus::before,
.modaal-close:focus::after,
.modaal-close:hover::before,
.modaal-close:hover::after {
background-color: #000 !important;
}
.modaal-fullscreen .modaal-close::before,
.modaal-fullscreen .modaal-close::after,
.modaal-fullscreen .modaal-close:focus::before,
.modaal-fullscreen .modaal-close:focus::after,
.modaal-fullscreen .modaal-close:hover::before,
.modaal-fullscreen .modaal-close:hover::after {
background-color: #fff !important;
}
@media only screen and (max-width: 767px) {
/* コンテンツ領域のpadding */
.modaal-content-container {
padding: 2rem;
}
/* inlineとAjaxの高さ */
.modaal-inline:not(.modaal-fullscreen) .modaal-content-container,
.modaal-ajax .modaal-content-container {
height: 50rem;
overflow: scroll;
}
}
@media print, screen and (min-width: 768px) {
/* inlineとAjaxの横幅と高さ */
.modaal-inline:not(.modaal-fullscreen) .modaal-content-container,
.modaal-ajax:not(.modaal-fullscreen) .modaal-content-container {
max-width: 100rem;
height: 60rem;
overflow: scroll;
}
}
@media print, screen and (max-height: 700px) {
/* inlineとAjaxの横幅と高さ */
.modaal-inline:not(.modaal-fullscreen) .modaal-content-container,
.modaal-ajax:not(.modaal-fullscreen) .modaal-content-container {
height: 50rem;
}
}
- 別途、初期設定のCSSが必要（/css/__css_libs/modaal_int.css）。本サイトではstructure.cssに記述済み。
JS設定
$(function(){
// modaal設定：イメージ
$('.ModalImage').modaal({
type: 'image', // inline image video ajax iframe confirm instagram
animation_speed: 150, // アニメーション速度
});
});
- 別途、初期設定のJSが必要（/js/__js_libs/modaal.min.js）。本サイトではlibs.jsに記述済み。
動画
HTML
<a class="ModalVideo LinkFwd" href="https://www.youtube.com/embed/64eIdY9GQN4?rel=0">動画を表示</a>
CSS
ギャラリーの内容と共通
JS設定
$(function(){
// modaal設定：動画
$('.ModalVideo').modaal({
type: 'video', // inline image video ajax iframe confirm instagram
animation_speed: 150, // アニメーション速度
});
});
フルスクリーン
晩ごはんのおかず
厚揚げ、アンチョビ入りポテトサラダ、きゅうりと中華クラゲの和え物
木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。
日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたつて自由のもたらす恵沢を確保し、政府の行為によつて再び戦争の惨禍。
一貫性があること
木曾路はすべて山の中である。あるところは岨づたいに行く崖の道であり、あるところは数十間の深さに臨む木曾川の岸であり、あるところは山の尾をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。
日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたつて自由のもたらす恵沢を確保し、政府の行為によつて再び戦争の惨禍。
HTML
<a class="ModalFull LinkFwd" href="#SampleFullScreen1">フルスクリーンを表示</a>
CSS
ギャラリーの内容と共通
JS設定
$(function(){
// modaal設定：フルスクリーン
$('.ModalFull').modaal({
type: 'inline', // inline image video ajax iframe confirm instagram
animation_speed: 150, // アニメーション速度
fullscreen: true, // フルスクリーン
});
});
- fullscreen: trueを削除（またはfalse）にすれば、フルスクリーンではない通常のinline表示になります。
Ajax
HTML
<a class="ModalAjax LinkFwd" href="./_sample_ajax.html">Ajaxを表示</a>
CSS
ギャラリーの内容と共通
JS設定
$(function(){
// modaal設定：Ajax
$('.ModalAjax').modaal({
type: 'ajax', // inline image video ajax iframe confirm instagram
animation_speed: 150, // アニメーション速度
});
});
アコーディオンメニュー
要素の形態に依存しない、汎用性の高いアコーディオンメニューです。
サンプル
Q&Aの場合のサンプルです。
好きな食べものはなんですか？
厚揚げ、ポテトサラダ、黒ラベル。
嫌いな食べものなんですか？嫌いな食べものなんですか？嫌いな食べものなんですか？嫌いな食べものなんですか？嫌いな食べものなんですか？嫌いな食べものなんですか？
レーズンレーズンレーズンレーズンレーズンレーズンレーズンレーズンレーズンレーズンレーズンレーズンレーズンレーズンレーズンレーズンレーズンレーズンレーズンレーズンレーズンレーズン
HTML
<div class="QA">
<!-- * -->
<div class="QA_Unit">
<a href="javascript:void(0);" class="QA_Q AccoBtn LinkIconPlus">好きな食べものはなんですか？</a>
<div class="QA_A AccoTarget">
<p class="QA_Lead">厚揚げ、ポテトサラダ、黒ラベル。</p>
</div>
</div>
</div>
CSS
/* Q&A --------------------------------------------------- */
.QA {
margin-top: var(--gap-int);
}
.QA_Unit {
border: 1px solid var(--color-sub4);
}
.QA_Q {
font-weight: 700;
}
.QA_Q.Current {
background-color: var(--color-sub5);
}
@media only screen and (max-width: 767px) {
.QA_Unit {
margin-top: 1rem;
}
.QA_Q {
padding: 1.5rem 4rem 1.5rem 1.5rem;
line-height: 1.7;
}
.QA_A {
padding: 1.5rem 1.5rem;
line-height: 1.7;
}
}
@media print, screen and (min-width: 768px) {
.QA_Unit {
margin-top: 1rem;
}
.QA_Q {
padding: 2rem 6rem 2rem 2rem;
line-height: 1.8;
}
.QA_A {
padding: 2rem 2rem;
line-height: 1.8;
}
}
- 別途、初期設定のCSSが必要（/css/__css_libs/_tabmenu_int.css）。本サイトではstructure.cssに記述済み。
JS設定（/js/__js_libs/_accordion.js）
$(function(){
// アコーディオン
var $accoBtn = $('.AccoBtn'),
$accoTarget = $('.AccoTarget');
$accoBtn.click(function(){
var index = $accoBtn.index(this);
$accoTarget.eq(index).slideToggle(300);
$(this).toggleClass('Current');
});
});
タブメニュー（with cookie）
最後の押したタブをcookieで保存するタブメニューです。
サンプル
HTML
<ul class="TabMenuList" id="TabMenu">
<li><a class="Current" href="javascript:void(0);">厚揚げ</a></li>
<li><a href="javascript:void(0);">ポテトサラダ</a></li>
<li><a href="javascript:void(0);">黒ラベル</a></li>
</ul>
<div class="TabContentsList" id="TabContents">
<div class="TabContent Current">厚揚げ</div>
<div class="TabContent">ポテトサラダ</div>
<div class="TabContent">黒ラベル公式サイト</div>
</div>
CSS
/* タブメニュー --------------------------------------------------- */
/* タブ */
.TabMenuList {
display: flex;
margin-top: var(--gap-int);
border-bottom: 1px solid var(--color-sub4);
}
.TabMenuList li {
margin-right: 0.2rem;
}
.TabMenuList a {
display: block;
border: 1px solid var(--color-sub4);
border-bottom: none;
border-radius: 0.5rem 0.5rem 0 0;
color: #000;
}
.TabMenuList a.Current {
background-color: var(--color-sub5);
}
/* コンテンツ */
.TabContentsList {
margin-top: var(--gap-int);
}
@media only screen and (max-width: 767px) {
/* タブ */
.TabMenuList a {
padding: 1.25rem 1rem;
}
}
@media print, screen and (min-width: 768px) {
/* タブ */
.TabMenuList a {
padding: 1rem 1rem;
}
}
- 別途、初期設定のCSSが必要（/css/__css_libs/_accordion.css）。本サイトではstructure.cssに記述済み。
JS設定（/js/__js_libs/_tabmenu.js）
$(function(){
// タブメニュー（with cookie）Original Source: http://php.o0o0.jp/article/jquery-cookie_tab
var index = 0,
$TabMenu = $('#TabMenu a'),
$TabContents = $('#TabContents .TabContent');
// cookie処理：indexを取得し読み込み時にオープンする
if ($.cookie('index')) {
index = $.cookie('index');
$TabMenu.removeClass('Current').eq(index).addClass('Current');
$TabContents.hide().eq(index).show();
}
$TabMenu.click(function() {
if (index != $TabMenu.index(this)) {
index = $TabMenu.index(this);
// タブの内容
$TabContents.hide().eq(index).fadeIn(300);
// タブ
$TabMenu.removeClass('Current').eq(index).addClass('Current');
// cookieをセット
$.cookie('index', index, {expires:1, path:"/"});
}
});
});
- 別途、cookieのJSが必要（/js/__js_libs/jquery.cookie.min.js）。本サイトではlibs.jsに記述済み。
ソートメニュー（with cookie）
最後の押したタグをcookieで保存するソートメニューです。
classを複数設定すればor検索も可能です。
サンプル
- 厚揚げはおいしい
- ポテトサラダはおいしい
- 黒ラベルはおいしい
- 厚揚げはうまい
- ポテトサラダはうまい
- 黒ラベルはうまい
- 厚揚げは最高
- ポテトサラダは最高
- 黒ラベルは最高
- 厚揚げと黒ラベルは超最高
HTML
<ul class="SortMenuList" id="SortMenu">
<li><a class="Sort_All Current" href="javascript:void(0);">すべて</a></li>
<li><a class="Sort_Atsuage" href="javascript:void(0);">厚揚げ</a></li>
<li><a class="Sort_Potatosalad" href="javascript:void(0);">ポテトサラダ</a></li>
<li><a class="Sort_Kurorabel" href="javascript:void(0);">黒ラベル</a></li>
</ul>
<ul class="SortContentsList Cols ColAuto3 Col2_SP" id="SortContents">
<li class="Sort_Atsuage">厚揚げはおいしい</li>
<li class="Sort_Potatosalad">ポテトサラダはおいしい</li>
<li class="Sort_Kurorabel">黒ラベルはおいしい</li>
<li class="Sort_Atsuage">厚揚げはうまい</li>
<li class="Sort_Potatosalad">ポテトサラダはうまい</li>
<li class="Sort_Kurorabel">黒ラベルはうまい</li>
<li class="Sort_Atsuage">厚揚げは最高</li>
<li class="Sort_Potatosalad">ポテトサラダは最高</li>
<li class="Sort_Kurorabel">黒ラベルは最高</li>
<li class="Sort_Atsuage Sort_Kurorabel">厚揚げと黒ラベルは超最高</li>
</ul>
CSS
/* ソートメニュー --------------------------------------------------- */
/* タグ */
.SortMenuList {
display: flex;
flex-wrap: wrap;
margin-top: var(--gap-int);
}
.SortMenuList li {
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
.SortMenuList a {
display: block;
border: 1px solid var(--color-sub4);
border-radius: 100vh;
color: #000;
}
.SortMenuList a.Current {
background-color: var(--color-sub5);
}
/* コンテンツ */
.SortContentsList {
margin-top: var(--gap-int);
}
.SortContentsList li {
border: 1px solid var(--color-sub4);
}
@media only screen and (max-width: 767px) {
/* タブ */
.SortMenuList a {
padding: 1rem 2rem;
}
/* コンテンツ */
.SortContentsList li {
padding: 1.5rem 1.5rem;
line-height: 1.6;
}
}
@media print, screen and (min-width: 768px) {
/* タブ */
.SortMenuList a {
padding: 1rem 2rem;
}
/* コンテンツ */
.SortContentsList li {
padding: 2rem 2rem;
line-height: 1.8;
}
}
JS設定（/js/__js_libs/_sort.js）
$(function(){
// ソートメニュー（with cookie）
var $sortMenu = $('#SortMenu a'),
$sortContents = $('#SortContents li');
$sortMenu.click(function(){
if(!($(this).hasClass('Current'))){
var nameClass = $(this).attr('class');
$sortContents.each(function(){
if($(this).hasClass(nameClass)){
$(this).hide().fadeIn(300);
} else {
$(this).hide();
}
});
$sortMenu.removeClass('Current');
$(this).addClass('Current');
// cookie処理：clickしたタブのクラス名を記憶
$.cookie('sortName', nameClass, { path: '/' });
}
});
// 「すべて」表示
$('.Sort_All').click(function(){
$sortContents.each(function(){
$(this).fadeIn(300);
});
});
// cookie処理：class名を記憶したタブをclick
var nameClass = $.cookie('sortName');
if (nameClass) {
$('a.'+nameClass).click();
}
});
- 別途、cookieのJSが必要（/js/__js_libs/jquery.cookie.min.js）。本サイトではlibs.jsに記述済み。