【レスポンシブ】JavaScriptでのブラウザ幅の取得について

実現したいこと

rem 単位を使って、どのブラウザ幅でも適切にレスポンシブ対応するサイトを作る方法

発生している問題・分からないこと

参考サイト：https://comone.thers.ac.jp/

上記の参考サイトのようにcssのサイズ指定の単位をremにして、レスポンシブ対応の設計を行いたいです。

別記のコードのようにCSSに記載して試してみましたが、ブラウザ幅を変えてもフォントサイズが変わりませんでした。HTMLとCSSだけでは制御が効かないのでしょうか。
Jsなどでブラウザ幅の取得などが必要なのでしょうか？

実際のコードを見ていると、ブラウザ幅を変えるたび、例えば画面幅463pxにするとHTMLに（style="--vw: 463px"）のようにブラウザの幅を指定しています。これがないため、フォントサイズが変わらないのかとおもっているのですが、認識はあっていますでしょうか？

ブラウザ幅はJsで取得しているのかと思うのですが、該当のコードが見つけられません。ただコードを記載して制御しているのか、それともライブラリなども入れているのでしょうか...？

また、他のサイトでもよくこの動き（style="--vw: 463px"）のような記載があるHTMLを見かけるのですが、今の主流でしょうか？

今回の質問の意図としては、柔軟にサイト制作をできるようになりたいと勉強中なのですが、普段はpxとvwを使ってメディアクエリでレスポンシブ対応しています。これだけでしか対応できないため、最近主流のremをつかっての正しい実装をできるようになりたいと勉強中のところです。

たくさんの質問で大変恐縮ではございますが、ご教授いただけますと幸いです。

該当のソースコード

:root {
    --base-vw: 375;
    --vw: 375px;
    --f-en: ;
    --c-black: #000;
    --c-white: #fff;
}
@media screen and (min-width: 767px) {
    :root {
        --base-vw: 1440;
        --vw: 1440px;
    }
}
html {
    font-size: 1px;
    font-size: calc(var(--vw) / var(--base-vw));
}
body {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16rem;
    font-weight: 400;
    color: var(--c-black);
}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

html {
font-size: 1px;
font-size: calc(var(--vw) / var(--base-vw));
}
body {
font-size: 16rem;
}

上記のように指定したが、フォントサイズが何も変わらなかった。

補足

特になし

utm.

2025/03/11 10:28

ブラウザ幅が何を示すのか若干不明ですが、フォントサイズはユーザーが任意に決められるのがユーザーフレンドリーであり、ブラウザの幅やビューポートの幅に依存すべきではないかと思います。質問サイトでよく「レスポンシブ」と言われてますが、HTML的に意味は無いしその上ユーザーフレンドリーでもない「レスポンシブ」にしたいものなのでしょうか、とこの質問を見て疑問に思いました。昔のサイトでボタンがカラフルにレインボーでちかちかするみたいなやつを目指してるんでしょうか。

mmmmmmy

2025/03/11 10:53

コメントありがとうございます。すみません、、昔のサイトのボタンについては私の理解が追いついていないのですが。。行いたい実装としては、例えば、参考サイトの一部のテキスト（<p class="pAbout__message_text">）だと、ブラウザ幅が425pxのとき、18.13333px・320pxのとき11.0933pxのように変化しており、これをremで指定しているので、実際に試してみたところフォントサイズに変化がありませんでした。コードをみているとブラウザ幅を取得？するような<html lang="ja" style="--vw: 463px">の記載があったのでjsなどで別途何か必要なのかと思い質問させていただきました。 html { font-size: 1px; font-size: calc(var(--vw) / var(--base-vw)); } body { font-size: 16rem; } 参考サイトでは上記のように記載があったのでそのまま試してみたのですが、ユーザーフレンドリーとなると実際html {}には何も指定はしないのが通常でしょうか？重ねての質問恐れ入ります。ご確認ほどよろしくおねがいいたします。

行動規範の内容に同意します

回答2件

ブラウザ幅が425pxのとき、18.13333px・320pxのとき11.0933pxのように変化しており、これをremで指定しているので、実際に試してみたところフォントサイズに変化がありませんでした。

このような「ブラウザの幅に依存したフォントサイズ指定」を行いたいのであれば、無理にremを使う（そして、remを状況によって変化するにはJavaScriptが必要）より、vwなどの指定にする（こちらはCSSだけでブラウザの幅に応じて変化する）ほうが合理的ではないかと考えます。

なお、clampを使って最大最小のフォントサイズを指定しておくことをおすすめします。

投稿2025/03/12 00:58

maisumakun

総合スコア146469

mmmmmmy

2025/03/12 09:47

ご丁寧にご返信いただいたにも関わらず、返信が遅くなり申し訳ありません。ありがとうございます。フォントサイズの指定について検索をしてるとremがおすすめとよく書いてあり、見よう見まねでremを使用していました。 clampはこういった形ですね↓ font-size: clamp(15px, 1.5vw, 18px); 不慣れでまだまだ苦手意識があるのですが、積極的に使用していこうと思います。。お忙しいなかご回答ありがとうございます...！

行動規範の内容に同意します

ベストアンサー

Jsなどでブラウザ幅の取得などが必要なのでしょうか？ ... ブラウザ幅はJsで取得しているのかと思うのですが、該当のコードが見つけられません。

