display:gridでセルの配置を決めるgrid-template-columns（列）やgrid-template-rows（行）の値のfrと%はどちらもグリッドレイアウトの全体の中の割合（占有率）を示すから同じではないかと思うけれども少し違っていて使い方を誤るとデザインが崩れる場合もあるから注意しなくてはならない。 グリッドレイアウトのfrの単位の特徴 トラックを分け合って隙間を全体に収める。 二つのトラックを半文字分の隙間で均等に分ける セル（横幅：トラック合わせ） セル（横幅：トラック合わせ） HTML <div class="grid-layout"> <div class="cell pink">セル（横幅：トラック合わせ）</div> <div class=&qu…
サイトの画像をデバイス毎に振り分けてレスポンシブに表示するにはimgタグにsrcset属性でそれぞれの画像URLを設定するのが簡単だ。 Person sitting on top of gray rock overlooking mountain during daytime by Denys Nevozhai on Unsplash 目次 imgタグのsrcset属性のマークアップ 画像を画面幅で切り替える場合 画像を解像度で切り替える場合 srcset属性の画像のレスポンシブ配信の内容 画像は画面幅と解像度を加味して表示される 画面幅で画像を確実に振り分ける方法 srcset属性の幅記述子の省略は画像選択に影響し得る sizes属性のレスポンシブ配信の役割 imgタグのsrcset属性のマークアップ imgタグはそのままで、srcset属性を特定の仕方で値を付けて追加…
Bloggerの投稿画像を HTMLのloading-lazy で自動化するプログラムを紹介したけれども動作を詳しく調べた結果、AndroidのChromeで初回画面から2000pxくらい下の画面外の画像しか遅延読み込みが発動しなかった。さらにYouTube動画を止めることは全くできなかった。ブラウザの対応状況はどれも同じではないと聞くけれどもたぶん大きな違いはないかも知れない。 何れにしてもHTMLのloading-lazyによるブログの表示速度の高速化は非常に限定的だと分かったので、もはや元々の JavaScriptのIntersection Observer API を再び使って画面外の画像や動画を確実に止めてパフォーマンスをきっちり上げるためのプログラムへの書き換えを追加したくなった。 合格した監査｜PageSpeed Insights PageSpee…
ブログをサイトのパフォーマンスをチェックする Measure page quality にかけたらBest PracticesのUser ExperienceのServes images with low resolutionの警告が出たから何なのかと調べて修正した。 Serves images with low resolutionとは何か Best Practices｜Measure page quality 画像を低解像度で配信しているのが良くない。 画像の原寸法は表示サイズと画像を最大に明瞭化するピクセル比へ成形されなくてはならない。 原文 Image natural dimensions should be proportional to the display size and the pixel ratio to maximize image cla…
Google Fonts で日本語のWebフォント（ Japanese ）が幾つも無料で提供されていて現在は正式版として相当に使い易くなっている。 Google Fontsの日本語フォント 種類が非常に多くて五十二件（2022年2月時点）から二十件のみ掲載する。 Noto Sans Japanese （ 適用 ） Noto Serif Japanese （ 適用 ） Shizuru （ 適用 ） M PLUS Rounded 1c （ 適用 ） Zen Kaku Gothic Antique （ 適用 ） Sawarabi Mincho （ 適用 ） Kosugi Maru （ 適用 ） Kaisei Decol （ 適用 ） Shippori Mincho （ 適用 ） Delta Gothic One （ 適用 ） Reggae One （ 適用 ） Kiwi Maru （ 適用 ） Murecho （ 適用 ） Yusei Magic （ 適用 ） Yuji Sy…
クラウドストレージの Dropbox はサイトで自由にコンテンツを表示できる直リンクのURLをあらゆるファイル形式で取得することができる。 Dropboxの共有リンクのURL 直リンクをURLを取得するには共有リンクが有効になってなくてはならない。 Ringtone｜Dropbox ファイルのメニューの「リンクをコピー」から共有リンクを取得できる。 DropBoxの共有リンクのURLの例 https://www.dropbox.com/s/gmgraajvzjninyg/Ringtone-Original%2014.ogg?dl=0 ドメインの「www.dropbox.com」から共有リンクのコードとファイル名が半角スラッシュ（/）に区切られて続いて最後にパラメーターの「?dl=0」が付く。 アクセスするとDropboxのファイルのプレビューになる。 パラメーターの「d…
Firebase Storage、またはCloud Storage for Firebaseの CORSの構成 で、「ArgumentException: JSON CORS data could not be loaded from...」（引数の例外：JSONのCORSのデータが……からロードされなかった）というエラーが出て先へ進めなくなったけど、しかし解決策が見付かった。 どうしてArgumentException: JSON CORS data could not be loaded fromが出たか CORSの構成のJSONファイルの文字や空白などに問題があるらしい。 [ { "origin": ["*"], "method": ["GET"], …
Bloggerは非常に古いWebサービスのせいか、ブログのテンプレートのファイルがXMLだから独自タグによる基本構造を踏まえてHTMLで編集可能な場所を選んでも普通のマークアップではエラーになってサーバーに保存できなくなるかも知れない。 Woman climbing a ladder by Vinicius Altava / CC0 カスタマイズでhead内に WebフォントのGoogle Fonts をlinkタグで読み込む場合を例として起こり易いエラーと修正法を掲載する。 XMLファイルでありがちな三つのエラー HTML要素の終了タグがない HTML要素の属性の値がない 一部の予約語が含まれている BloggerでGoogle Fontsのlinkタグを使う場合は管理画面のHTML編集かバックアップと元に戻すでテンプレートのソースコードのhead内などに記載する…
Bloggerは 世界で最も利用者が多いと共に非常に古いブログサービス で、常に改良されるけれども機能的に無駄な部分が残されていて今最も悲しいのがウィジェット用JavaScriptの外部ファイルとソースコードなんだ。 それ自体が重いどころか多くの機能が一つになっていてそうした標準のプログラムが必要なウィジェットなどを使ってなくても全てのブログにサーバーから自動的に記載されている。 ブログの表示速度などのパフォーマンスを考えると止めるのが最善ながら幾つかの重要な機能が使えなくなるのが悩ましい。しかし後から読み込む方法が全くないわけではない。初回画面を遅らせないことはブログのパフォーマンスでは最も重要だと思う。 ウィジェット用JavaScriptの影響を受ける機能を使わなければ止めて構わないけれども必要な場合でも最初に止めておいて一部の機能で必要なときだけ読み込…
正規表現で文字列の間、一つの部分から他の部分までを指定するには両端を任意で決めて中間をパターンで記載する。 何でも良ければ「.*」（どんな文字でもなければなくてあればあるだけ続く：文字の0以上の繰り返しという指定）が一般的に使える。 例えばサイトや画像などのURLで半角スラッシュ（/）の間を指定するには「/.*/」のように記載する。 参考： 正規表現パターンの記述 JavaScriptで使う場合は文字列の半角スラッシュはエスケープしなくてはならないので、正規表現リテラル（/文字列/）ならば半角バックスラッシュを前に一つ追加して「 \/.*\/ 」、それを正規表現オブジェクト（RegExp()コンストラクター）に渡すならば半角バックスラッシュを前に二つ追加して「 \\/.*\\/ 」と書き換えることになる。 Istanbul by Ben_Kerckx / CC0 目次 t…
Bloggerで取得した画像URLに 画像パラメーターのrwを追加する と画像データを軽量化したWebP画像に変換することができる。特にjpg／jpeg画像の場合に効果が大きいようだけれどもブログの画像の表示速度を高めることに繋がる。 記事／追加ページの投稿画像に画像パラメーターのrwを自動的に付けるプログラムを開発したので、無料で提供する。 JavaScriptで記事の本文の全ての表示を止めてから投稿画像に画像パラメーターを自動的に付けて出すことになる。便利だけど、その分、投稿画像を含めた記事の本文の全ての表示速度は遅れる、ほんの僅かだとしても投稿時に画像パラメーターを手動で付けておくよりも決して速くならないことに注意して欲しい。 そしてHTMLだけで記事の本文の全てを表示しないことはGoogle検索などの読み込みを劣らせるかも知れないので、 SEO（検索エ…