こたつの中のすしねこ

お気持ち表明!w

flexboxを使ったレスポンシブデザイン

最近研修が忙しくてろくにプログラミングできてなかったのですが、

やっとこさ落ち着いたので前回言っていたdisplay:flexを使ったレスポンシブデザインを

実装しました。

 

ポイントは、

1.メディアクエリを使ってhtmlタグにfont-sizeを設定する

2.resizeメソッドを作成して、一定の幅でクラスをバインディングする です!

 

1に関しては、"rem"を正しく使うためですね。

remとはなんぞや。という方は "rem css"などでググればいいと思います(人任せ)

 

レスポンシブを作るうえで最大の障壁はfontやimgのサイズなのかなと

現段階の僕は考えています。

要はpx(絶対指定)だとちっちゃい画面で見た時もでかい文字で困るよねってコト!

なので、相対指定こそ正義だ!と感じたわけです。

     

        <じゃあemってあるよね?それでもよくね?>

 

ワイトもそう思いました。けど、emって親要素を参照するんで、

適宜変更しないといけなくて面倒なんですよね。

 

ガチプロバケモンwebデザイナーからすると、

「使い分けもできねーのか!雑魚が!!」

と感じる方もいると思いますが、僕は一応Javaとか使うはずの

バックエンドエンジニアなんで・・・(逃げの構え)

とりあえずは vw vh rem px の4単位で作業を進めたいと思います。

 

長くなっちゃいました。次は2に関してですね。

これについてはVueを最大限活かすポイントで、良い収穫になりました。

やり方は、要素全体をdivタグで囲み、画面幅が一定未満になれば

responsive といった名前のクラスをバインドするだけです。

そうすると、ヘッダーをハンバーガーメニューにする。フッターは列にする。

といった操作や変更が容易でいいな~と気に入ってる部分です。

 

ただ、一つ気になるのが画面幅が切り替わる度にメソッドが実行されるということは、

それなりにリソース喰ってそうだなぁ。。。ってことです。

 

これに関しては、デバウンスを使う(多分間違ってる気がする)とかなんですかね。

学習不足ゆえ、課題として心の隅のちょい真ん中寄りぐらいに置いておきます。

 

そして、こんなブログを見ている人は少ないとは思いますが語ります。

 

(ここからは初心者プログラマーのお気持ち表明)

特に、自分よりまだ未熟なエンジニアに対してです。(少ないけど)

 

今回は小規模なトップページの実装だったので、要素が入り組んだ大規模なサイトだと

また作り方が変わると思います。なので、鵜呑みだけはしないでください!

 

プログラミングで一番大事なのは、まず書いて(コピペでもいいけど極力ctrl+c,ctrl+vは控える)

なぜそういう書き方をしているのかを理解する。だと思います。

なので、僕のことも最初から信じず一度書いていいとこだけ取り入れてくれればいいと思ってます。(実際僕のコードは間違いだらけで、指摘が欲しいぐらいなんで・・・)

 

また、このことに関しては、新人研修で3ヶ月間未経験の方と一緒に学習したので、

別の記事に詳しくお気持ち表明します。