SNIPPETS（スニペット） | CODE-PLUS（コードプラス）

SNIPPETS
*CodepenやGistで、スニペットをメモ書きしています。*

FOUNDATIONS

See the Pen <a href='https://codepen.io/sarap422/pen/dydBjPY'>【CSS, JS】Scrollin.css（スクロールでふわっとフェードイン）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【CSS, JS】Scrollin.css（スクロールでふわっとフェードイン）
See the Pen <a href='https://codepen.io/sarap422/pen/PoBGJJN'>【CSS】hoverllin.css（ホバー用CSS）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【CSS】hoverllin.css（ホバー用CSS）
See the Pen <a href='https://codepen.io/sarap422/pen/zYWBGRy'>【CSS, JS】textillin（テキストアニメーション）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【CSS, JS】textillin（テキストアニメーション）
See the Pen <a href='https://codepen.io/sarap422/pen/PoBYBZb'>【SCSS】style-color-palette.scss（色管理用CSS）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【SCSS】style-color-palette.scss（色管理用CSS）
See the Pen <a href='https://codepen.io/sarap422/pen/xxJOzMK'>【SCSS】NamedColors_139.scss（WEBカラーネーム）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【SCSS】NamedColors_139.scss（WEBカラーネーム）
See the Pen <a href='https://codepen.io/sarap422/pen/JjaQpEv'>【CSS】_badge-button.css</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【CSS】_badge-button.css
See the Pen <a href='https://codepen.io/sarap422/pen/wvELXzv'>【CSS】badge-button Samples</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【CSS】badge-button Samples
See the Pen <a href='https://codepen.io/sarap422/pen/JjJGqXa'>【CSS】breadcrumb.css（パンくずリスト）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【CSS】breadcrumb.css（パンくずリスト）
See the Pen <a href='https://codepen.io/sarap422/pen/WNZMMpy'>【CSS】stardust-shapehand.css（図形とか線とか）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【CSS】stardust-shapehand.css（図形とか線とか）
See the Pen <a href='https://codepen.io/sarap422/pen/PoQJMwK'>【CSS, JS】be-lable & responsiveTables.preview（scroll-hint.js、他）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【CSS, JS】be-lable & responsiveTables.preview（scroll-hint.js、他）
See the Pen <a href='https://codepen.io/sarap422/pen/KKQWewZ'>【CSS】alphonse-capsLists.css（セレクタ[style*=""] 指定によるリストと行頭文字・行末文字）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【CSS】alphonse-capsLists.css（セレクタ[style*=""] 指定によるリストと行頭文字・行末文字）

CSS

See the Pen <a href='https://codepen.io/sarap422/pen/wvZPqZN'>【CSS】layout-pattern.preview（レイアウト用のCSSまとめ）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【CSS】layout-pattern.preview（レイアウト用のCSSまとめ）
See the Pen <a href='https://codepen.io/sarap422/pen/rNgwJjB'>【CSS】layout-rowgroup-pattern（横並べ）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【CSS】layout-rowgroup-pattern（横並べ）
See the Pen <a href='https://codepen.io/sarap422/pen/dyEZvPm'>【CSS】layout-float-pattern（display: float;）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【CSS】layout-float-pattern（display: float;）
See the Pen <a href='https://codepen.io/sarap422/pen/Jjqpbwx'>【CSS】position:sticky サンプル</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【CSS】position:sticky サンプル
See the Pen <a href='https://codepen.io/sarap422/pen/ExGEoPE'>【CSS】utility-animation.css（アニメーション用のイージングまとめ）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【CSS】utility-animation.css（アニメーション用のイージングまとめ）

JAVASCRIPT

