メインコンテンツにスキップ

PCでは表示されていた要素がモバイルでは表示されない

PCでは見えている要素が、タブレットやモバイルなど特定の画面幅で表示されない場合は、画面幅ごとのボックスの表示設定が意図せず変更されている可能性があります。この記事では、デザインエディタ上で確認すべき主なポイントを整理します。

今日アップデートされました

Point:Studioのレスポンシブデザイン

Studioでは、1つのページデザインを基準に、各種画面幅(ブレイクポイントごとにスタイルを調整してレスポンシブデザインを実現します。​
ボックスやテキストのレイアウト・外観・ポジションなどはブレイクポイントごとに変更できますが、画像やテキスト自体の内容、グルーピング構造は共通です。​

レスポンシブデザイン全体の考え方や関連機能については、次の記事も参考にしてください。

ブレイクポイントごとの表示設定が原因で、特定の画面幅で要素が非表示になっている場合があります。以下の手順で、スクリーン上から要素を選択して表示設定を確認します。

表示設定を確認する

  1. レイヤーパネルを開き、該当のボックス要素にカーソルを合わせます。

  2. レイヤーの右横に表示された目のアイコン(表示設定)をクリックします。

  3. 対象のボックスを表示したいブレイクポイント(PC・タブレット・モバイルなど)のチェックが有効になっているか確認します。

  4. 該当ブレイクポイントのチェックが外れている場合は、チェックを入れて表示状態に切り替えます。

表示設定以外に考えられる原因

  • 該当のボックスを含む親ボックスの幅が0になっている

  • 該当のボックスの横幅のpx指定が画面幅より大きく、レイアウト上はみ出している

  • 不要な親ボックスが挟まっており、親ボックス側の表示設定やサイズ設定が原因で非表示になっている

  • 条件付きスタイル「出現時」が設定されているが、設定が正しくされていない

上記のような原因を確認する方法は、タブレットやモバイルで画像が表示されないを参照してください。


スマホだと消える スマホで消える スマホだと出ない スマホだと見えない

PCだと消える PCで消える PCだと出ない PCだと見えない

タブレットだと消える タブレットで消える タブレットだと出ない タブレットだと見えない

デフォルトだと消える デフォルトで消える デフォルトだと出ない デフォルトだと見えない

こちらの回答で解決しましたか?