質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

191閲覧

特定の画面幅だけ画像をロードしたい

kjshdfiuasye

総合スコア25

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2024/02/28 07:21

実現したいこと

特定の画面幅だけ画像をロードしたい

発生している問題・分からないこと

断念方法1(display:none)

cssのメディアクエリごとにdisplay:none;すると、ロードしなくていい画面幅でもロードが発生する。

断念方法2(pictureタグ)

pictureタグだとimgタグ1つとsourceタグ1つ以上となり、結果として画像指定を最低2つ行わなければならない。1000px以上だけ表示させたい場合にsourceタグに画像を指定したとしても、999px以下には表示が不要なimgタグの方の画像まで読み込まれてしまう。

該当のソースコード

html

1<!--1000px以上の場合にのみ画像をロードしたい--> 2<picture> 3 <source media="(min-width: 1000px)" srcset="hoge.webp"> 4 <img src="999px以下は画像のロード不要。何を記述すべきか。"> 5</picture>

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

pictureタグを使う方法が出てきた。

補足

特になし

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2024/02/28 07:22

質問タグにはないですが、JavaScriptを使わずということでしょうか
kjshdfiuasye

2024/02/28 07:29

はい。HTMLとCSSで実現したいと考えております。
yambejp

2024/02/28 08:17

>ロードしなくていい ロードしない場合はどうなる想定なのでしょうか?
kjshdfiuasye

2024/02/28 08:34

画像を表示しない状態にしたいです。
yambejp

2024/02/28 08:36

ロードするけど表示しないというのはだめなのですか?
kjshdfiuasye

2024/02/28 08:59

小さい画面幅と大きい画面幅で劇的にレイアウトが異なる2つのデザインの場合、非表示の画像までロードしてしまうと画像の読み込みが2倍になり、ページ読み込みに時間がかかってしまうため、表示させる必要のない画像はロードしたくないという経緯でした。
yambejp

2024/02/28 09:04 編集

いずれにしても特殊なことをやるならjsが必須です。 姑息ですが遅延読み込みをする方法は回答に追記してあります lazyロードはブラウザがネイティブに対応しているなら表示画面の極端な外側に画像をとばしてしまえば遅延対象になってページロード時には画像は読み込まないことが期待できます
guest

回答1

0

ベストアンサー

背景画像として読み込むのであればmediaで切り替えできます

追記

lazyロードするとか・・・

css

1<style> 2body{ 3 background-Color:lightgray; 4} 5#hoge{ 6 position:absolute; 7 top:-9999px; 8} 9@media screen and (min-width: 1000px){ 10body{ 11 background-Color:gray; 12} 13#hoge{ 14 position:initial; 15 top:0; 16} 17} 18</style> 19<div class="dummy"></div> 20<img src="sample.jpg" id="hoge" alt="#" loading="lazy" > 21

投稿2024/02/28 08:30

編集2024/02/28 08:55
yambejp

総合スコア114736

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kjshdfiuasye

2024/02/28 08:39

ご回答ありがとうございます。cssで背景指定の方法ですね。今回のケースでは文書構造的にHTMLに記述したいというのは不可能でしょうか。そうなると1pxの超軽量gifをimgタグに指定してそれを非表示ぐらいの方法しかないでしょうか。
yambejp

2024/02/28 09:07 編集

ブラウザによって挙動が変わりますがlazyロードするとかでロードを止めることができるかもしれません ブラウザで幅を狭めて表示し、一旦スーパーリードしデバッグ画面のネットワークを監視しておくとsample.jpgが初動では呼び出されないことが確認できると思います。その後ブラウザの幅を広げてやるとそのタイミングで画像が呼び出されます
kjshdfiuasye

2024/02/29 07:46

回答ありがとうございます。参考になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問