rem

CSS単位

概要

 状態:-  閲覧数:3,315  投稿日:2016-03-06  更新日:2020-03-16
「ルート要素の文字サイズ」を基準にするCSS3の単位

ルート要素とは?
・html要素

フレームワーク導入事例
・Bootstrap4

比較一覧表
単位 指定 特徴
px 絶対指定 指定したサイズ
em 相対指定 親要素を基準に計算される
% 相対指定 親要素を基準に計算される
rem 相対指定 root要素(html)を基準に計算される
CSS3の新単位remで、文字サイズの指定を分かりやすく

rem × Bootstrap4

 閲覧数:420 投稿日:2016-03-08 更新日:2016-03-13

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が最新で最強じゃないの?

 閲覧数:386 投稿日:2016-03-29 更新日:2020-05-18

rem使用の問題点


数字のみ目立たせたい

下記問題点
・表示場所に応じた大きさ変化が出来ない
・ルートに対する大きさではなく、その場所のフォントサイズより少し大きくしたい
.ymdnum {
   font-style: italic;
   font-size: 1.1rem;
}


相対値へ変更
.ymdnum {
   font-style: italic;
   font-size: 1.1em;
}


remが最新で最強じゃないの?





単位



週間人気ページランキング / 3-22 → 3-28
順位 ページタイトル抜粋 アクセス数
1 Design 0 42
2 LOCK: File currently in use. / マニフェストを読み込めませんでした 10
3 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 7
4 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 6
4 16進数カラーコード / 2進数 6
4 navタグで定義している部分だけCSSが効かない【html5】 | HTML5(HTML) 6
5 HLS / HSL 4
5 HTML5でiframeスクロールバーを表示しない方法が不明 | HTML5(HTML) 4
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 2
6 画像大きさ | 他サイト調査(HTML) 2
6 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 | Backgrounds and Borders Module(CSS) 2
6 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 2
7 Google Chrome を閉じた際にバックグラウンド アプリの処理を続行する / ハードウェア アクセラレーションが使用可能な場合は使用する 1
7 Chromeで名前を付けて保存する際、ファイルを一つにする方法 1
7 ログイン 1
7 「font-size」効果を打ち消すスタイルシートは、「font-size:100%;」? 1
7 イラスト素材 | デザイン 1
7 RGB → 色相H … 最小値基準 × 図形 の考え方 | 色変換(色) 1
7 36ビットカラー 1
7 RGBの種類 / ビットカラー | RGB(色) 1
2024/3/29 1:01 更新