タブレットやモバイルで画像が表示されない

タブレットやモバイルで画像が消えてしまう場合、ブレイクポイントごとの表示・非表示設定やボックスのサイズなど、いくつかの設定が影響している可能性があります。以下の項目を順番に確認してください。

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

Studioでは、1つのページデザインを基準に、各種画面幅（ブレイクポイント）ごとにスタイルを調整してレスポンシブデザインを実現します。
サイズや余白、配置、表示・非表示などはブレイクポイントごとに変更できますが、画像やテキストの内容、グルーピング構造は共通です。

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

手順 1. ブレイクポイントごとの表示設定を確認する

ブレイクポイントごとの表示設定が、意図せず変更されている場合があります。

レイヤーパネルで、

画像が親ボックスに内包されている場合、親ボックスの幅や高さが0pxになっていると表示されません。

画像ボックスのサイズ設定をpxで指定している場合は、画面幅より極端に大きい値になっていないか確認します。必要に応じて%など他の単位も含めて調整します。

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

レイヤーパネルで該当のボックス要素前後のレイヤー構成を確認し、親ボックスの表示設定やサイズ設定に意図しない設定が含まれていないかを確認します。

条件付きスタイルを設定している場合、設定が正しく反映されているかを確認します。詳細は、「出現時」のアニメーションが表示されない原因と対処法を参照してください。

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

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

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

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