HTML

JS で Lottie のアニメーションを表示する

検証用に触ってみた記録 完成形 <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.10.2/lottie.min.js" type="text/javascript"></script> <div></div> <script> lottie.loadAnimation({ container: document.querySelector('div'), // 表示領域 path: './data.json', // ローカルに用意したLottieのJSONファイル renderer: 'svg', // 表示する…

canvasで特定の幅で文字を折り返して表示する

やりたいこと canvasを使った文字の描画で、特定の幅で文字を折り返して表示したかった。 何も処理しないと↓みたいに文字が詰まって表示される 実装 ①文字を任意の文字数ごとに分割して配列に入れていく // 表示したいテキスト const src = "あ".repeat(30);…

canvasに表示した画像を丸で囲って表示する

やりたいこと canvasにdrawImage()で貼り付けた画像を正円で表示させたい(丸型にトリミングされたように表示させたい) やるまでは「quadraticCurveTo()でベジェ曲線使ってやらなかん感じ〜!?!?!?!数学できないよ〜!!」(数学関係あるかもわからな…

canvasで正円を描画したいのに楕円になってしまう

Reactでcanvas扱ってたときに正円を描画したいのに楕円になったときの備忘録 canvas描画部分 const ctx = this.canvas.current?.getContext('2d'); if (!ctx) { return; } ctx.fillStyle = "black"; ctx.fillRect(30, 0, 290, 450); ctx.fillStyle = "orange…

hoverしたときにテキストの枠線を左から右に引く

See the Pen text underline slide by miyata (@m1y474) on CodePen. 要点 通常時は疑似要素のborder-bottom: 1px solid #000; を指定したまま width: 0%; にしておく hoverしたときにwidth: 100%; にする

ボタンをhoverしたときに背景色をスライドさせる

これのこと HTML <button type="button">Button</button> ボタン部分 button { background-color: #fff; width: 200px; display: block; padding: 10px 0; border: 1px solid #000; position: relative; z-index: 1; } button:hover { color: #fff; } ボタン背景部分 button::before { posit…

textareaの入力文字数によって高さを可変にする

こういうやつ コード <textarea></textarea> <script> const textarea = document.querySelector('textarea'); textarea.addEventListener('input', () => { textarea.style.height = null; textarea.style.height = `${textarea.scrollHeight}px`; }); </script> 改行の数をカウントしてtextareaの…

hoverでbackground-imageを切り替えたときの画像のチラつきが気になる

↓これのこと*1 See the Pen preloadなし by miyata (@m1y474) on CodePen. なんでチラつくの? レンダリングのときは読み込まれなくて、hoverのときに初めて画像を読み込んでるから Networkタブを見てみるとhoverのタイミングで読み込んでるのがわかる 対応…

親のチェックボックスに紐付けたチェックボックスを全てチェックする

親のチェックボックスのチェック状態を親に紐付けた子供のチェックボックスにも反映させたい ↓こういうやつ これをピュアJSで書いたときの備忘録 コード 解説 HTML 親チェックボックスに子供を紐付ける用のカスタムデータ属性(data-id="1")をつける (親であ…

Bootstrap を使ってテーブルの行をクリックした時にコンテンツを展開したい

テーブルの各行をクリックした時に行の下にコンテンツを表示する。 一覧に表示する列数が多いけど横スクロールしたくないときに使う。 tr > td の中に div を書いてたりするのでマークアップ警察は見るな 要点 ① クリックする行の tr タグに開閉トリガーをつ…

HTML と CSS のみでドラえもんを作る

(割とやりつくされたネタだから今更感すごいけど。。。) [ドラえもん CSS] とかでググると実装方法がわかってしまうため今回は終始ググらないようにして実装 できたもの 実装 感想 所詮丸と直線の組み合わせだし position とか使わんくても Flexbox だけでモ…

Bootstrap3のブレイクポイント

v.3の話 4のことはまだ導入してないから知らん クラス名 breakpoint 対象 col-xs-x ~767px スマホ col-sm-x 768~991px タブレット col-md-x 992~1199px デスクトップ col-lg-x 1200px~ デスクトップ visible-sm / hidden-sm で対象の時に表示・非表示を切り…

form,inputで使えるtypeと属性

※過去ブログの転記 type text,hidden,password,emailとか個人的によく使うものは省略。 type view 対象 input type="url" URLの入力の妥当性チェックを行ってくれる input type="number" 数値の入力スマホの時にキーボードが数値入力になる input type="tel"…