4月30日:html/中央揃、font (vw利用)・XDロゴ:ロゴ作成

html

・marginをつけた場合、対象物を中央寄せして尚且つレスポンシブデザイン対応するにはメディアクエリでmarginをつけて調整しないいけないと思ってやっていたが、それぞれの画面幅で見た場合ズレてくる。各画面で調整するのはちょっと面倒だなと思って、

何か解消できる方法はないかと思って調べてみると、

【css】要素をposition:absoluteで中央に配置する最新の方法(上下左右、上下、左右) | WEBクリエイターの部屋

 position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

サイトの通りにこれを書けば常に画面の中央に対象物がくるとわかった。めっちゃ使える。

 

fontサイズに関して同様に画面幅に応じてサイズ指定しなければならないと思ったが、面倒だったので調べてみたら

pxをvwに変換(ブラウザ上で変換) | マリンロード

f:id:hinairo:20210430233517p:plain

こんなんがあったので、サイトを利用してサイズを計測しながらpxをvwに置き換えてみるとどの幅でもfontサイズが画面に応じて変わるのがわかった。便利!

 

 

 

XD

昨日作ったロゴの続きで字を配置するのにフォントが何かわからなくて、XDに入っているフォントを一つづつ調べていたが、近い様なものはあれど同じものは見つからず。

どうしようかと思い、検索サイトがないか調べたところ、

www.myfonts.com

このサイトにロゴ画像を貼り付けたらフォントが判明!だがフォントをダウンロードするには購入しなければならないので、フリーのダウンロードできるとこがないか探してみたらあった。

ダウンロードして当てはめて無事完成。

f:id:hinairo:20210501002027p:plain