2019年03月22日(金) スタイルシート

ヌーディスト・ガンダム。



木曜は休みだってのに朝から晩までHPをいじっておった。
なんだか、とても(HPの)文字が大きいような気がするけど勘弁してね。

長年HTMLを適当にいじってきて、実は知識が10年くらい止まってるのを実感したので。
FONT命令ってHTML5では廃止されてたらしい。
知らずにず～っと使ってたわ。

Chromeはアバウトな記述で古い命令でも何となく表示するのだが、ファイアーフォックスに持っていくとFONT命令の箇所がズタボロに表示される。
だけでなく、ほとんど活用してないスマホで自分のHP見てみたら、文字がゴマ粒で視認できんではないか。
iPADでちゃんと見れるので安心しとったのだが。

フォントの表示はスタイルシートが標準らしい。
だがわしは右脳で考える男。
スタイルシートの書き方なんてぜんぜんわからん。
だいたいスタイルシートの作り方のサイトとか見ても、命令の紹介のみで応用を無視するトコばかりである。
あっても1つの命令をカッコでくくってるだけ。
サトウとコーヒー豆だけ渡してホットコーヒー淹れろと言うようなモンだ。

しかしHTMLにもスタイルシートの記述はできる。
恐ろしく効率悪いけど、FONT命令をスタイルシート命令に置き換えるのだ。
なんとかできたわい。

だがしかし。
更にスマホ表示で変な現象に悩まされる事に。

アイフォンのアホブラウザのサファリめが、文字サイズを勝手に変えてしまうのですよ。
どういうアルゴリズムかわからないけど、サイズ指定を無視してでかくしたり小さくしたり。

コレの対処法も見つけた。

-webkit-text-size-adjust: 100%;

を、bodyタグ内に記述すればページ全部の文字サイズを変えられんで済むのだ。
そのかわりページ全体の文字がPC準拠の小ささに。
見えん……。

そこで、文字サイズを変えられたくない箇所にいちいち記述すればいいらしい。

PC用サイトでスマホにも対応、ちゅうのは色々ムズかしい。
リキッドデザインだのレスポンシブデザインだの、おじさんにはようわからんとです。