html

Javascript

html+javascriptでクリップボードにコピーするまで

html+javascriptでクリップボードにコピー実現することコピーするまでのユーザーの流れは次の通り:コピーしなくなる文章・数値などが同一ページ内に複数並んでいる。それぞれの内容は異なる。それら文章・数値などのうちのどれかをクリックし...
React

imgタグの画像を切り替えるとき、アスペクト比を維持しつつリサイズする

1つのimgタグを使って代わる代わる画像を表示するとき、アスペクト比を維持しつつ枠いっぱいに表示する。(Javascript, react)2021/09追記リサイズのことを忘れていた。イベントリスナーを追加してリサイズすればいい:// 結...
Webサービス

jekyllなサイトでfaviconをルートに置かないようにして設置

jekyllな静的ウェブサイトにfaviconを設定する。あまりルートディレクトリにファイルをたくさん置きたくないので、アイコン類はicons/にまとめておくための設定を記録しておく。使用したジェネレータサイト今回はfaviconジェネレー...
CSS

3通りのmarquee

幅が足りない時は文字をスクロールさせる。(マーキー)電光掲示板のようなスクロール。局所的には使える。試した方法3つmarqueeタグ(廃止)を利用CSSのanimationを利用Javascriptで実装特に凝った動きをしないのであれば、真...
Django

Djangoアプリにfaviconを設定する

Djangoを使ったWebアプリにfaviconを設定する。追記2021/01/19: faviconジェネレータサイトについて更新環境Django==2.2.5参考How can I get a favicon to show up in...
CSS

CSSのdisplay: flex;で動的な幅変化に対応する

CSSのメモ。display: flex;で動的な横並べを行う。実現したい動作要素Aの隣にある程度の幅が空いていれば、隣に要素Bを表示したい。要素Aは固定幅を持ち、要素Bは最小幅を持ち、幅の空きに応じて横に広がる。幅に余裕のないときは、要素...
Javascript

ブックマークレットでURLとページタイトルを含んだaタグを生成

webページのタイトルとURLをブックマークレットで簡単コピーしたい。Safariの更新により、自作拡張機能が使えなくなったため。ブックマークレットなら基本的にはブラウザを問わず使用できるため利便性も高いと思う。ブックマークレットは作ったこ...