マガジンのカバー画像

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

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

#css

#83 もうサイズ指定はメディアクエリいらなそう

clamp関数を使ってみる。 clamp関数は最小値と最大値とその間の変化する値を定義できる。 Sas…

em
em
7か月前
3

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

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

em
em
8か月前

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

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

em
em
11か月前
1

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

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

em
em
1年前

#75 CSSのmaskについて

なんとなくmaskが苦手なので、勉強してみる。 マスクって覆い隠すって意味かと思ってたのに、…

em
em
1年前
3

#74 下からにょきっとスライドアップするナビゲーション

下からにょきっとスライドアップするナビゲーションを作ってみた。 jQueryのslideUP() slideDo…

em
em
1年前

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

border-imageの値は、最低限、画像urlとsliceとwidth、repeatがある。 画像urlとwidthはわかるけれど、sliceがよくわからない まずはCSSを見てみる。左から画像url、slice、width、repeat .waku { border-image: url("./img/bd_img.png") 10 / 10px round; } これだけで表示されるかと思いきや、border-style: solid;を一緒に指定し

em

#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

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

まずは、背景を全画面表示にする HTML <html><head></head><body> <header></header></body>…

em
em
1年前

#58 游ゴシックの正しいCSSの指定方法【ぴよぴよコーダーの開発日記】

まず、フォント名がOSによって違う。 Windows　→　游ゴシック OSX　→　游ゴシック体 Safa…

em
em
3年前
2

#48 はじめてのCSSアニメーション Transitionの基礎だよ【ぴよぴよコーダーの開発日記…

そもそもTransitionって何だっけ。 今までさんざんCSSアニメーション書いてきたけど、animati…

em
em
4年前
2

#47 背景画像の比率を保ったまま、レスポンシブ対応【ぴよぴよコーダーの開発日記】

ちょくちょく忘れがちなので備忘録的にメモ。 背景画像のレスポンシブ　デモ imgタグを使っ…

em
em
4年前
1

#46 2020年からはwidthとheightをimgタグに書く備忘録【ぴよぴよコーダーの開発日記】

忘れてしまうのでメモ 参考：【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい 理由的には、オンロード時に、画像が読み込まれる前でも、width、heightの比率を確保してくれるかららしい。altのサイズ版か。今はレスポンシブ全盛だから逆に決まったwidthとか指定されると困るような気もするが。。と言うのも、最近max-widthとwidth:100%しかCSS側で指定してなかったんで。。 よく読むと、レスポンシブでも大事なのはアスペクト比

em