【初心者向け】CSSで使える単位の特徴や使い分けを解説！「vw / vh」「em」「rem」って何？【HTML・CSS コーディング】
Вставка
- Опубліковано 22 жов 2022
- CSSで使える単位には何種類かありますが、「px指定」や「%指定」しか使ったことがない…という方や、色々聞いたことがあるけど使い方が分からない…という初心者の方は多いんじゃないでしょうか。
この動画を観れば、今日から使い分けはバッチリです！
★★★「Webの神様」メンタープランのご案内★★★
ナビゲーターの「なつこ」が講師となって、皆さんのWebデザイン・プログラミング学習をサポートする「メンタープラン」を実施中です！
【お知らせ動画】
「Webの神様」があなたのメンターになります
• 【お知らせ】「Webの神様」があなたのメンタ...
【プランの詳細・お申し込み（MENTA）】
menta.work/plan/5148
未経験から学習中の方、Web・IT業界に就職・転職活動中の方、フリーランス独立を目指して活動中の方など、必要として頂いている皆さんのお役に立てるように精一杯サポートさせて頂きます！
是非ともご検討いただければ幸いです。
★★★★★★★★★★★★★★★★★★★★★★★
=== 関連動画はこちら ===
【超入門】HTML・CSSってなに？学習の始め方解説 2021年最新版【未経験・初心者向け】
• 【超入門】HTML・CSSってなに？学習の始...
【超入門】たった20分でまるわかり！HTMLをはじめてみよう【HTML・CSS コーディング】
• 【超入門】たった20分でまるわかり！HTML...
【超入門】初心者向け 模写コーディング！オススメのやり方とポイント【HTML・CSS コーディング】
• 【超入門】初心者向け 模写コーディング！オス...
【超入門】初心者必見！模写コーディングをやってみた 実践編【HTML・CSS コーディング】
• 【超入門】初心者必見！模写コーディングをやっ...
【超入門】初心者あるあるのつまづき回避！CSSをはじめてみよう（前編）【HTML・CSS コーディング】
• 【超入門】初心者あるあるのつまづき回避！CS...
【超入門】初心者あるあるのつまづき回避！CSSをはじめてみよう（後編）【HTML・CSS コーディング】
• 【超入門】初心者あるあるのつまづき回避！CS...
-- Webの神様 --
未経験、初心者のみなさんのHTML・CSSの学習を応援していくチャンネルです！
【タグ】
#コーディング #プログラミング
【SNS】
-- Twitter --
/ webgodweb
-- Facebook --
/ webgodweb
【運営会社】
株式会社カラフルクローバー
www.colorful-clover.co.jp/ - Навчання та стиль
vw/vhが理解できました！検証画面を使ったご説明でイメージがしやすかったです。ありがとうございました。
こちらこそご視聴ありがとうございます！お役に立てて良かったです🙇♀️
とても便利ですね！この動画をありがとうございます！初心者の時、こう言う動画が必要でした。本当にウェブ開発は楽しいね！
いつもご視聴ありがとうございます！！☺️
何でこうなるのかという部分を解説してくれているので理解が深まります。ありがとうございます😊
嬉しいご感想ありがとうございます🙇♀️
あいまいだったところがまた理解できました😮💨ありがとうございます！！ほんとわかりやすい！！
これからもお役に立てるように頑張ります！！
TwitterのDMからリクエストさせて頂いた内容の動画をアップして頂き、大変ありがとうございます！とても分かりやすかったです！これからも動画を参考にさせて頂きたいと思います😊
ご返信遅くなりすみません！
DMはたくさんいただいておりまして、中々お返事できない状況で失礼いたしました🙇♀️
この度はリクエストいただきありがとうございました！✨
わかりやすく勉強になりました。
remや%がいまいち分からなくて困ったました。
ありがとうございます。
お役に立ててよかったです！！ご視聴ありがとうございます🙇♀️
いつも有益な情報ありがとうございます！
私は今中級程度の知識でまさに単位をどう使うべきか悩んでる時期です💦
最近はfont-sizeを
html { font-size: 62.5%}
に指定して10px基準でやったりしてるん
ですがアクセシビリティ的にはあまりよくない方法なんでしょうか💦
paddingにはem、widthには何を使う😣？って感じで迷子になってます。
アドバイス頂けると嬉しいです🙇♀️
ハロウィーンのかぼちゃのアンテナがかわいいです。いつも楽しく見ています。勉強になりました。動画作成ありがとうございます。感謝しています。✨🎗🎀🌺💝💕
いつもわかりやすい説明で勉強させてもらってます。
プログラミング＝徹夜＝レッドブル（エナジードリンク）のイメージありますがなつこさんもそーゆーことありますか？
コメントありがとうございます！
はい、あります😂
もともと夜型なのと、一人で作業に集中したいときは、やっぱり人から連絡もこない夜中が捗ったりするので、、、デザイン系やエンジニア系は、夜間に作業に没頭したいと思う人が多いかもしれません。
そういう時はレッドブルが最高のお供です…💪
大変わかりやすかったです。スマホでもPCでもどのようなデバイスでも基本は１６px が基準とされる事が多いのでしょうか？
コメントありがとうございます！
そうですね、下記MDNのドキュメント内でもデフォルトを16pxとして話をしていたりしますが、基本的に現在の主要ブラウザ（Google Chrome, Safari, FireFox, Microsoft Edge）の標準文字サイズは16pxとなっているようです。
developer.mozilla.org/ja/docs/Web/CSS/font-size
文字サイズを特に指定しない、テキストだけのhtmlファイルを用意してみて、それぞれのブラウザで表示してみると厳密に確認できるかと思います。
カボチャかわいいですね。
コメントありがとうございます🎃🎃
既に知っていたので見る必要なかったのですが、サムネが可愛かったので動画見ました。
邪な理由ですみません笑
どんな理由でも嬉しいです！！😂😂ご視聴ありがとうございます！
いま縦長のlpを作成中ですが、フォントにvwをかけまくっているので大変なことになっています😂 これはあまりやらない方が良いやり方だったのですかね…
ご返信遅くなり大変失礼いたしました🙇♀️
vwは、常に画面幅に対して一定の比率で文字を表示させたいときに使うべきですが、それ以外で多用してしまうと、予期せぬレイアウト崩れが起こりやすいかと思います。。
例えば、ファーストビューのキャッチコピーなど、重要なテキストの文字サイズをバッチリ決めたいときに、私はよく使います！
@@webgodweb ご返信ありがとうございます！小さすぎたりでかすぎたりしてしまう部分は、clampを使って無事に解決できました！vwの指定、今後は気をつけます😂
質問です！
emは、親の文字サイズをみて
子要素の文字サイズが変わるという事だと思いますが、
たまに、paddingやwidthにも指定がされてます。
こちらは、文字限定な訳では無いんでしょうか？
emは、あくまで「文字の大きさ」を基準に計算された値を指定するときの単位だと考えてください。
font-size: 1em;
であれば、仰るように「親要素の文字サイズを基準に文字サイズを決める」ということになりますが、
padding: 1em;
width: 10em;
であれば、「その要素自身の文字サイズを基準に、余白や要素の横幅を決める」という考え方、使い方になります。em指定は、文字サイズの指定のみに使うものではありません。
かわいい被り物ですね
ダイソーで買いました！🎃🎃
@@webgodweb とってもかわいさが強調されていますよ！
すごい分かりやすかったです。アナタ様はもしかして神様ですか！？
ありがとうございます！！お役に立てて嬉しいです☺️