こんにちは。アトリエKW 代表の 渡邉響子です。
2021年５月に正式リリースされた Bootstrap Ver.5 の使い方などを紹介しています。
Bootstrap でレスポンシブなウェブサイトを作っているときに、ブラウザのウインドウサイズを変えつつブレイクポイントごとに思った通りにレイアウトされてるかを確認しますよね。
その時に、「今はいったいどのブレイクポイントのクラスが適応されてるんだろ？」とわからなくなることってないですか？
今回は、制作中に、レスポンシブ動作をデバッグするのに便利なスニペット（HTML と jQuery スクリプト）をご紹介します。
- Bootstrap5 でレスポンシブなウェブサイトを構築中。ブレイクポイントがわからーん
目次
ブラウザのウインドウサイズをリアルタイムで教えてくれます
どんなスニペットかと言いますと、つねに画面右下に常駐して、ブラウザのウインドウ幅と、どのブレイクポイントのクラスが適用されているかを教えてくれるものです。
結論からいきます。以下のコードを、デバッグしたい <body>～</body> のどこでもいいのでコピペしてください。
</body> の直前が良いかもしれません。
<!-- ウインドウサイズと Bootstrap5 のブレイクポイントをリアルタイムで教えてくれる -->
<div id="responsive-debug" style="position:fixed;z-index:2000;bottom:0;right:0;width: 300px;border:1px solid #cccccc;background-color:#efefef;">Window Width:</div>
<script>
var window_width, bootstrap5_break_point;
$(window).on('load resize', function(){
window_width = window.innerWidth;
if( window_width >= 1400 ){
bootstrap5_break_point =' xxl';
} else if( window_width >= 1200 ){
bootstrap5_break_point =' xl';
} else if( window_width >= 992 ){
bootstrap5_break_point =' lg';
} else if( window_width >= 768 ){
bootstrap5_break_point =' md';
} else if( window_width >= 576 ){
bootstrap5_break_point =' sm';
} else {
bootstrap5_break_point =' (xs)';
}
$("#responsive-debug").text("Window Width: "+ window_width+bootstrap5_break_point);
});
</script>注意事項
- Bootstrap5 のデフォルトのブレイクポイントにだけ対応しています。
- WordPress で構築中の方は、<script>から</script>の中の $ (ドルマーク)を、jQuery に置換してください。
そうしないと動きません。 - jQuery を使用しています。jQuery を使用できないページの場合は動作しません。
使用できるようにするには、CDNで公開されているスクリプトをリンクするか、jQuery のサイトからスクリプトをダウンロードして読み込ませる必要があります。
（WordPress を使用している場合は、デフォルトでjQueryを読み込むようになりますのでその必要はありません） - jQuery は最新の Ver. 3.6 で検証しています。jQueryが対応していないウェブブラウザでは動作しません。
ページが完成して公開する前には、このスニペットをHTMLから削除することをお忘れなく。
閲覧者にも横幅を教えてあげることになりますよ。
【 2021年9月26日 追記 】
最初の記事では、6行目、jQuery の $(window).width() でウインドウ幅を取得していましたが、どうもブレイクポイントがずれることがわかりました。
JavaScrpit の window.innerWidth に変更することで、正しいウインドウ幅を取得できました。
上記スニペットも修正しています。
動作の説明
ID “#responsive-debug” を持つ、<div> 要素を準備します。
これは style によって、画面右下に固定しています。
jQuery スクリプトでは、ウインドウ 読み込み時(‘load’) とリサイズ時(‘resize’) に、$(window).width() メソッド window.innerWidth でウインドウ幅を取得。その幅からどのブレイクポイントのクラスが適応されるかを if else のところで判定。
その結果を ID “#responsive-debug” の <div>のなかのテキストとして置き換えるという単純なものです。
このスニペットを作った経緯
以前、私は Bootstrap5 のブレイクポイントがわかるデスクトップ壁紙を作って公開しました。
しばらく自分でもこの壁紙を目安にしてレスポンシブデザインをしていましたが、どうもブレイクポイントの位置が合わないと気づきました。
それで今回紹介したスニペットを作って、なんで違ってくるのかを確認したといういきさつです。
その結果、私は全然知らなかったのですが、ブラウザの横幅ドット数と、モニターの画面横幅ドット数は、ブラウザのデフォルト設定では一致しないんですね。
私のノートPC、DELL の Vostro 15 3000 の 15.6インチモニターで、実際に画面いっぱいにブラウザ(Chrome)を広げてみました。
画像をごらんのとおり、 DELL の Vostro 15 3000 の 15.6インチモニター では、横幅が 1920ドットあるんですが、ブラウザでの画面幅の値は 1513 と、全然違う数値でした。右側のスクロールバーの幅を差し引いた値というにはあまりにも違いすぎる。
上の写真は Chrome でのものですが、Microsoft Edge でも同じでした。
HTML の <head> セクションで、きちんと
<meta name="viewport" content="width=device-width, initial-scale=1.0">
を書き加えていて、デバイスの画面幅と一対一になってるんじゃないの？とも思いましたが、きっとこれはブラウザの仕様なので、考えるのをやめました。
というわけでブレイクポイントがずれる謎が解けました。
今後は、今回紹介したスニペットを使ってレスポンシブデザインのデバッグをしようと思いました。
横幅 1920 ドットの 15.6インチモニター の場合だけかもしれません。ほかで確かめようがありませんので、もし情報をお持ちの方は、アトリエKWのTwitter アカウントあてに教えていただけたら嬉しいです。
ちなみに、ブラウザの表示縮尺を80%に設定すると、私のPCではちょうどモニターのドット数とブラウザのドット数が一致しました。そういう仕様なのでしょう・・・
まとめ
今回は、ブラウザの横幅と、Bootstrap5 のブレイクポイントのどのクラスになるかをいつも表示してくれるスニペットを紹介しました。
昔から繰り広げられるウェブデザイナーとブラウザの挙動との闘い。
そのひとつなのでしょうか、今回のも・・・・
ご注意事項
- 全ての環境で動作する保証はありません。
ウェブサイト制作関連の技術情報は、当方の動作環境で動作を確認しておりますが、全ての環境で動作を保証するものではありません。 - 紹介した情報の適用は、自己責任でお願いします。
細心の注意をはらって記事を書いています。ですが記事中の情報を適用したことにより問題が発生することがあるかもしれません。
その場合、当方はその責任をとることができません。
あらかじめご両翼ください