See the Pen <a href='https://codepen.io/sarap422/pen/YPXXJVO'>【JS】clickdion, hoverdion.js（クリック時とホバー時のアコーディオン）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【JS】clickdion, hoverdion.js（クリック時とホバー時のアコーディオン）
See the Pen <a href='https://codepen.io/sarap422/pen/XWBxjLo'>【JS】float-bottom.js（floatで右下・左下に画像を配置）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【JS】float-bottom.js（floatで右下・左下に画像を配置）
See the Pen <a href='https://codepen.io/sarap422/pen/qBLRZWW'>【js】diverment-meter.js（スクロール量・向きによってクラス付与）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【js】diverment-meter.js（スクロール量・向きによってクラス付与）
See the Pen <a href='https://codepen.io/sarap422/pen/xxmEjaK'>【JS】invisible-tabPanel_pc.js（PCはタブクリックでページ切り替え、スマホはアンカーリンク）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【JS】invisible-tabPanel_pc.js（PCはタブクリックでページ切り替え、スマホはアンカーリンク）
See the Pen <a href='https://codepen.io/sarap422/pen/PoXGRRo'>【JS】link-animeSmooth.js（Anime.jsスムーススクロール & フェードインアウト）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【JS】link-animeSmooth.js（Anime.jsスムーススクロール & フェードインアウト）
See the Pen <a href='https://codepen.io/sarap422/pen/GRPvaEL'>【JS】cabinetmaker.js（flexboxでの縦並べ・折り返し、高さ自動計算）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【JS】cabinetmaker.js（flexboxでの縦並べ・折り返し、高さ自動計算）
See the Pen <a href='https://codepen.io/sarap422/pen/mdKLRGo'>【JS】accorder-inppend.js（クリックしてからアコーディオンの中身≺template≻を挿入）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【JS】accorder-inppend.js（クリックしてからアコーディオンの中身≺template≻を挿入）
See the Pen <a href='https://codepen.io/sarap422/pen/dyeOEWy'>【CSS, JS】 CustomElement ❬bdi-slice❭（border-image-slice）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【CSS, JS】 CustomElement ❬bdi-slice❭（border-image-slice）
See the Pen <a href='https://codepen.io/sarap422/pen/ZEweVzo'>【JS】_inplace-goreinu.js（.inplaceを、同じdata-idの.template内容で書き換える）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【JS】_inplace-goreinu.js（.inplaceを、同じdata-idの.template内容で書き換える）
See the Pen <a href='https://codepen.io/sarap422/pen/zYjgrrV'>【JS】hlsjs.function.js（classからIDと「data-hls=&quot;&quot;」をループで取り出してhls.js処理）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【JS】hlsjs.function.js（classからIDと「data-hls=""」をループで取り出してhls.js処理）
See the Pen <a href='https://codepen.io/sarap422/pen/KKooObY'>sticky-sidebar.js（overflow: hidden; に左右されないsticky）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
sticky-sidebar.js（overflow: hidden; に左右されないsticky）
See the Pen <a href='https://codepen.io/sarap422/pen/BamqRdQ'>【JS】Anime.js：線画アニメーションの後、[data-fill]の値で塗りつぶし</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【JS】Anime.js：線画アニメーションの後、[data-fill]の値で塗りつぶし
See the Pen <a href='https://codepen.io/sarap422/pen/KKqKdwV'>Javascript：Promise サンプル（画像変更処理）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
Javascript：Promise サンプル（画像変更処理）
See the Pen <a href='https://codepen.io/sarap422/pen/RwjawVZ'>image-map-resizer.jsを利用した、hoverの効くクリッカブルマップのサンプル</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
image-map-resizer.jsを利用した、hoverの効くクリッカブルマップのサンプル
See the Pen <a href='https://codepen.io/sarap422/pen/vYKgEVE'>【JS】darkmode-js サンプル</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【JS】darkmode-js サンプル

SWIPER

