2019年6月、8年ぶりにスタイルシートを更新しようとして、結局、力尽きて途中賭けで放り出したのだけれど、今回ようやく続きの作業を完了した。
前回は他に逃げ道がいろいろあったから、「もうそっちでいいや」となったのだけれど、再び deztec.jp でどうにかしたい事情が発生し、今度は逃げ場が思いつかず、最後までやれた。
具体的には「自作アナログゲームの説明書を印刷にすると高コストなため、オンラインで済ませたい」というのが、今回のミッション。このオンライン説明書は、スマホで読めないと、どうしようもない。これからゲームしようというのに、誰もパソコンなんか開いてはくれないのだ。
「ふつう」のレベルである必要はない。かといって「どうにか読めればOK」とまでは、思えなかった。自分自身が読む気になれる程度にはしないと、納得できず。
古いコンテンツは放置する手もあったが、私自身が不便を感じていたので、やれる範囲内ではあるものの、ほとんどのページを更新することにした。
スマホ向けブラウザが自動的に文字を大きくする機能、利用者目線では助かるが、スタイルシートをどう書けばいいのか、なかなか対処法がわからなかった。下記で対応可能とわかったが、最終的にこの記述をするかどうかは、考えどころ。
html {
-webkit-text-size-adjust: 100%;
}
「CSSピクセル」という概念は理解したが、デフォルトでは適用されない。HTML文書側に、meta要素をひとつ追加する必要がある、という説明に行き着くのにも、手間取った。CMS出力ではないページもたくあんあるから、なるべくHTML側には手を入れたくなかったが、やるしかないと結論。
<meta name="viewport" content="width=device-width">
背景画像まわりも、いろいろ見直した。もともと大きめの画像は引きのばしてもそれほど気にならないからそのままにしたが、リストマークなどの小さな画像は拡大表示に耐えられないと感じ、作り直した。
約10年、勉強しないでいる間に、プロパティがいろいろ増えていて面白い。
文字サイズの単位に rem というのが増えていて、これも便利でよいと思った。
1年前に、成果はなかったなりに2晩取り組んだ意味はあって、なんだかんだ1日の内に一通りの作業を完了できた。1年前にもう1日、頑張っていればよかったのだろうか。それとも、途中で諦めたことが気になっていて、1年間、無意識に情報を収集・整理してきたから、1日で成果が出たのだろうか。
そのあたりは、わからない。