花の歌奏

みなさま、こんにちはー(*´ω｀*)ﾉ
花です(*´ω｀*)


やっとお仕事来れたー(*´ω｀*)
といっても、まだ本調子ではないのですが、職場に来た以上しっかり頑張ります(｀・ω・´)

昨日、うちで飼い始めたハクが何度も吐き、動物病院に連れて行ったというお話を書きましたが、その後吐くこともなく、朝から私を小さいからで追いかけまわしてきました(*´ω｀*)

あんな小さい体でも走る速度は結構早くて、油断して踏みつぶさないように家族みんなで気を付けています（笑）

ちなみに、ハクは昨日の時点で500グラムしか体重がないです(*´ω｀*)

小さすぎるとかではないらしいので安心ですが、それでもたった500グラム！

本当に小さくて愛らしくてかわいいです(*´ω｀*)

元気に育ってくれることを願うばかりです！



さて、本日の記事は、ようやくホームページの作り方にお話が戻ります。

ですが、本日はちょっと難しいお話を書きます。

私のメモとしての内容になりますので、ご了承ください。




今更だけど、ホームページはブラウザによって見え方が変わる場合があります。

具体的に言えば、IEでも昔のIEと最近のIEで対応しているCSSが変わります。（IEとはインターネットエクスプローラー）
これは、IEだけの問題ではなく、最近のメジャーなブラウザ間でも見え方が変わるものがあります。

ちなみに、最近というか昔からメジャーなブラウザは、

・IE
・Fire Fox
・chrome
・edge

また、スマホ環境ということで、日本はiphoneユーザーが特に多いです。

そのため、Mac系列で使用されているsafariのことも考えないといけないし、最近では特に、LINEブラウザも無視できなくなってきています。

基本的に、現状さほど大きく違いが表れるという点で、Googleによるchromeが問題かもしれません。


最近、友人のサイト作成時に問題として起こったのは、

フォントサイズの問題。

他のサイトでは、フォントサイズを10px以下に指定しても普通に見えるけど、chromeに関しては、2019年11月27日現在で10px以下の指定をしても10pxまでの大きさしか表示されません。

調べたところによると、ちょっとうろ覚えですが、要約すると、10px以下なんてそもそも見えにくいし10px以下にしても意味がないからさせてあげないよーってことのようでした。

ですが、友人のサイトの手伝いをする上で、どうしてもお相手の注文により、10px以下を指定しなければいけませんでした。

そこでとった方法が、


font-size: 10px;
transform: scale(0.9);

という方法。

これは、10pxから縮小して表示させるという方法。

ちなみに、

transform: scale(0.9);

は、約9pxにするという方法で、本来なら括弧内は2つの数字をカンマで挟んで入力することにより、X方向とY方向の数値を入れ縮小します。

ですが、数値を1つ入れると、Y方向を同じ数値として省略でき、その方法をまず使いました。

あと、

transform:scale3d()

という方法もあるようですが、今回はそれは使いませんでした。


話は戻りますが、このままだと問題が起こりました。

問題内容は、まず、この方法で強制的に縮小しても、10pxとしての幅は維持されるという点。

さらに、縮小の「基点」が、上段の中央になってしまう点。

これにより、

text-algn: left;

ができなくなってしまう。

そこで、

transform-origin: top left;

を追加しました。

これは、transformの基準点を指定するプロパティ。

これを入れることにより、縮小の基準点を左上にできたので、

text-align: left;

が効きました。


とはいえ、前述でもある通り、

font-size: 10px;

の大きさは持ったままなので、margin等による微調整は必要です。


以上、私の為のメモでした(*´ω｀*)

いつか、この意味が分かる人が読んでくれたらそれはそれでうれしいかな(*´ω｀*)


ということで、今回はこの辺でー(*´ω｀*)ﾉ
~~~ヾ(*'▽'*)o マタネー♪