些細な日常

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

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

写真のソーシャルメディアの Flickr を使い始めたけれどもアカウント登録からアイコンとヘッダー（上段の背景）画像の設定方法に手間取ったので、改めて纏めておきたい。 Flickrはアカウント登録と同時にアイコンとヘッダー画像を設定できないのがソーシャルメディアとしてちょ...

ブログの表示速度を PageSpeed Insights で調査すると改善できる項目として「オフスクリーン画像の遅延読み込み」が出て来て取り入れると0.1秒くらい短縮できると分かる。 オフスクリーンの非表示の画像は、クリティカルなリソースをすべて読み込んだ後に遅れて読み込...

今までブログに 目次のジャンプリンク や フローティングの戻るボタン を設置して来た。HTMLのリンクタグのaを使ってページ内のidを持たせた場所へ移動するように作成しているけど、ところが何もしないままのデザインだと一瞬で、目的地に着いてしまって周りが文字だらけならばそれこそ雰...

ボタンで複数の画像を切り替える方法 をやってみたら二枚目以降の画像の読み込みが遅くて参った。何とかならないかと調べてみたらHTMLの「rel="preload"」を使うと助かると分かった。ファイル毎のブラウザの先読みを可能にするからJavaScriptで後か...

HTMLのマークアップをJavaScriptのプログラミングで書き換える、またはサイトのソースコードを置き換えるには innerHTML が良く使われる。 Element.innerHTML プロパティは、要素の子孫を記述する HTML 構文を設定または取得します。 ...

Dateクラスのコンストラクタ関数を使うとDateインスタンスを素早く生成できる。 An Owl on a tree branch by Lepale [ CC0 ], via Pixabay 四つの構文と使用可能なオブジェクト Dateオブジェクトは UTC ...

HTMLの リソースヒント （ 日本語訳 ）に載っているlinkタグの「rel="preconnect"」がサイトの表示速度を上げるのに役立つと知ってブログに取り入れたんだ。 速くなるのは確かながらほんの僅かで、体感上、殆ど変わらないようだけど、しかしブラ...

Bloggerの 2017年の公式テーマ のContempoとSohoとEmporioとNotableのソースコードの冒頭付近に normalize.css が付いている。 normalize.cssはCSSの標準化を意味していてブラウザ毎のサイトのHTMLのデフォルトの...

無料ブログのBloggerは独自ドメインを設定してレンタルサーバーとして無料で使うことができる。独自ドメインで有料ブログを運営する際にはレンタルサーバーの料金もかかるのが一般的だから安くても年間数千円が差し引かれるのは非常に嬉しい。 機能も殆ど変わらない。個人的に Googl...

サイトでファビコンやウェブクリップアイコンを設定すると訪問者の利便性が上がるから良いと思う。前者はブラウザのタブでサイト名の先頭に付けられる。後者はスマホ／タブレット向けのショートカットアイコンで、ブラウザのブックマークでサイト名の先頭に付けられたり、ホーム画面に追加するとデバイ...

HTML5 のサイトはdetailsタグで開閉メニュー／アコーディオンを簡単に作れると分かった。バージョン5.1から新たに加わった要素らしくて発表されないまま、かつて jQueryを使って難儀に臨むしかなかった 気持ちが嘘みたいに晴れ上がっている。本当にHTMLのマークアップだけ...

サイト作成でコンテンツのマークアップを行ったHTMLにデザインを付けるのがCSS（Cascading Style Sheets／カスケーディングスタイルシート）だ。記述がHTMLのようにタグで囲むだけではないからちょっと難しい。 僕は基礎を覚えるのに十年くらいかかった。デザイ...

タブレットの Chrome ブラウザで検索エンジンが使えなくなった。初めてではなくて偶に起きる。エラーが出るのはなぜなのかが分からなくて混乱するし、ブラウザのChromeのせいだと真っ先に思う。 Google を使っていて「このサイトにアクセスできまん／ウェブページは一時的に...