SNIPPETS CodepenやGistで、スニペットをメモ書きしています。 トップ SNIPPETS（スニペット） Primer 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*=""] 指定によるリストと行頭文字・行末文字） Layout 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 サンプル 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 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 Menu See the Pen <a href='https://codepen.io/sarap422/pen/LYgzrGX'>【PHP】parts/dropmenu.php（hoverdion.js）</a> by sarap422 (<a href='https://codepen.io/sarap422'>@sarap422</a>)on <a href='https://codepen.io'>CodePen</a>. 【PHP】parts/dropmenu.php（hoverdion.js） 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） READ MORE
CODE-PLUS