【プログラミング・Web制作勉強ログ#70】5/15の積み上げ成果

2022年5月16日

今日の積み上げ 156日目成果

#今日の積み上げ 156日目成果

①5/14日報執筆⇒◎
②デザインカンプ中級編(Sass)
　・レスポンシブデザイン⇒10％
(その他)
・隙間時間のインプット⇒3本
・学習の改善点検討⇒△
・断スイーツ(20日目)⇒◎
— おかつ🌱開業準備中 (@o_89965328_k) May 15, 2022

＼宣言した内容はこちらです／

本日の学び

私・・・「vw」「vh」から逃げない！！

　　レスポンシブデザインをする上で、特に「幅の設定」は重要な要素。なぜなら、絶対値（例：px）で設定すると絶対にずれるから！！

　つまり、相対値で設定し、画面幅に合わせて対象幅を可変させることが大事である。ｴﾍﾝ（誰でも知ってるって）。

　しかし、％ならよくわかるのですが、「vw(viewport width)」や「viewport height」はよくわからないまま書いていたことが多く…。よくわからないまま書いてもどうしようもないですよね。

　碇シンジだって「逃げちゃだめだ！逃げちゃだめだ！！！」と言って向き合ったんだ。私だって逃げずにググりまくってやる～～～。

参考記事メモ

　●　基本的な解説

JAJAAAN

【CSS】vw、vh、vmin、vmaxとは？基本的な使い方 CSSで使う単位で、vw、vh、vmin、vmaxというものがあるのをご存じでしょうか。CSSでよく使う単位といえば、「px」「%」がおなじみです。今回は、レスポンシブデザインが一…

　●　％との違いはなに？という疑問を解消する解説

TOBI Designer's Blog

レスポンシブの単位は『vh,vw』が便利！『%』より使えるCSSの単位 | TOBI Designer’s Blog レスポンシブ全盛の今、CSSで要素の幅や高さを指定するときの単位に px よりも % を使うことが増えたと思います。でも、もっと便利な単位がありました。vh,vw。いやー不勉…

　●　注意点が詳しく書かれている解説

【CSS】100vhは「一画面」ではない…

【CSS】100vhは「一画面」ではないという罠 | JavaScriptに関するお知らせ JavaScriptのwebサイト。JavaScriptの最新情報など様々な情報をご覧いただけます。

とりあえず、いっとく！

【CSS】100vwはスクロールバーを含むという罠こんにちは。いっとくです！エンジニアですがCSSがあまり好きではありません。なぜならエラーが出ないから！つい先日、webサイトに新しいページを追加していた時のこと。横…

　●　（応用編）ClampとSassの関数を使ってvwの計算を省略する方法

BLOG / KISHIN

clamp()はSassと組み合わせると快適／ブログ by Kishin Webデザインでは、デバイス毎にCSSの記述を変えて、各対象デバイスで快適に閲覧できるようにすることが好ましい

　これらの解説を超簡単にまとめると、こんなかんじ。

vw、vhは「表示されている画面幅」を100としたときの相対値。
「％」は「親要素」を100としたときの相対値。
　⇒例えば、「親要素」自体の単位も「％」である場合があり、なんでもかんでも「％」で設定してもレスポンシブ表示でしっくりこない場合がある
「画面幅」はスクロールバーの幅も含まれる
　⇒「画面幅いっぱい」という設定にしたい場合は、vwを使うより、素直に「width: 100%;」を使う方が良い。
　⇒親要素に左右されない子要素を設定したい場合にオススメ
　　（色んな解説を見る限り、文字サイズの設定でvwを使用するのが良さそう）。
スマホ画面でのvw＆vhの設定は要注意
　⇒例：vwで設定した文字サイズが、スマホの縦画面ではちょうどよく表示されていたが、横画面に切り替えたら急に文字サイズが大きくなり、いびつなレイアウトになった。
　⇒vmin、vmaxの概念の理解が必要。
　⇒そもそもスマホ画面サイズではvw＆vh自体を使わなくてもいいかも。