些細な日常

中古タブレットの購入に失敗して 使う度に固まったり、落ちたりする面倒な状況 を強いられている。メモリとストレージが足りないことの恐ろしさを痛感する。値段は安くても止まり易くて、毎日、待ち時間が増えるのでは逆に損している。時は金なり。只でさえも貧しい生活で何もできずに過ごすなんて苦しいだけだ。 少しでも動作が軽くて容量が小さ…

以前からブログの文字サイズが大きくなってからCSSの指定通りのものになるという奇妙なことが良く起きていた。ブラウザはAndroidのChromeで、はっきり覚えてないけれども他のブラウザではなかったかも知れず、あるいはAndroidのChromeで他のサイトではなかったかも知れない。僕が 使用している自作のBlogge…

inputタグのtype-textとtype-buttonを横並びにして表示しようとしたら高さが揃わなくて参った。ブラウザかデバイスが変われば大丈夫そうに見えたり、一般的に纏めるのは難しいのかも知れない。調べると入力フォントで高さが変わるという珍しいことが起きている。そこまでしっかり合わせるにはどうすれば良いか。CS…

ブログのフッターに 年度別の一件 という画像付きの スクロールボックス のリンクを作成した。 スクロールボックスを作ると片端にスクロールの方向のスクロールバーが表示されていつもは隠された領域があることが分かるから便利だと思ってそののままにしていた。しかしながら今回のスクロールボックスはボタンを付けて隠された領域があることが分か…

HTMLのpopover属性を使うとサイトにポップアップをボタンで出すことができる。当該のコンテンツはポップオーバー要素と呼ばれるけれどもサイトの他の全てのコンテンツに重ねて優先的に表示されることになる。 ポップオーバー要素は、呼び出し／制御要素（すなわち <button> または <input ty…

僕が提供する Blogger用テンプレートのImaginary への質問で、デザインが壊れて何とかして欲しいというのがあって原因の一つにブラウザがある。サイト作成のHTMLやCSSやJavaScriptのコードの一部に未対応だったり、場合によってアップデートでバグが起きて急に反映しなくなったりもする。 ブラウザの問題はいつ…

HTMLの標準仕様が2021年1月29日にW3CのHTML5からWHATWGのHTML Living Standardに変更された。 HTML Living StandardとHTMLの歴史 その流れで、結構、大きな違いというか、個人的にやっていたfigureタグやblockquoteタグへのfooterタグのマークアッ…

サイトの画像をデバイス毎に振り分けてレスポンシブに表示するにはimgタグにsrcset属性でそれぞれの画像URLを設定するのが簡単だ。 目次 imgタグのsrcset属性のマークアップ 画像を画面幅で切り替える場合 画像を解像度で切り替える場合 srcset属性の画像のレスポンシブ配信の内容 画像は画面幅と解像度を加味して表示さ…

Bloggerの投稿画像を HTMLのloading-lazy で自動化するプログラムを紹介したけれども動作を詳しく調べた結果、AndroidのChromeで初回画面から2000pxくらい下の画面外の画像しか遅延読み込みが発動しなかった。さらにYouTube動画を止めることは全くできなかった。ブラウザの対応状況はどれも同…

Firebase Storage、またはCloud Storage for Firebaseの CORSの構成 で、「ArgumentException: JSON CORS data could not be loaded from...」（引数の例外：JSONのCORSのデータが……からロードされなかった）というエラ…

サイトで他のページを表示するiframeタグはYouTubeの埋め込み動画などで良く使われるけれども画像のimgタグと異なり、コンテンツの縦横比をレスポンシブで維持することができない。なのでデバイスの画面幅に一杯で表示するようにすると訪問者の異なるデバイスの画面幅によってコンテンツの縦横比が変わってしまうのが厄介だっ…

サイトに 画像を描画できるインラインSVG は小さくても乱れず、しかもサイト内にマークアップすればサーバーの呼び出しを行わず、迅速に表示できるからアイコンのデザインなどに良く使われる。 インラインSVGには同じ画像を繰り返して表示するためのマークアップがある。 一つのsvgタグの内側にdefsタグを入れてそこにid付きのgタ…

JavaScriptで関数などを遅らせて実行する時間差の処理に使えるsetTimeout()メソッドと間隔を空けて繰り返せるsetInterval()メソッドには共通するパフォーマンスの問題があって避けるためにはどちらもrequestAnimationFrame()メソッドで置き換えることができる。 目次 request…

サイトの画像はその他のコンテンツと比べて容量が多くてサイトの表示速度を大きく下げることがある。画像の表示速度を上げることはサイトの利便性を高めることに繋がり易い。 HTMLで簡単に取り入れられてしかも効果が大きいdecoding-asyncの使い方を考えてみたい。 decoding-asyncは画像の非同期処理を示唆する …

サイトの画像はその他のコンテンツと比べて容量が多くてサイトの表示速度を大きく下げることがある。画像の表示速度を上げることはサイトの利便性を高めることに繋がり易い。 HTMLで簡単に取り入れられてしかも効果が大きいloading-lazyの使い方を考えてみたい。 loading-lazyは画像の遅延読み込みを指定する loa…