レスポンシブデザインは、ざっくり言うと訪問したユーザーのデバイスの画面サイズに合わせて、操作しやすくなるように切り替えることができるwebデザインの手法です。
最近のWebサイトではレスポンシブデザインは結構当たり前になってきています。
レスポンシブデザインを導入する方法として、CSSのみの方法とJavaScriptから制御する方法の2種類があります。
この記事ではこの2種類の方法を紹介します。
レスポンシブデザインのメリット
レスポンシブデザインを取り入れる理由は、どんなデバイスでも扱いやすく見やすいサイトを実現させることです。
例えば、PCから表示させるとこんな感じのページがあります。
このページをレスポンシブ対応をせずにスマホなど幅の小さいデバイスで表示させると
フォルダ一覧が幅が足りなく縦に伸びてしまい、見辛いページになってしまいました。
レスポンシブ対応を行い、スマホなどで表示された場合は、本文を全体表示にしたりボタンの配置・表示などを変更し見やすく改善させることができました。
CSSのみで実装
CSSに、@media（メディアクエリ）というものがあります。
@mediaは、引数に設定したサイズになると、@media内に設定したCSSが適用されます。
例）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="test"> テスト <div> <style> .test { width: 50%; } @media (max-width: 700px) { .test { width: 100%; } } </style> |
CSSのtestクラスにwidth: 50%が設定されていますが、デバイスの画面幅が700px以下の場合は@media内のtestクラスの設定に上書きされます。
なので、700px以下の画面幅のデバイスで閲覧された場合は、testクラスのwidthは100％になります。
@mediaは複数書くこともできるので、画面サイズに合わせて細かく調整することができます。
詳しくはこちらを参照ください。
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Media_queries
JavaScriptから制御する
レスポンシブは基本的に上記したCSSの方法でほぼほぼ完結できますが、ある画面幅の場合に動的に要素を作成したい場合など、どうしてもCSSだけでは完結できない場合があります。
そんな時は、「window.screen.width」で画面幅を取得することができます。
画面ロード完了時などにwindow.screen.widthで画面幅を取得すれば、CSSの動的切り替えや要素の実装を制御することができます。
|
1 2 3 4 5 6 |
window.onload = function() { const width = window.screen.width; if (width < 700) { // 画面幅700ｐｘ以下の時に行いたい処理 } } |
おまけ
GoogleChromeの開発者ツールには、デバイス幅ごとのサイトの表示状況を確認するのに便利な機能があります。
この画像の青色に光っているボタンを押すと幅の調整を行うことができるようになります。