See the Pen <a href='https://codepen.io/sarap422/pen/qBQYOKd'>【PHP】swiper-viewCover.php</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【PHP】swiper-viewCover.php
See the Pen <a href='https://codepen.io/sarap422/pen/JjevYzY'>【PHP】swiper-viewRatio.php</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【PHP】swiper-viewRatio.php
See the Pen <a href='https://codepen.io/sarap422/pen/qBQQEmL'>【PHP】swiper-viewTransom.php（高窓、地窓）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【PHP】swiper-viewTransom.php（高窓、地窓）
See the Pen <a href='https://codepen.io/sarap422/pen/ZEwjbEb'>【PHP】swiper-viewScroll.php（横にスクロールして、最後で停止）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【PHP】swiper-viewScroll.php（横にスクロールして、最後で停止）
See the Pen <a href='https://codepen.io/sarap422/pen/dyKovza'>【PHP】swiper-viewGallery.php</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【PHP】swiper-viewGallery.php
See the Pen <a href='https://codepen.io/sarap422/pen/JjZPvMP'>【PHP】swiper-viewCards（「pt-cv-scrollable」の構造に合わせたSwiper）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【PHP】swiper-viewCards（「pt-cv-scrollable」の構造に合わせたSwiper）
See the Pen <a href='https://codepen.io/sarap422/pen/PoXGRRo'>【PHP】popn-swiper.php（Popover API + Swiper）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【PHP】popn-swiper.php（Popover API + Swiper）
See the Pen <a href='https://codepen.io/sarap422/pen/gOZMeLY'>【PHP】dialoger-viewSimple.php（dialogタグを使用したシンプルなモーダル）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【PHP】dialoger-viewSimple.php（dialogタグを使用したシンプルなモーダル）
See the Pen <a href='https://codepen.io/sarap422/pen/XWodPEJ'>【PHP】swiper-viewModal.php</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【PHP】dialoger-viewSlideto.php（swiperで任意のスライドへ移動するモーダル）
See the Pen <a href='https://codepen.io/sarap422/pen/dyxqQGX'>【PHP】swiper-menuSlide.php（横幅が狭くなったらスライドに切り替えるグローバルナビ）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【PHP】swiper-menuSlide.php（横幅が狭くなったらスライドに切り替えるグローバルナビ）

VIDECKER

See the Pen <a href='https://codepen.io/sarap422/pen/jOQbQjG'>【PHP】videcker-viewCover（動画全画面／PCとスマホで切り替え）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【PHP】videcker-viewCover（動画全画面／PCとスマホで切り替え）
See the Pen <a href='https://codepen.io/sarap422/pen/zYMvMVm'>videcker-viewRatio（動画：height: auto;）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
videcker-viewRatio（動画：height: auto;）
See the Pen <a href='https://codepen.io/sarap422/pen/xxQxKqa'>【PHP】videcker-viewPromise（一定時間後に動画再生）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【PHP】videcker-viewPromise（一定時間後に動画再生）
See the Pen <a href='https://codepen.io/sarap422/pen/bGKVKjr'>【PHP】videcker-summonOuter.php（サムネイルをクリックで動画プレイヤーを最前面に表示）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【PHP】videcker-summonOuter.php（サムネイルをクリックで動画プレイヤーを最前面に表示）
See the Pen <a href='https://codepen.io/sarap422/pen/XWYMoRE'>【PHP】videcker-playOuter.php（サムネイルをクリックで動画を最前面で再生）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【PHP】videcker-playOuter.php（サムネイルをクリックで動画を最前面で再生）
See the Pen <a href='https://codepen.io/sarap422/pen/zYjgrrV'>【JS】hlsjs.function.js（classからIDと「data-hls=""」をループで取り出してhls.js処理）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【JS】hlsjs.function.js（classからIDと「data-hls=""」をループで取り出してhls.js処理）

GSAP

See the Pen <a href='https://codepen.io/sarap422/pen/mdKLRGo'>【JS】accorder-inppend.js（クリックしてからアコーディオンの中身≺template≻を挿入）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【JS】accorder-inppend.js（クリックしてからアコーディオンの中身≺template≻を挿入）

