メインコンテンツにスキップ
すべてのコレクションよくある質問エディタ(デザイン)
PCやモバイルで画面幅によって要素が表示されません
PCやモバイルで画面幅によって要素が表示されません

PCやモバイルで画面幅によって要素が表示されない原因と、エディタ上で表示設定を確認・変更する方法を解説します。要素が意図せず非表示になっているケースが多いので、設定を見直すことで解決できます。

Saika avatar
対応者:Saika
一週間前以上前にアップデートされました

PCやモバイルで要素が表示されない原因と対処法

STUDIOでWebサイトを作成する際、PCでは表示されていた要素が、モバイルでは表示されなくなることがあります。多くの場合、意図せず要素の表示設定が変更されているのが原因です。

以下の手順で、要素の表示設定を確認・変更することで、この問題を解決できます。

エディタ上で表示設定を確認する方法

1. ブレイクポイントの切り替え

エディタ上部のブレイクポイントで、要素が表示される画面幅(PCやモバイルなど)を選択します。

2. 表示設定の確認

該当の要素をクリックします。その状態で、画面左上の目のマークにカーソルを当てます。表示したい画面幅(PCやモバイルなど)のボックスにチェックが入っているか確認します。なければチェックを入れます。

スクリーンショット:表示設定を確認、設定する様子。

レイヤーパネルで表示設定を確認する方法

1. ブレイクポイントの切り替え

エディタ上部のブレイクポイントで、要素が表示されない画面幅(PCやモバイルなど)を選択します。

2. レイヤーパネルで表示設定の確認

画面左側のレイヤーパネルを開きます。レイヤー名の右横に非表示アイコンが表示されているレイヤーを選択します。

選択した状態で、画面左上の目のマークにカーソルを当て表示設定を変更します。

スクリーンショット:表示設定が設定されているかチェックする様子。

表示設定が原因でない場合、アニメーションの設定が原因である可能性があります。以下記事の参考に、設定をご確認ください。

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