概要
状態:-
閲覧数:878
投稿日:2016-03-06
更新日:2020-03-16
「ルート要素の文字サイズ」を基準にするCSS3の単位
ルート要素とは？
・html要素
フレームワーク導入事例
・Bootstrap4
比較一覧表
・CSS3の新単位remで、文字サイズの指定を分かりやすく
ルート要素とは？
・html要素
フレームワーク導入事例
・Bootstrap4
比較一覧表
| 単位 | 指定 | 特徴 |
|---|---|---|
| px | 絶対指定 | 指定したサイズ |
| em | 相対指定 | 親要素を基準に計算される |
| % | 相対指定 | 親要素を基準に計算される |
| rem | 相対指定 | root要素（html）を基準に計算される |
rem × Bootstrap4
bootstrap-4.0.0-alpha.2
ルート要素(html)フォントサイズ
・16px
▼dist/css/bootstrap.css
html {
font-size: 16px;
-webkit-tap-highlight-color: transparent;
}bootstrap-4.0.0-alpha.2のサイズ表記はバラバラ
当初予想
・html にだけpx指定
・後は全てrem
実際
・バラバラ
・ドキュメントとの整合性も取れていない
具体例
Overview
・Responsive breakpoints
・@media (min-width: 34em) { ... }
Responsive utilities
・Available classes
・Portrait phones (<34em)
bootstrap.css at v4-dev
▼dist/css/bootstrap.css
・@media (min-width: 544px) {
現状
実際のbootstrap.css
・下記単位が混在
・rem
・em
・px
・%
rem使用の問題点 ／ remが最新で最強じゃないの？
rem使用の問題点
数字のみ目立たせたい
下記問題点
・表示場所に応じた大きさ変化が出来ない
・ルートに対する大きさではなく、その場所のフォントサイズより少し大きくしたい
.ymdnum {
font-style: italic;
font-size: 1.1rem;
}
相対値へ変更
.ymdnum {
font-style: italic;
font-size: 1.1em;
}
remが最新で最強じゃないの？
Twitter検索結果。「rem」に関する最新ツイート
寝ぼけのうかちゃん @uka_nano08@xoxo_Rem_xoxo 僕じゃナイスかァ！ 2021/08/02 07:44
れむ @rem_trpg97シナリオで確実に狂うよ…っていううちよそも大好きなんだけどそういうわけではないシナリオでRPで狂っていくのがすごくすき 物語性があって 2021/08/02 07:42
【AMT】canan@ハイドマン( *¯ ꒳¯*) @canan_NKR_AMT@Rem_Br54 寝ながらキーマウw(仰向け) 2021/08/02 07:42
💘🌸🦅レム㌨〆ふぁんでっと🦋【るしあちゃんガチ恋勢】【レ】💙 @Rem_Br54@canan_NKR_AMT ヤバいってwww 2021/08/02 07:42
【AMT】canan@ハイドマン( *¯ ꒳¯*) @canan_NKR_AMT@Rem_Br54 あぐらかいてキーマウwww 2021/08/02 07:41
あられ🐈⬛🗝💸 @rem_a000なんか寝るのが勿体ない気がしてきたので脳死スプラトゥーンします。 2021/08/02 07:41
💘🌸🦅レム㌨〆ふぁんでっと🦋【るしあちゃんガチ恋勢】【レ】💙 @Rem_Br54@canan_NKR_AMT なんでやねんw
キーマウなら普通にイス使うわ 2021/08/02 07:40
かに @K_red_cancer@Rem_Kurumi_Love ありがとうございます！！((๑✧ω✧๑)) 2021/08/02 07:40
【AMT】canan@ハイドマン( *¯ ꒳¯*) @canan_NKR_AMT@Rem_Br54 なるほど、、、あっそっかキーマウじゃないのかww
キーマウかと思って「足？！」ってなったww 2021/08/02 07:39
ケンタロウ【😻】 @kenkenwith@onigiri_ume88 @rem_ep 参加させて頂きます…よろしくお願いいたします☺️ 2021/08/02 07:39
💘🌸🦅レム㌨〆ふぁんでっと🦋【るしあちゃんガチ恋勢】【レ】💙 @Rem_Br54@canan_NKR_AMT だってあぐらばかりかいてたから 2021/08/02 07:39
ラム&レム @ram_rem_serifu飼い犬に手を噛まれるとは、このことね。 2021/08/02 07:38
ラム&レム @ram_rem_serifu仕事が軌道に乗ったら、
その・・・恥ずかしいですけど・・・子供とか・・・、
鬼と人のハーフですので、
きっとわんぱくな子になります。 2021/08/02 07:38
【AMT】canan@ハイドマン( *¯ ꒳¯*) @canan_NKR_AMT@Rem_Br54 足？！ 2021/08/02 07:38
フォウ @ssqseeker@REM_ORINRIN QP稼いできます！！()( 2021/08/02 07:37
アシッド @acid_ecst@rem_alice おやありฅ•ω•ฅ 2021/08/02 07:36
レム＠誰も知らない美容睡眠法 @rem_biyou_sleep
R e m ❀ @Rem_haru_nスバルくんは、ひどい人です。振ったばっかりの相手に、そんなことを頼むんですか？
#Rembot 2021/08/02 07:35
レム @Rem_replica……さっきから何をしてるんですか？扉の建付けの確認ですか？ #rezero 2021/08/02 07:34
気体 @ggl661199@S_914_52113 ReMさん、おはようございます☀️🙆 2021/08/02 07:34
ひぽぽーたます (Hippopotamus) @hippopotamus89
お題bot＠レム睡眠 @rem_odaiおはようからおやすみまで 2021/08/02 07:33
れむち☃️そろそろ復活 @xoxo_Rem_xoxoもうさ、「ちゃんと寝てますか？」とかの質問いらないよ笑
人間だからちゃんと寝てるから!!笑 2021/08/02 07:33
まふ🎀ᴬᴺᴵᴹᴬ @mafumofu_FF14@REM_LEM レムさんおはようございますー！ 2021/08/02 07:33
ℝ𝔼𝕄@8/5 世界会議-ティアット- @rem_dqx