Parts

See the Pen <a href='https://codepen.io/sarap422/pen/XWoXgbx'>【PHP】pageBtn-group.php（ツールチップが表示されるTOP・BOTTOM・100vh進む・戻るボタン）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【PHP】pageBtn-group.php（ツールチップが表示されるTOP・BOTTOM・100vh進む・戻るボタン）
See the Pen <a href='https://codepen.io/sarap422/pen/GgKarmJ'>【PHP】drwrmenu.php（GSAP使用）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【PHP】drwrmenu.php（GSAP使用）
See the Pen <a href='https://codepen.io/sarap422/pen/abPNVzj'>【JS, CSS】masonry.js サンプル</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【JS, CSS】masonry.js サンプル
See the Pen <a href='https://codepen.io/sarap422/pen/xxmVjVb'> 【PHP】masonry-viewCards.php</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【PHP】masonry-viewCards.php
See the Pen <a href='https://codepen.io/sarap422/pen/zYWRMQg'>【PHP】gsap-locoMotiveHory.php</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【PHP】gsap-locoMotiveHory.php
See the Pen <a href='https://codepen.io/sarap422/pen/poLjXqb'>【PHP】ランダム数値を表示するローディング・スピナー</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【PHP】ランダム数値を表示するローディング・スピナー

HEADER & FOOTER

See the Pen <a href='https://codepen.io/sarap422/pen/KKxjZOd'>【HTML, CSS】HEADER&FOOTER Samples</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【HTML, CSS】HEADER&FOOTER Samples

FONTS

See the Pen <a href='https://codepen.io/sarap422/pen/NWJGwdb'>【HTML】Character-Entity.html（文字実体参照／数字実体参照のまとめ）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【HTML】Character-Entity.html（文字実体参照／数字実体参照のまとめ）
See the Pen <a href='https://codepen.io/sarap422/pen/eYXpezV'>【HTML】Unicode-Ideoglyphs\.html（Unicodeの文字記号）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【HTML】Unicode-Ideoglyphs\.html（Unicodeの文字記号）
See the Pen <a href='https://codepen.io/sarap422/pen/NWBwYRO'>おすすめの Google Fonts</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
おすすめの Google Fonts
See the Pen <a href='https://codepen.io/sarap422/pen/rNQbOqg'>Material-Symbols Sample 500</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
Material-Symbols Sample 500
See the Pen <a href='https://codepen.io/sarap422/pen/bGQzqOV'>Simple-Icons Samples 500</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
Simple-Icons Samples 500
See the Pen <a href='https://codepen.io/sarap422/pen/QWBqvZZ'>【CSS】Fluid-responsive font-size Samples</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【CSS】Fluid-responsive font-size Samples
See the Pen <a href='https://codepen.io/sarap422/pen/PoBJxmd'>【CSS】Fluid-fractional rem（fem／分数的な可変rem）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>.
【CSS】Fluid-fractional rem（fem／分数的な可変rem）

SNIPPETS

FOUNDATIONS

【CSS, JS】Scrollin.css（スクロールでふわっとフェードイン）

【CSS】hoverllin.css（ホバー用CSS）

【CSS, JS】textillin（テキストアニメーション）

【SCSS】style-color-palette.scss（色管理用CSS）

【SCSS】NamedColors_139.scss（WEBカラーネーム）

【CSS】_badge-button.css

【CSS】badge-button Samples

【CSS】breadcrumb.css（パンくずリスト）

【CSS】stardust-shapehand.css（図形とか線とか）

【CSS, JS】be-lable & responsiveTables.preview（scroll-hint.js、他）

【CSS】alphonse-capsLists.css（セレクタ[style*=""] 指定によるリストと行頭文字・行末文字）

CSS

【CSS】layout-pattern.preview（レイアウト用のCSSまとめ）

【CSS】layout-rowgroup-pattern（横並べ）

