サイトで他のページを表示するiframeタグはYouTubeの埋め込み動画などで良く使われるけれども画像のimgタグと異なり、コンテンツの縦横比をレスポンシブで維持することができない。なのでデバイスの画面幅に一杯で表示するようにすると訪問者の異なるデバイスの画面幅によってコンテンツの縦横比が変わってしまうのが厄介だった。 以前からCSSのaspect-ratio要素がiframeの縦横比を一発で指定する方法として出ていて理想的だったけれども対応するブラウザが少なかった。しかし最近になって漸く主要なブラウザの多くが対応するようになった（ Can I Use ）からついに自分のブログでも取り入れることに決めた。 aspect-ratioのマークアップ 10 modern layouts in 1 line of CSS｜Google Chrome Developers 縦横比を指定したいタグにaspec…
サイトに 画像を描画できるインラインSVG は小さくても乱れず、しかもサイト内にマークアップすればサーバーの呼び出しを行わず、迅速に表示できるからアイコンのデザインなどに良く使われる。 Honeycomb by Clker-Free-Vector-Images / CC0 インラインSVGには同じ画像を繰り返して表示するためのマークアップがある。 一つのsvgタグの内側にdefsタグを入れてそこにid付きのgタグかsymbolタグで描画内容を纏めておく。そして内側か、または外側の場合は他のもう一つのsvgタグにuseタグを入れてhref属性でgタグかsymbolタグのidを指定してリンクのように呼び出す。 目次 インラインSVGの二つの呼び出し方 一つのsvgタグの中で呼び出す場合 定義用と表示用のsvgタグを分ける場合 呼び出しのマークアップの長所と短所 SVGのgタグとsymbolタグの違い インラ…
JavaScriptで関数などを遅らせて実行する時間差の処理に使えるsetTimeout()メソッドと間隔を空けて繰り返せるsetInterval()メソッドには共通するパフォーマンスの問題があって避けるためにはどちらもrequestAnimationFrame()メソッドで置き換えることができる。 目次 requestAnimationFrameはジャンクを防ぐ requestAnimationFrameはイベントループに強い アニメーションの始動と時間通りの実行に向く requestAnimationFrameに時間を設定して使う 二秒後に実行して即座に停止するサンプル 一秒間隔で実行して十秒で停止するサンプル requestAnimationFrameはジャンクを防ぐ アニメーションの処理に利点があってサイトの表示を良好に保ち易くするのがrequestAnimationFrame()メソッドの大きな…
サイトの画像はその他のコンテンツと比べて容量が多くてサイトの表示速度を大きく下げることがある。画像の表示速度を上げることはサイトの利便性を高めることに繋がり易い。 HTMLで簡単に取り入れられてしかも効果が大きいdecoding-asyncの使い方を考えてみたい。 decoding-asyncは画像の非同期処理を示唆する Two swallows by Capri23auto / CC0 decodingは画像のimg要素に使える属性で、画像のデコード（ファイルの諸々のデータ形式を画面表示に適したビットマップに変換する過程）の扱いを制御する。 decoding属性で指定できる三つの値 auto 同期と非同期の処理の仕方をブラウザに任せる（初期値） sync 同期処理を示唆する async 非同期処理を示唆する decoding属性は画像と画像以外のコンテンツをどのような順番で表示するかに影響を与える。 画像のデコ…
サイトの画像はその他のコンテンツと比べて容量が多くてサイトの表示速度を大きく下げることがある。画像の表示速度を上げることはサイトの利便性を高めることに繋がり易い。 HTMLで簡単に取り入れられてしかも効果が大きいloading-lazyの使い方を考えてみたい。 loading-lazyは画像の遅延読み込みを指定する Hoffman's Two-toed Sloth by gailhampshire / CC BY loadingは画像のimg要素、さらに別枠のiframe要素にも使える属性で、画像などの読み込みの開始位置を制御できる。 loading属性で指定できる二つの値 eager 画像などを記載位置で読み込む（初期値）。 lazy 画面内の画像などをレイアウト処理後に読み込み、画面外の画像などを読み込まない。 初期値のeagerは何もしないのと同じで、従来と変わらない。ただし不要というわけでは…
写真のソーシャルメディアの Flickr を使い始めたけれどもアカウント登録からアイコンとヘッダー（上段の背景）画像の設定方法に手間取ったので、改めて纏めておきたい。 Flickrはアカウント登録と同時にアイコンとヘッダー画像を設定できないのがソーシャルメディアとしてちょっと珍しいかも知れない。 二つの画像の共通設定 Image selection via Flickr Flickrのアイコンとヘッダー画像はアカウント登録が終了してからログイン（サインイン）した自分のページで設定しなくてはならない。 自分のページは一つではないけれども「About」（要約）や「Photostream」（写真連載）などのどのタイプからでも構わない。 最初のうちは慣れなくて迷い易いけれども自分のページへは当該のURLを使うか、またはFlickrの最上段のメニューのパソコンの「You」（貴方）かスマホ／タブレットのハ…
ブログの表示速度を PageSpeed Insights で調査すると改善できる項目として「オフスクリーン画像の遅延読み込み」が出て来て取り入れると0.1秒くらい短縮できると分かる。 オフスクリーンの非表示の画像は、クリティカルなリソースをすべて読み込んだ後に遅れて読み込むようにして、インタラクティブになるまでの時間を短縮することをご検討ください。 改善できる項目 via PageSpeed Insights 真っ先に心配なのはSEO（検索エンジン最適化）対策で、専ら Google検索 でのサイト評価が下がるとしたら辛い。必要な画像が的確に表示されないと サイトを巡回するクローラー に読み込まれず、コンテンツの品質が低いと判断されて検索結果で不利になってしまうのではないか。個人的に検索エンジンからのアクセスダウンは何としても避けなくてはならないと感じる。 サイトの表示速度もGoogle検索でのサイト…
今までブログに 目次のジャンプリンク や フローティングの戻るボタン を設置して来た。HTMLのリンクタグのaを使ってページ内のidを持たせた場所へ移動するように作成しているけど、ところが何もしないままのデザインだと一瞬で、目的地に着いてしまって周りが文字だらけならばそれこそ雰囲気が殆ど変わらないために自分はどこにいるのか、リンクを使ってページ内を本当に移動したのかどうかが分かり兼ねる。 少しでも混乱しないために、または折角と設置したはずの目次のジャンプリンクやフローティングの戻るボタンを気持ち良く使うというサイトのUX（User Experience／利用者の体験）を向上させるべく、ページ内を移動するスクロールイベントにゆっくり遅らせるアニメーションを付けるようにデザインを相応しく変えると良いと思う。 CSS の scroll-behavior のsmoothの使い方 サイトのスクロールイベントの経…
ボタンで複数の画像を切り替える方法 をやってみたら二枚目以降の画像の読み込みが遅くて参った。何とかならないかと調べてみたらHTMLの「rel="preload"」を使うと助かると分かった。ファイル毎のブラウザの先読みを可能にするからJavaScriptで後から必要な画像などが直ぐに表示できるようになるんだ。 二枚目へ進む 二枚目の画像にpreloadを指定していて非表示でもサイトの閲覧と同時にブラウザに読み込まれるためにJavaScriptの切り替えボタンから待ち時間なしに表示される。 preloadに対応する十二のファイル audio：音楽 video：動画 track：字幕 script：JavaScript stylesheet：CSS font：フォント image：画像 fetch crossorigin：XHR／fetch worker：Worker／SharedWorker em…
HTMLのマークアップをJavaScriptのプログラミングで書き換える、またはサイトのソースコードを置き換えるには innerHTML が良く使われる。 Element.innerHTML プロパティは、要素の子孫を記述する HTML 構文を設定または取得します。 element.innerHTML via MDN innerHTMLはElementインターフェースのDOMString（文字列）型のプロパティで、サイト上の要素内容のマークアップを表す。 JavaScriptでは他にも似たようなプロパティの innerText や textContent があって――どちらもNodeインターフェースのDOMString型に含まれる――プレーンテキスト（HTMLなどのマークアップ言語を含まない）を設定取得できる。双方にはCSSで非表示のコンテンツを知覚するかしないなどの細かい違いがあるけれども機能そ…
HTMLの リソースヒント （ 日本語訳 ）に載っているlinkタグの「rel="preconnect"」がサイトの表示速度を上げるのに役立つと知ってブログに取り入れたんだ。 速くなるのは確かながらほんの僅かで、体感上、殆ど変わらないようだけど、しかしブラウザの外部ファイルの読み込みを効率化できるので、訪問者が以前よりも安定して閲覧できるかも知れないから外すには至らない。 Luminescence of cars running on a dark road by Mateusz Dach [ CC0 ], via Pexels 目次 リソースヒントのpreconnectの仕組み linkタグの「rel="preconnect"」の記述法 サイトの表示速度を上げ易くする条件 WebPagetestで事前接続を調べる方法 WebPagetestの通常の入力画面の日本語訳 事前接…
Bloggerの 2017年の公式テーマ のContempoとSohoとEmporioとNotableのソースコードの冒頭付近に normalize.css が付いている。 normalize.cssはCSSの標準化を意味していてブラウザ毎のサイトのHTMLのデフォルトのデザインの互換性を保つためのCSSの独自のソースコードなんだ。 normalize.cssはデフォルトのHTML要素のスタイルにクロスブラウザを一貫して良く供給する小さなCSSファイルです。それは従来型のCSSリセットへの現代的でHTML5に対応した代替です。 原文 Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, …
無料ブログのBloggerは独自ドメインを設定してレンタルサーバーとして無料で使うことができる。独自ドメインで有料ブログを運営する際にはレンタルサーバーの料金もかかるのが一般的だから安くても年間数千円が差し引かれるのは非常に嬉しい。 機能も殆ど変わらない。個人的に Googleフォトの高画質の写真が載せられるのとBloggerの強制の広告が出ないのが良いと思う Bloggerの無料ブログの特徴が独自ドメインで引き継がれるのが嬉しい。ただし一部で新しい機能が追加されるのが遅れる場合があるかも知れないから留意しておきたい。現時点ではSSL暗号化通信（https）が二年くらい無理だったけれども今年の始めから可能になってBloggerの無料ブログと独自ドメインの機能の大きな差はなくなって来た。 性能上、明らかに違うのは国別URL（ccTLD）が独自ドメインで発動しなくなる。Bloggerの無料ブログは訪…