SIRIUSでスマホ表示（レスポンシブ）を確認する方法

SIRIUSでスマホ表示（レスポンシブ）をプレビューで確認する方法です。大きなテーブルなどはスマホ表示で見づらい場合があるので積極的に確認して行きましょう。

このページの目次

スマホ表示の確認が必要な理由

SIRIUS付属テンプレートやSIRIUSテンプレート「NOVA」はレスポンシブデザインを採用したレスポンシブテンプレートです。レスポンシブデザインでは端末の画面サイズに合わせてテンプレートの表示が自動で調整されます。つまりスマホでみた場合はスマホに合わせたレイアウトで表示されるわけです。

NOVAの2カラムヘッダーはスマホだと縦に2列で表示される

凝ったレイアウトや幅の広い大きなテーブル、また特にCSSのカスタマイズをした場合、PC表示は問題なくてもスマホでみるとレイアウトが崩れている場合があります。そのため、そういった複雑なレイアウトを使用する場合は必ずスマホ表示を確認する必要があります。

レスポンシブに限らず、SIRIUS上位版の「iPhoneサイト同時生成機能」でもスマホ表示の確認が必要です。

むしろPC用とスマホ用で違うテンプレートを使用する「iPhoneサイト同時生成機能」はレスポンシブよりも確認作業が必要です。この確認作業が面倒なため、私は「iPhoneサイト同時生成機能」を一切使用していません。

スマホ表示を確認するためにわざわざスマホから閲覧するのは面倒です。そこでSIRIUSのプレビュー機能を使用します。プレビューはSIRIUS標準のプレビュー機能とウェブブラウザの2つから選択できます。

SIRIUSの左上のSマークをクリックして「システム設定」をクリックします。

「SIRIUSプレビュー機能で表示」を選択します。この状態でプレビュー(F12)するとプレビューウインドウが表示されます。

「画面サイズ」からPC、スマホ、タブレットが選択できます。

この設定をしなくてもショートカットキー「Ctlr+4」かプレビューボタンを「右クリック→SIRIUS内蔵プレビュー」からも可能でした。知らなかった……。

「システム設定」で「通常のブラウザで表示」を選択します。この状態でプレビュー(F12)するとブラウザが起動してプレビューが表示されます。私は普段からこちらを使用しています。

お使いのブラウザがChromeの場合はブラウザでプレビューを表示している状態でキーボードの「F12」キーを押すか、右クリックから「検証」を選択してください。

右クリックから「検証」の場合

以下の画面から①をクリックして②から表示したい端末を選択しましょう。

お使いのブラウザがFirefoxの場合はブラウザでプレビューを表示している状態でキーボードの「F12」キーを押すか、右クリックから「要素を調査」を選択してください。

以下の画面から①をクリックして②から表示したい端末を選択します。

ブラウザで「F12」キーから確認する方法は他のサイトでも利用できます。例えば当サイトはSIRIUSテンプレート「NOVA」を使用していますが、スマホではどんな感じか確かめるのにサクッと使うことができるので便利です。