とにかくフッターはなんとかなったけど。

気になるところが次々と…

こんにちは。サキナオコです^ ^
今日は曇ってきて相変わらず寒いです。こたつが最高。

いつもご覧いただき、スキ、フォロー、コメント、サポート、オススメまでも本当にほんとうにどうもありがとうございます＊^o^＊
今日もめげずに投稿できましたのもそんなあなたのおかげです！^o^/

はい、引き続きフッターをなんとかする、です。
ラインマーカーになる原因がわかりました。
どうやらCSSの指定で

	justify-self: center;
	align-self: center;

とかやっていたのがよくなかったようです。何故かよくわかりません。

色々調べまして、

   display: flex;
   align-items: center;
   justify-content: center;

としたらうまくいきました^o^

欲が出て更に、そのフッターの下に隙間ができないようにできないのかしら、と思いました。いろいろ調べている時にそんなような記事があったように思いました。ま、とりあえずは先へ進みます。

リンクとプロフィールも入れてみました。

そして、いろいろやっているうちにフォントや長さの単位のことが気になりだしました。

定番のpxはいいとして、相対的な単位のem とか viewport(vw,vh)などがあるようです。レスポンシブなサイトにはこちらを使うのが良さそうなのです。ちょっと調べるに

em(”エム”と呼ぶのだそう)とは親要素のfont-size を1とするもので特に指定がなければ1em = 16pxとのこと。でも親要素のfont-sizeが20pxだったら、1em = 20pxになるという。親要素が実権を握っているんですね。

CSS3からremという便利そうなものが出たそうで。
htmlとかの要素に基準の大きさ{font-size: 62.5%;}にすると
1rem = 10pxになるので、それを後々使用するときに便利なんだとか。15pxの大きさを指定したい場合は、1.5remという風に。

viewportはブラウザ等で表示されている領域を表すもので、1vhはその高さの１％、1vwは横幅の１%のこと。

じゃあ、これらどう使い分けるのだろう？？と思い調べると
pxはボーダーラインとかボックスシャドウとかのライン系、remはマージン、パディング、フォントサイズなどに。viewportはレイアウトで%のかわりに。という感じらしいです。

ということで、em は使わずに、font-size,padding,marginはremを使用、viewportはレイアウト系に使用してみました。

できたサイトを広げてみると文字が大きくなります。縮めると小さくなります。面白い(*´艸`*)

左のリンクが縮めるとおかしな感じに一瞬なるので調整が必要な感じです。ま、でも70%位はできたでしょうか。あともう少し！！（トップページだけですが…）