• はてなブックマーク
  • テクノロジー
  • CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相
  • Twitterでシェア
  • Facebookでシェア

CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相

テクノロジー カテゴリーの変更を依頼 記事元:coliss.com
適切な情報に変更
437users がブックマーク コメント 27

    記事へのコメント27件

    • 注目コメント
    • 新着コメント
    オーナーコメントを固定しています
    coliss
    オーナー CSSの単位pxとrem（em）のどれをどこで使うべきか。

    その他
    tamanecoplus
    ゼロからデザイン組むならrem一択。既存のデザインに手を加えるなら現行の単位指定に従うのが無難。

    その他
    ejointjp
    メディアクエリの指定以外はほぼrem一択だけど、フォントサイズに比例して要素の余白を変えたいときとかはemもある。でも最近はすべてをシンプルにってことでやっぱりrem一択。

    その他
    ckom
    文字のサイズはpx,remで迷えど、図形/レイアウト的なサイズはpxだと画面サイズの違う端末で事故るのでvwとcalcがどんどん増えてきます。

    その他
    deep_one
    rem知らなかった…rootでのemか。emが「mの幅ぐらい」というの書いてないな。何文字分ぐらいの幅がいるという時にemで指定するから、テキストボックスの幅はemじゃないか。

    その他
    mayumayu_nimolove
    最近はpx使う。calcやsassでvw可変させる。remもpxも絶対値なのでどっちでもいいけど、わかりやすいpxの方が良い。emいらない。

    その他
    toblog
    適した要素に適した単位をつければ良いと思う派だけど、rem一択の人ってまさかborderとかにまでrem使うの？

    その他
    fujibay1975
    LPは見出しが命。 最近は、 見出しはmin関数でvwと最大値をpx、 本文はpx、余白はem。あと強調したい文字はemでジャンプ率だけ指定。

    その他
    xxxxxxxxlarge
    脳死でhtml{10px}で1.6remとかやるよりは16pxでやったほうがいい。てか、ちゃんとrem理解してスタイル当ててるコード見たことないわ。

    その他
    オーナーコメントを固定しています
    coliss
    オーナー coliss CSSの単位pxとrem（em）のどれをどこで使うべきか。

    2022/06/07 リンク

    その他
    youko03
    “remは「Root EM」の略です。 rem単位はem単位と似ていますが、ルートノードである<html>要素のフォントサイズの倍数である点が異なります。継承されたフォントサイズは無視され、常にトップレベルのノードに基づいて計算

    その他
    vottie
    あとで読みます

    その他
    fujibay1975
    fujibay1975 LPは見出しが命。 最近は、 見出しはmin関数でvwと最大値をpx、 本文はpx、余白はem。あと強調したい文字はemでジャンプ率だけ指定。

    2022/06/08 リンク

    その他
    xxxxxxxxlarge
    xxxxxxxxlarge 脳死でhtml{10px}で1.6remとかやるよりは16pxでやったほうがいい。てか、ちゃんとrem理解してスタイル当ててるコード見たことないわ。

    2022/06/08 リンク

    その他
    kvx
    アクセシビリティをなにも考えず左右もrem使ってしまって後悔。上下ならいいけど。ただ文字以外にrem使う必要ないな。

    その他
    toblog
    toblog 適した要素に適した単位をつければ良いと思う派だけど、rem一択の人ってまさかborderとかにまでrem使うの？

    2022/06/07 リンク

    その他
    nlogn
    emが組版において「mの幅」に由来していることを説明しておいた方がいい。CSSにはないが、enは「nの幅」でem の半分の長さ。

    その他
    kuroaka1871
    remもemもpxも使ってしまう。。。

    その他
    Keisuke69
    rem難しい…

    その他
    remonoil
    基本はrem、1pxとかのみpx

    その他
    Phenomenon
    IEのこと考えなくて済むようになったからrem活用できるようになった。

    その他
    ejointjp
    ejointjp メディアクエリの指定以外はほぼrem一択だけど、フォントサイズに比例して要素の余白を変えたいときとかはemもある。でも最近はすべてをシンプルにってことでやっぱりrem一択。

    2022/06/07 リンク

    その他
    helldeath
    コリスはたまにこういう俺的に超ありがたい記事を出してくれるので一目置いてます。

    その他
    xlc
    見出し(h1とか)の font-size 指定は % でするのが手癖になっているのだが、まずいのかな。ブラウザのデフォルト値が確か % 指定なんで、それを上書きする意図で同じ単位を使ってる。後は form 内で font-size: 100%; をよく使う。

    その他
    tmyk_kym
    メモ

    その他
    mayumayu_nimolove
    mayumayu_nimolove 最近はpx使う。calcやsassでvw可変させる。remもpxも絶対値なのでどっちでもいいけど、わかりやすいpxの方が良い。emいらない。

    2022/06/07 リンク

    その他
    hirose504
    ちゃんと理解したい

    その他
    ckom
    ckom 文字のサイズはpx,remで迷えど、図形/レイアウト的なサイズはpxだと画面サイズの違う端末で事故るのでvwとcalcがどんどん増えてきます。

    2022/06/07 リンク

    その他
    spark7
    「ルートフォントサイズを62.5%;にして」ルートを10pxにするのと何が違うんだろ。/ さらにルートのブラウザのフォント設定サイズみたいのに反応するのか。

    その他
    tamanecoplus
    tamanecoplus ゼロからデザイン組むならrem一択。既存のデザインに手を加えるなら現行の単位指定に従うのが無難。

    2022/06/07 リンク

    その他
    nicht-sein
    最後のCSS変数を使うパターン、いいな。そう言えばcss変数は数値始まりもありなのか

    その他
    yasu-log
    ダイナミックタイプ対応（font: -apple-system-body;）もして欲しい派。

    その他
    soratomo
    line-heightとかfontに絡む部分にはrem使うことあるけど、それ以外は使ってないなぁ。62.5%テクニックは、開発者都合のテクだと思うので最近は使うのを避けてる。

    その他
    ttkazuma
    ？ "こういった経験を重ね、特定の状況で何をすべきかを自分の目で確かめることで、強い直感を養うことができます。"

    その他
    misarine3
    remにこだわりまくるケースたまにあるけど、sassかませないとコントロール面倒なんだよな。

    その他
    deep_one
    deep_one rem知らなかった…rootでのemか。emが「mの幅ぐらい」というの書いてないな。何文字分ぐらいの幅がいるという時にemで指定するから、テキストボックスの幅はemじゃないか。

    2022/06/07 リンク

    その他

    注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

    アプリのスクリーンショット
    いまの話題をアプリでチェック！
    • バナー広告なし
    • ミュート機能あり
    • ダークモード搭載
    アプリをダウンロード

    関連記事

    CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相

    CSSの単位px、em、remは、どれをどこで使用するのがよいか。 font-sizeの値にはどの単位を使用していま...

    ブックマークしたユーザー

    • kikiki-kiki2023/08/23 kikiki-kiki
    • yukirin06122023/08/15 yukirin0612
    • cyber_snufkin2023/04/01 cyber_snufkin
    • youko032023/02/08 youko03
    • kkeisuke2023/01/17 kkeisuke
    • samurairodeo2022/12/23 samurairodeo
    • vottie2022/08/19 vottie
    • gazza0692022/07/24 gazza069
    • mag4n2022/07/12 mag4n
    • szmk2022/06/26 szmk
    • jytech2022/06/25 jytech
    • zaki10102022/06/12 zaki1010
    • k3akinori2022/06/10 k3akinori
    • astk_f2022/06/10 astk_f
    • mtom0292022/06/09 mtom029
    • cometnote2022/06/09 cometnote
    • k_oshima2022/06/08 k_oshima
    • kumamax2022/06/08 kumamax
    すべてのユーザーの
    詳細を表示します

    同じサイトの新着

    同じサイトの新着をもっと読む

    いま人気の記事

    いま人気の記事をもっと読む

    いま人気の記事 - テクノロジー

    いま人気の記事 - テクノロジーをもっと読む

    新着記事 - テクノロジー

    新着記事 - テクノロジーをもっと読む

    同時期にブックマークされた記事

    いま人気の記事 - 企業メディア

    企業メディアをもっと読む

    はてなブックマーク

    公式Twitter

    はてなのサービス

    • App Storeからダウンロード
    • Google Playで手に入れよう
    Copyright © 2005-2025 Hatena. All Rights Reserved.