display:flexで画像が潰れるとか膨らむなんて場合の対処法
ブログの人気の投稿の表示で画像と文章をCSSのdisplay:flexで横並びにしようとしたら上手く行かなくて参った。行毎に画像の大きさが異様に変わったり、スペースに合わなくて無駄な隙間が増えるかスペースが広がり過ぎて慌てるばかりだった。画像が潰れるとしか呼べない。あるいは縮んだり、膨らんだりして大変だったけど、しか…
ボタンなどのposition:fixedのHTML要素をサイトの幅に合わせて表示する方法
サイトにヘッダーへの戻るボタンなどをスクロールしても変わらない位置にCSSのposition:fixedで普通に貼り付けると大画面でサイトの幅を越えてしまうので、コンテンツからはみ出さず、サイトの表示領域の範囲内に収める方法を考える。 calc()によるposition:fixedの位置の算出 CSSのposition:…
CSSのtransition／animationに連動できるJavaScriptのtransitionend／animationend
JavaScriptのイベントのtransitionendとanimationendはそれぞれにCSSのtransitionとanimationの終了を検出する。なので後者を使うときに前者も一緒に使うとサイトで連動する動作を簡単に実現するプログラムが組める。 Metal gears by Bill Oxford / …
スマホでタップすると光るリンクの色と形のデザイン
スマホでサイトのリンクをタップすると青く光る。調べると使用中のブラウザが影響しているようで、リンクの光の色と形がそれぞれで、何も起こらないものもある。僕はAndroidのChromeで気付いたけれどもiPhoneのSafariでもリンクのタップした瞬間の光が付けられている。その他、Edgeなども対応している。サイトの…
住所の英語での表記の仕方
英語で住所を表記する場合、語順は全て日本語の場合と逆になる。 英語の住所の語順 国会議事堂の住所を例にしてみる。 日本語の表記 〒100-0014 東京都千代田区永田町１丁目７−１ 英語の表記 7-1 Nagata-cho 1 chome, Chiyoda-ku, Tokyo-to 100-0014 面白いようにすっかり前後が入れ…
アドセンスの個人のアメリカの税務情報／W-8BEN納税フォームの書き方
アドセンスに利用者の税務情報が必要となり、2021年6月1日以降、YouTubeのサイト広告などで収益を得る場合には税務情報を提出しないとアドセンスの支払いからアメリカの源泉所得税が米国内国歳入法の第三章により、控除される。 Google は、YouTube パートナー プログラム（YPP）に参加しているクリエイターか…
ロシア人の親日YouTubeチャンネルの発見
外国人の親日YouTubeチャンネルは日本人として逆に教えられることがあるのが特に面白い。観ると次々と関連したチャンネルが表示されるけれども気付いたのはロシア人がやっているのが目立つ。 昨今はヴイログ／Vlogといってブログのように気軽に撮られた動画が増えていてそんな親しみ易い内容のロシア人の親日YouTubeチャンネ…