【CSS】layout-float-pattern（display: float;）

【CSS】position:sticky サンプル

【CSS】utility-animation.css（アニメーション用のイージングまとめ）

JAVASCRIPT

【JS】clickdion, hoverdion.js（クリック時とホバー時のアコーディオン）

【JS】float-bottom.js（floatで右下・左下に画像を配置）

【js】diverment-meter.js（スクロール量・向きによってクラス付与）

【JS】invisible-tabPanel_pc.js（PCはタブクリックでページ切り替え、スマホはアンカーリンク）

【JS】link-animeSmooth.js（Anime.jsスムーススクロール & フェードインアウト）

【JS】cabinetmaker.js（flexboxでの縦並べ・折り返し、高さ自動計算）

【JS】accorder-inppend.js（クリックしてからアコーディオンの中身≺template≻を挿入）

【CSS, JS】 CustomElement ❬bdi-slice❭（border-image-slice）

【JS】_inplace-goreinu.js（.inplaceを、同じdata-idの.template内容で書き換える）

【JS】hlsjs.function.js（classからIDと「data-hls=&quot;&quot;」をループで取り出してhls.js処理）

sticky-sidebar.js（overflow: hidden; に左右されないsticky）

【JS】Anime.js：線画アニメーションの後、[data-fill]の値で塗りつぶし

Javascript：Promise サンプル（画像変更処理）

image-map-resizer.jsを利用した、hoverの効くクリッカブルマップのサンプル

【JS】darkmode-js サンプル

SWIPER

【PHP】swiper-viewCover.php

【PHP】swiper-viewRatio.php

【PHP】swiper-viewTransom.php（高窓、地窓）

【PHP】swiper-viewScroll.php（横にスクロールして、最後で停止）

【PHP】swiper-viewGallery.php

【PHP】swiper-viewCards（「pt-cv-scrollable」の構造に合わせたSwiper）

【PHP】popn-swiper.php（Popover API + Swiper）

【PHP】dialoger-viewSimple.php（dialogタグを使用したシンプルなモーダル）

【PHP】dialoger-viewSlideto.php（swiperで任意のスライドへ移動するモーダル）

【PHP】swiper-menuSlide.php（横幅が狭くなったらスライドに切り替えるグローバルナビ）

VIDECKER

【PHP】videcker-viewCover（動画全画面／PCとスマホで切り替え）

videcker-viewRatio（動画：height: auto;）

【PHP】videcker-viewPromise（一定時間後に動画再生）

【PHP】videcker-summonOuter.php（サムネイルをクリックで動画プレイヤーを最前面に表示）

【PHP】videcker-playOuter.php（サムネイルをクリックで動画を最前面で再生）

【JS】hlsjs.function.js（classからIDと「data-hls=""」をループで取り出してhls.js処理）

GSAP

【JS】accorder-inppend.js（クリックしてからアコーディオンの中身≺template≻を挿入）

Parts

【PHP】pageBtn-group.php（ツールチップが表示されるTOP・BOTTOM・100vh進む・戻るボタン）

【PHP】drwrmenu.php（GSAP使用）

【JS, CSS】masonry.js サンプル

【PHP】masonry-viewCards.php

【PHP】gsap-locoMotiveHory.php

【PHP】ランダム数値を表示するローディング・スピナー

HEADER & FOOTER

【HTML, CSS】HEADER&FOOTER Samples

FONTS

【HTML】Character-Entity.html（文字実体参照／数字実体参照のまとめ）

【HTML】Unicode-Ideoglyphs\.html（Unicodeの文字記号）

おすすめの Google Fonts

Material-Symbols Sample 500

Simple-Icons Samples 500

【CSS】Fluid-responsive font-size Samples

【CSS】Fluid-fractional rem（fem／分数的な可変rem）

【JS】hlsjs.function.js（classからIDと「data-hls=""」をループで取り出してhls.js処理）