FirefoxMENUホームカテゴリー別Windows112021年10月5日に日本に公開されたWindows11(ウィンドウズ11)についてのカテゴリーです。Excel(マイクロソフトエクセル)についてまとめたカテゴリーです。PowerPoint(マイクロソフトパワーポイント)についてまとめたカテゴリーです。Outlook)についてまとめたカテゴリーです。情シスの自由帳ホームカテゴリー別Windows112021年10月5日に日本に公開されたWindows11(ウィンドウズ11)についてのカテゴリーです。Excel(マイクロソフトエクセル)についてまとめたカテゴリーです。PowerPoint(マイクロソフトパワーポイント)についてまとめたカテゴリーです。Outlook)についてまとめたカテゴリーです。Edgeを使ってサイトをスマホ表示に切り替えたい人Firefoxを使ってサイトをスマホ表示に切り替えたい人この記事ではPCのブラウザーでスマホページを開く方法を詳しく解説していきます。Webサイトを運営している人は是非覚えておいてほしい機能です。Chromeを使ってPCで見ているサイトをスマホ表示に切り替える方法から詳しく解説していきます。Chromeをアクティブウィンドウにした状態で、キーボードのF12キーを押してください。アクティブウィンドウとはPC画面の一番手前に表示されていて、操作可能なウィンドウを指します。反対に、一番前以外に表示されていて、操作できないウィンドウを非アクティブウィンドウと呼びます。Chromeの右側に以下の画像のようなデベロッパーツールが開きます。赤枠で囲った部分がデベロッパーツールです。デベロッパーツールとはWebサイトのコンテンツやリソースを簡単に分析することができる機能です。キーボードのF12を押してデベロッパーツールを開くSTEPデベロッパーツールのスマホアイコンをクリックしてスマホ表示に切り替えるデベロッパーツールが開いたら、デベロッパーツールの左上にあるスマホとタブレットの図が描かれたアイコンをクリックしてください。クリックすると左側の画面が赤枠のようにスマホ表示に切り替わります。その上の青枠内には現在の解像度が表示されており、以下の画像では460✕1213での見え方になっています。ここに表示されている数字はpoint(CSSピクセル)です。1ptは1インチの72分の1のサイズで、pixelとは全く異なる数字なので注意してください。デベロッパーツールのスマホアイコンをクリックもう一度スマホとタブレットの図が描かれたアイコンをクリックとPC表示に戻ります。デバイスを選択して表示する大きさを変更するデベロッパーツールには、デバイス(機種)に応じた大きさ(point)が予め用意されており、「iPhone12Proではどのように表示されるか?」なども確認できます。Responsive]をクリックしてください。Responsive]をクリックすると下に向かってプルダウンメニューが展開されます。展開されたメニューの中にはAndoroid端末からiPhoneやiPadまで幅広い機種名が表示されるので、表示を確認したいデバイスを(機種)を選択してください。選択したデバイス(機種)の画面サイズに調整されます。デバイスを選択して表示する解像度を変更するこのプルダウンメニューの中に見たいデバイス(機種)がない場合、プルダウンメニューの一番下にある[Edit]をクリックしてください。Devices」が表示されます。その中には先程まで表示されていないデバイス(機種)も多数表示されています。Devices」内に表示されているデバイス名(機種名)にチェックを入れると、左側のDimensionsにその機種が追加されます。Xにチェックを入れて追加しました。Xの画面表示を確認することができます。deviceをクリックして登録することができます。赤枠内に必要項目を入力してAddをクリックすると追加されます。Devicesにも選択したい機種がない場合iPhoneの画面サイズ(CSSピクセル)については以下のサイトを御覧ください。Edgeを使ってPCで見ているサイトをスマホ表示に切り替える方法を詳しく解説していきます。Edgeをアクティブウィンドウにした状態で、キーボードのF12キーを押してください。アクティブウィンドウとはPC画面の一番手前に表示されていて、操作可能なウィンドウを指します。反対に、一番前以外に表示されていて、操作できないウィンドウを非アクティブウィンドウと呼びます。Edge開発者ツールを開きますか?」と書かれた画面が表示されます。下の方にある[DevToolsを開く]をクリックしてください。今度このメッセージを表示させないためには「決定を記憶する」にチェックを入れてから[DevToolsを開く]をクリックしてください。DevToolsへようこそ」と書かれた画面がひょうじされます。その上にあるスマホとタブレットのアイコンをクリックしてください。クリックすると左側の画面が赤枠のようにスマホ表示に切り替わります。その上の青枠内には現在の解像度が表示されており、以下の画像では599✕458での見え方になっています。ここに表示されている数字はpoint(CSSピクセル)です。1ptは1インチの72分の1のサイズで、pixelとは全く異なる数字なので注意してください。EdgeのDevToolsには、デバイス(機種)に応じた大きさ(point)が予め用意されており、「iPhone12Proではどのように表示されるか?」なども確認できます。レシポンシブ]をクリックしてください。レシポンシブ]をクリックすると下に向かってプルダウンメニューが展開されます。展開されたメニューの中にはAndoroid端末からiPhoneやiPadまで幅広い機種名が表示されるので、表示を確認したいデバイスを(機種)を選択してください。選択したデバイス(機種)の画面サイズに調整されます。デバイスを選択して表示する大きさを変更するこのプルダウンメニューの中に見たいデバイス(機種)がない場合、プルダウンメニューの一番下にある[編集]をクリックしてください。Edgeの右側に以下の画像で赤枠で囲った「エミュレート済みデバイス」の一覧が表示されます。その中には先程まで表示されていないデバイス(機種)も多数表示されています。レシポンシブ]にその機種が追加されます。Xにチェックを入れて追加しました。Xの画面サイズでの表示を確認することができます。エミュレート済みデバイスにも選択したい機種がない場合エミュレート済みデバイスにも選択したい機種がない場合は、[カスタムデバイスの追加]をクリックして登録することができます。赤枠内に必要項目を入力して追加をクリックすると追加されます。Devicesにも選択したい機種がない場合iPhoneの画面サイズ(CSSピクセル)については以下のサイトを御覧ください。次はFirefoxを使ってサイトをスマホ表示に切り替える方法を詳しく解説していきます。STEPキーボードのF12を押して開発ツール画面を開くFirefoxをアクティブウィンドウにした状態で、キーボードのF12キーを押してください。アクティブウィンドウとはPC画面の一番手前に表示されていて、操作可能なウィンドウを指します。反対に、一番前以外に表示されていて、操作できないウィンドウを非アクティブウィンドウと呼びます。キーボードのF12を押して開発ツール画面を開くSTEP開発ツールのスマホアイコンをクリックしてスマホ表示に切り替えるキーボードのF12キーを押すとFirefoxの画面下半分くらいに開発ツールが表示されます。開発ツールの右側にあるスマホとタブレットのアイコンをクリックしてください。開発ツールのスマホアイコンをクリックしてスマホ表示に切り替えるクリックすると左側の画面が赤枠のようにスマホ表示に切り替わります。その上の青枠内には現在の解像度が表示されており、以下の画像では320✕480での見え方になっています。ここに表示されている数字はpoint(CSSピクセル)です。1ptは1インチの72分の1のサイズで、pixelとは全く異なる数字なので注意してください。開発ツールのスマホアイコンをクリックしてスマホ表示に切り替える開発ツールの画面が使いにくい場合Firefoxの開発ツール画面は上に画面表示があり、下に開発ツールが表示されています。スマホ表示にした場合、どうしても縦長になることが多いためこのままの状態では見づらいかもしれません。その場合は開発ツール右下の[三点リーダ]をクリックして、表示を変更することができます。開発ツールの画面が使いにくい場合デバイスを選択して表示する大きさを変更するFirefoxの開発ツールには、デバイス(機種)に応じた大きさ(point)が予め用意されており、「iPhone12Proではどのように表示されるか?」なども確認できます。開発ツールでスマホ表示に切り替えた後、左上にある[レシポンシブ]をクリックしてください。[レシポンシブ]をクリックすると下に向かってプルダウンメニューが展開されます。展開されたメニューの中にはAndoroid端末からiPhoneやiPadまで幅広い機種名が表示されるので、表示を確認したいデバイスを(機種)を選択してください。選択したデバイス(機種)の画面サイズに調整されます。デバイスを選択して表示する大きさを変更するこのプルダウンメニューの中に見たいデバイス(機種)がない場合、プルダウンメニューの一番下にある[リストを編集]をクリックしてください。デバイスを選択して表示する大きさを変更する[リストを編集]をクリックするとFirefoxに登録されているデバイス(機種)の一覧が表示されます。その中には先程まで表示されていないデバイス(機種)も多数表示されています。デバイスを選択して表示する大きさを変更する表示されているデバイス名(機種名)にチェックを入れてください。デバイスを選択して表示する大きさを変更するチェックを入れるとプルダウンメニューにその機種が追加されます。デバイスを選択して表示する大きさを変更するこれでチェックを入れたデバイス(機種)の画面サイズでの表示を確認することができます。Edge、Firefoxに関する記事はこちらです。Chrome(グーグル・クローム)には目の負担を軽減すること等を目的に、ダークモードと呼ばれるモードが搭載されています。Chrome(グーグルクローム)の初期設定では、拡張機能を「シークレットモードのときには実行を許可しない」となっています。Chromeでウェブサイトの中の文字を検索(ページ内検索)する方法を詳しく解説していきます。最後までご覧いただきありがとうございました。このサイトは情シスマンが半径3m以内のITに関する情報を掲載してるサイトです。Windows系を主として、ソフトや周辺機器について思い立った物を色々解説しています。解説している内容に誤りがあった場合や、補足が必要な場合、もっと知りたい場合はこちらのお問い合わせフォームからご連絡ください。個人の方を限定にサポートさせていただきます。