Тёмный

【初心者向け】CSSで使える単位の特徴や使い分けを解説!「vw / vh」「em」「rem」って何?【HTML・CSS コーディング】 

Webの神様
Подписаться 48 тыс.
Просмотров 17 тыс.
50% 1

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/

Хобби

Опубликовано:

 

22 окт 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 32   
@user-tg41fuj8sqt6n
@user-tg41fuj8sqt6n Год назад
何でこうなるのかという部分を解説してくれているので理解が深まります。ありがとうございます😊
@webgodweb
@webgodweb Год назад
嬉しいご感想ありがとうございます🙇‍♀️
@KennyFully
@KennyFully Год назад
とても便利ですね!この動画をありがとうございます!初心者の時、こう言う動画が必要でした。本当にウェブ開発は楽しいね!
@webgodweb
@webgodweb Год назад
いつもご視聴ありがとうございます!!☺️
@takkun4874
@takkun4874 Год назад
TwitterのDMからリクエストさせて頂いた内容の動画をアップして頂き、大変ありがとうございます!とても分かりやすかったです!これからも動画を参考にさせて頂きたいと思います😊
@webgodweb
@webgodweb Год назад
ご返信遅くなりすみません! DMはたくさんいただいておりまして、中々お返事できない状況で失礼いたしました🙇‍♀️ この度はリクエストいただきありがとうございました!✨
@mokamoka1558
@mokamoka1558 Год назад
vw/vhが理解できました!検証画面を使ったご説明でイメージがしやすかったです。ありがとうございました。
@webgodweb
@webgodweb Год назад
こちらこそご視聴ありがとうございます!お役に立てて良かったです🙇‍♀️
@user-bf9us2ug4r
@user-bf9us2ug4r Год назад
わかりやすく勉強になりました。 remや%がいまいち分からなくて困ったました。 ありがとうございます。
@webgodweb
@webgodweb Год назад
お役に立ててよかったです!!ご視聴ありがとうございます🙇‍♀️
@akiokunn9962
@akiokunn9962 11 месяцев назад
あいまいだったところがまた理解できました😮‍💨ありがとうございます!!ほんとわかりやすい!!
@webgodweb
@webgodweb 10 месяцев назад
これからもお役に立てるように頑張ります!!
@norih7650
@norih7650 Год назад
いつも有益な情報ありがとうございます! 私は今中級程度の知識でまさに単位をどう使うべきか悩んでる時期です💦 最近はfont-sizeを html { font-size: 62.5%} に指定して10px基準でやったりしてるん ですがアクセシビリティ的にはあまりよくない方法なんでしょうか💦 paddingにはem、widthには何を使う😣?って感じで迷子になってます。 アドバイス頂けると嬉しいです🙇‍♀️
@user-qv8pv8be4b
@user-qv8pv8be4b 4 месяца назад
ハロウィーンのかぼちゃのアンテナがかわいいです。いつも楽しく見ています。勉強になりました。動画作成ありがとうございます。感謝しています。✨🎗🎀🌺💝💕
@tktc0720
@tktc0720 11 месяцев назад
いつもわかりやすい説明で勉強させてもらってます。 プログラミング=徹夜=レッドブル(エナジードリンク)のイメージありますがなつこさんもそーゆーことありますか?
@webgodweb
@webgodweb 11 месяцев назад
コメントありがとうございます! はい、あります😂 もともと夜型なのと、一人で作業に集中したいときは、やっぱり人から連絡もこない夜中が捗ったりするので、、、デザイン系やエンジニア系は、夜間に作業に没頭したいと思う人が多いかもしれません。 そういう時はレッドブルが最高のお供です…💪
@user-gb1cy5mr9g
@user-gb1cy5mr9g Год назад
大変わかりやすかったです。スマホでもPCでもどのようなデバイスでも基本は16px が基準とされる事が多いのでしょうか?
@webgodweb
@webgodweb Год назад
コメントありがとうございます! そうですね、下記MDNのドキュメント内でもデフォルトを16pxとして話をしていたりしますが、基本的に現在の主要ブラウザ(Google Chrome, Safari, FireFox, Microsoft Edge)の標準文字サイズは16pxとなっているようです。 developer.mozilla.org/ja/docs/Web/CSS/font-size 文字サイズを特に指定しない、テキストだけのhtmlファイルを用意してみて、それぞれのブラウザで表示してみると厳密に確認できるかと思います。
@user-zr3bi6jw5d
@user-zr3bi6jw5d Год назад
カボチャかわいいですね。
@webgodweb
@webgodweb Год назад
コメントありがとうございます🎃🎃
@node_python_lover454
@node_python_lover454 Год назад
既に知っていたので見る必要なかったのですが、サムネが可愛かったので動画見ました。 邪な理由ですみません笑
@webgodweb
@webgodweb Год назад
どんな理由でも嬉しいです!!😂😂ご視聴ありがとうございます!
@user-wv5rl3ws5s
@user-wv5rl3ws5s Год назад
かわいい被り物ですね
@webgodweb
@webgodweb Год назад
ダイソーで買いました!🎃🎃
@user-wv5rl3ws5s
@user-wv5rl3ws5s Год назад
@@webgodweb とってもかわいさが強調されていますよ!
@KentaroxKondo
@KentaroxKondo Год назад
いま縦長のlpを作成中ですが、フォントにvwをかけまくっているので大変なことになっています😂 これはあまりやらない方が良いやり方だったのですかね…
@webgodweb
@webgodweb Год назад
ご返信遅くなり大変失礼いたしました🙇‍♀️ vwは、常に画面幅に対して一定の比率で文字を表示させたいときに使うべきですが、それ以外で多用してしまうと、予期せぬレイアウト崩れが起こりやすいかと思います。。 例えば、ファーストビューのキャッチコピーなど、重要なテキストの文字サイズをバッチリ決めたいときに、私はよく使います!
@KentaroxKondo
@KentaroxKondo Год назад
@@webgodweb ご返信ありがとうございます!小さすぎたりでかすぎたりしてしまう部分は、clampを使って無事に解決できました!vwの指定、今後は気をつけます😂
@user-ky1uf6hx1p
@user-ky1uf6hx1p Год назад
すごい分かりやすかったです。アナタ様はもしかして神様ですか!?
@webgodweb
@webgodweb Год назад
ありがとうございます!!お役に立てて嬉しいです☺️
@yuuki-ww3hz
@yuuki-ww3hz 6 месяцев назад
質問です! emは、親の文字サイズをみて 子要素の文字サイズが変わるという事だと思いますが、 たまに、paddingやwidthにも指定がされてます。 こちらは、文字限定な訳では無いんでしょうか?
@webgodweb
@webgodweb 6 месяцев назад
emは、あくまで「文字の大きさ」を基準に計算された値を指定するときの単位だと考えてください。 font-size: 1em; であれば、仰るように「親要素の文字サイズを基準に文字サイズを決める」ということになりますが、 padding: 1em; width: 10em; であれば、「その要素自身の文字サイズを基準に、余白や要素の横幅を決める」という考え方、使い方になります。em指定は、文字サイズの指定のみに使うものではありません。
Далее
УРА! Я КУПИЛ МЕЧТУ 😃
00:11
Просмотров 461 тыс.
Nika loves to eat chicken #cat #cats
0:17
Просмотров 30 млн
Нашел котенка 😭
0:53
Просмотров 3,5 млн