　コードを読んでみましたが、このあたりだと思います。

js
1let t=document.documentElement.clientWidth;const r=()=>{document.documentElement.style.setProperty("--vw",`${t}px`)};r(),new ResizeObserver(()=>{t!==document.documentElement.clientWidth&&(t=document.documentElement.clientWidth,r())}).observe(document.documentElement);

これがないため、フォントサイズが変わらないのかとおもっているのですが、認識はあっていますでしょうか？

　おおむねご認識の通りです。

また、他のサイトでもよくこの動き（style="--vw: 463px"）のような記載があるHTMLを見かけるのですが、今の主流でしょうか？

　主流ではないですが、まあよくあります。utm. さんが補足欄でご指摘されている通り、アクセシビリティに問題があります。

【非推奨】

ルート要素（<html>タグ）のfont-sizeの指定に、絶対単位（px）を利用している
【CSS】font-sizeには「px」ではなく「rem」を使うべき #アクセシビリティ - Qiita

（個人的にはfont-size: 62.5%は悪いことではないだろうとは思うのですが）

　とはいえ、現実にはクソみたいな上司とかクソみたいなクライアントがアクセシビリティも理解してないくせに「ズームレベルを変えるとレイアウトが崩れるじゃないか！」「フォントサイズの設定が変わるとレイアウトが崩れるじゃないか！」とか言ってくる場合があるので、ズームレベルやフォントサイズの設定を無視するようなデザイン手法には一定の需要がある、ということです。悲しい現実ですね。

追記

　maisumakun さんのご回答を見て、補足が必要かな、と感じたので書いておきます。

　まず、calc(var(--vw) / var(--base-vw))はpx単位の値で、vw単位ではないです。

　というか、CSS上ではpx単位ですが、意図としては比なので単位のない値です。

　これはどういうことかというと、あのページのコードでやっていることは1512:実際の画面幅 = 1:xを解いています。つまり意図としては「幅1512pxで書かれたデザインカンプで1pxとして表現されているものは、実際の画面幅で縮小すると何pxになるか」を計算しているのです。

　これをするとどういういいことがあるかというと、デザインカンプで16pxとして指示されているものを「画面幅がこうだから」とかいろいろ考えずに16remと記述することができる、という点です。

　ここまで読んで、「でもそれならcalc( 100vw / 1512 )って書けばJavaScriptいらなくない？」と感じたかもしれません。ここで引っかかってくるのが『body{width: 100vw}って書くと横スクロールが発生する問題』です。100vwは垂直スクロールバーの幅を含みますので、上記のコードで書くと全体的にデザインカンプから微妙にずれてくるはずです。document.body.clientWidthはスクロールバーを含みませんので、この問題を解決します。
もちろん、cqw単位を使えば解決するはずなのですが、これはこれでbodyが固定配置の包含ブロックとなってしまう問題があり、安易に使うことができません。

　つまり、一言でまとめると「アクセシビリティを犠牲にして、サイズ変更や設定変更に影響されず、デザインカンプからコードを起こす作業を楽にしている書き方」ということなのです。

投稿2025/03/12 01:23

編集2025/03/12 02:33

Lhankor_Mhy

総合スコア37345

mmmmmmy

2025/03/12 10:18

ご返信が遅くなり大変申し訳ありません。ご丁寧にひとつひとつにご回答本当にありがとうございます。モヤモヤとしていた疑問が晴れて、知識がアップデートされました。 font-size: 62.5%についてもサイトによって回答が全然違ったので困惑していたのですが、いただいたリンク先の情報をみて理解ができました。アクセシビリティも意識したサイト制作ができるようになりたいので、絶対単位での指定は基本的に使用しないでおこうと思います。昨晩、Xでもフォントサイズの指定について検索をかけていると、今回の質問内容のような、以下の記載の仕方をおすすめしているのを数件みつけたので早速使いかけたのですがこれだとアクセシビリティを無視することになるんですね。。。 html { 　font-size: calc(100vw / 39); } .text { 　font-size: 1.4rem; } いただいた回答を踏まえて、ブラウザの幅に依存したフォントサイズ指定は font-size: clamp(15px, 1.5vw, 18px);、ブラウザの幅に依存しない場合でremを使用する場合は以下のような、作り方で正しいでしょうか...？ html { font-size: medium; } p { 　font-size: 1.125rem; } @media screen and (min-width: 767px) { 　p { 　　font-size: 0.875rem; 　} } 度々の質問大変恐れいりますが、ご確認いただけますと幸いです。よろしくお願いいたします。。。

Lhankor_Mhy

2025/03/12 12:35 編集

はい、それでいいと思います。ただ、clamp と rem と vw を組み合わせたフォントサイズ指定が主流になりつつあると思いますので、そちらを使ってみるのもいいかもしれません。 https://coliss.com/articles/build-websites/operation/css/clamp-calculator-for-calculating-viewport-based-clamped-values.html

mmmmmmy

2025/03/21 03:01

ご返信ありがとうございます。また返信を失念しておりました、本当に申し訳ありません。いただいたサイトを拝見しました。ありがとうございます。 root指定をするととても便利ですね！さっそく使用してみようとおもいました！無知な私にたくさんの知識をありがとうございます。遅くなりましたがベストアンサーに選ばせていただきました。

行動規範の内容に同意します

あなたの回答