先週末は、セレクトボックス風のli+aタグでプルダウンを作成したのと、CSS3で拡大縮小ボタンを作成していました。どちらも、業務利用可能なレベルまで作り込んでおいたので、もしよければお使いください。HTMLソースを開いてコピペすれば動きます。
デザインは、Bootstrapを使っていこう。
当サイトの「分室」はそのテーマに沿ってシンプルなHTMLにしているので、余分なコードがなく、分かりやすいのがよいのですが、ふと「味気ないな。」と思ってしまいました。
なので、デザインを良くするライブラリについて考えてみた。
前々から気になってた「Bootstrap」ありきですけど、私が求める要件は５つありました。
A．ガリガリコーディングしなくても数行で良さげなデザインにしたい。
B．スマホなら自動的に縦長レイアウトになってほしい。
C．後付で簡単にデザイン変更できるのがよい。
D．Web会議のUI制作でも使えるのがよい。（元々、Bootstrapだった）
E．よく使われているものがよい。（GitHubのCSSFrameworkで一番人気）
改めて「Bootstrap」を調べてみたらこれら満たしていたので、今後は、これで制作してこうと思います。
近々、ChromeもUserAgentを凍結 汗）ブラウザバグの回避はどうすりゃいいの？
OSやブラウザの判定をしようと、久々にUserAgentを調べていたら、GoogleがUserAgentを凍結するという記事を見つけました。数ヶ月前から発表されてたようですが、Chrome85あたりから本格導入を計画しているそうです。
UserAgentが複雑になりすぎていることや、フィンガープリントに利用されるということから凍結するということらしいです。
一方、これまでこのUserAgentでブラウザのバグを回避してきたのも事実。ブラウザバグは今後もゼロになることはないので、UserAgentに変わるなにかで判定できるようにしてほしいところですね。
調べたらChromeとEdgeは「User Agent Client Hints」というのである程度判定できるようになるらしいですが、OSのバージョンやモバイルかどうかとかも判定できるようになるのか？まだわかりません。Firefoxは独自仕様の予定、Safariは今後検討と、ブラウザ間でバラバラのようです。（あら、またブラウザごとに違うのね。。だったら、UserAgentを整備し直すでよくないだろうか？）
JavaScriptで「OS、ブラウザ判定」する方法を下記へまとめておきました。
メニュー＞分室：OS、ブラウザ判定