マガジンのカバー画像

ぴよぴよコーダーの開発日記

101
本
主にフロントエンドな開発日記。CSS、jQuery、WordPress多め。
運営しているクリエイター
em

#フロントエンド

#81 position:stickyでパララックス

スクロールする度に、下の要素が上にかぶさっていくUIを調べてみたらposition:sticyがいいらし…

em
em
8か月前

#80 Webフォントであれこれやってみる

Noto Serifでローマ数字を書いてみる ユニコードのローマ数字を、google font読み込み時にサ…

em
em
11か月前
1

#79 Node SassからDart Sassに移行したいからDream weaverからVS Codeに移行した話

さて、世はDart Sass時代である。去年@importが廃止されたので、Node Sassをやめて、Dart Sass…

em
em
1年前
2

#78 border-imageが難解なので考えるのをやめた話

数か月前、border-imageを理解しようと、border-imageの値の設定が難解なので試してみるという…

em
em
1年前

#77 animation-fill-modeについて

animation-fill-mode　どんな種類があるのかイマイチ把握していなかったため復習しようと思い…

em
em
1年前

#76 flexとgap

CSSのGridは何か複雑な感じがして手を出していなかったけれど、余白を指定できるgapがflexでも…

em
em
1年前
2

#73 jQueryを使わないでアコーディオンUIを作る

ちなみにjQueryで作るとこんな感じ $('.accordion').each(function(){ $(this).on('click', function(e){ e.preventDefault(); $(this).siblings('.accordion').removeClass('active'); $(this).toggleClass('active'); });}); Vanilla.jsで作る場合、siblings 兄弟要

em

#71 border-imageの値の設定が難解なので試してみる

border-imageの値は、最低限、画像urlとsliceとwidth、repeatがある。 画像urlとwidthはわかる…

em
em
1年前
1

#70 scrollTrigger.jsを試してみる

https://www.willstyle.co.jp/blog/2869/ の記事を見て、難しかったので、写経することで内容…

em
em
1年前
1

#69 画像の描画領域を決めるアスペクト比とobject-fit

要するに、背景画像ならbackground-size:cover。imgタグとvideoタグなら、object-fit:coverと…

em
em
1年前

#68 2行でスムーススクロールを実装する【ぴよぴよコーダーの開発日記】

CSSで2行でスムーススクロールを実装します html {scroll-behavior: smooth;}[id*=anc_]{scro…

em
em
1年前
3

#67 訪問する度に1枚目の画像が切り替わるスライダー【ぴよぴよコーダーの開発日記】

使うプラグイン jQuery.js jQuery.cookie.js slick.js やりたいこと Cookieに訪問回数を…

em
em
1年前
1

#66 スマホでドラッグ＆ドロップのUIを作りたい【ぴよぴよコーダーの開発日記】

ドラッグ＆ドロップで何か作りたいなぁと思って、ラクにできるものはないか考えたら、昔jQuery…

em
em
1年前
2

#65 背景全画面表示をぼやかせた後にクリアにしたい【ぴよぴよコーダーの開発日記】

まずは、背景を全画面表示にする HTML <html><head></head><body> <header></header></body></html> CSS header { height: 100vh; background: url('sample.jpg') no-repeat top center / cover;} 次に、ぼやかせる CSSにfilter: blur(20px)を追加 header { height: 100vh; bac

em