html

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...
CSS

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

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

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

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